Datepicker to display div based on day & ISO week #

[Jon_7]

I have a yearly curriculum for my basketball workouts that I'd like to display online. I've created 53 unique workouts for each day of the week that include the main focus for the day, 6 drills, a quote, and a motivational story.

I know I'd need a datepicker to accomplish this and the logic must employ both a week number script and a getDay script, but I have absolutley no idea on how to get started from there.

As the page loads, it should show today's workout. eg If it's the 17th Monday of the year, it would show that workout. Then the user can select any date (future or past) that will pull up that corresponding workout based on that day of the week and week of the year. All Sunday workouts are different than all Monday workouts which are different than all Tuesday workouts, etc..

If someone could show me the basic layout and functionality, I can take it from there. I'm no expert, but I'm good at following directions. Thanks a ton either way.

[Jon_7]

Here's a rough sketch of what I'm thinking of to potentially give someone a visual. I'd create all the content for each day of the year; I just need the code to present and hide the divs with its corresponding date. Anyone?

<style>

.FridayWeek12{
width:800px;
background:#ededed;
border:2px solid black;
border-radius:10px;
padding:10px;
margin:20px;
}

header{
}

month, date, year{
border:1px black dotted;
padding:1px 4px 1px 6px;
text-align:center;
background:#ccc;
}

.week{
font: italic bold 11px/150% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-align:left;
}

day{

}

.age{
color:white;
background:black;
border-radius:15px;
letter-spacing:2px;
font: normal 13px/140% Arial, Helvetica, sans-serif; 
}

.type{
font: italic bold 11px/150% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-align:left;
}

section{
}

#content{
margin-top:20px; 
}
datesection{
border:1px solid black;
padding:6px;
background:black;
border-radius:6px;
margin:0px 0px 0px 25px;
}

daysection, type{
margin:0px 50px 0px 50px;
letter-spacing:2px;
font: normal 13px/150% Arial, Helvetica, sans-serif;
}

.drill{
letter-spacing:0px;
font: normal 11px/100% Arial, Helvetica, sans-serif;
}

.story{
letter-spacing:0px;
font: normal 12px/150% Arial, Helvetica, sans-serif;
text-align:justify;
padding:5px;
}

.no{
border-bottom:3px solid #bbb;
font: normal 12px/150% Arial, Helvetica, sans-serif;
color:#bbb;
letter-spacing:1px;
}

.yes{
border-bottom:3px solid #990000;
font: bold 12px/150% Arial, Helvetica, sans-serif;
color:#990000;
letter-spacing:1px;
}

.quote{
font: bold 12px/150% Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
.quotes{
font: italic bold 11px/150% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-align:right;
}

</style>

<datesection><month>March</month> <date>24</date> <year>2018</year></datesection>

<div class="FridayWeek12">
<header>

<table width="100%" cellpadding="5px" style="text-align:center;" cellspacing="5">
<tr><td class="type">Skill Workout</td><td class="week">Week 12</td>
<td class="no">Sunday</td><td class="no">Monday</td>
<td class="no">Tuesday</td><td class="no">Wednesday</td>
<td class="no">Thursday</td><td class="no">Friday</td>
<td class="yes">Saturday</td></tr>
<tr><td colspan="2" class="quotes">Quote of the day:</td>
<td class="quote">Don't</td><td class="quote">go</td><td class="quote">through</td><td class="quote">life;</td>
<td class="quote">grow</td><td class="quote">through</td><td class="quote">life</td>
</table>

</header>

<section>

<div id="content">

<table width="100%" cellpadding="5px" style="text-align:center;">
<tr><td class="age" width="33%">Elementary</td>
<td class="age" width="33%">Middle School</td>
<td class="age" width="33%">High School</td></tr>

<tr><td class="drill"><a href="#">Extended Layups</a></td>
<td class="drill"><a href="#">Floaters</a></td>
<td class="drill"><a href="#">Curry Cross to Layup</a></td></tr>

<tr><td class="drill"><a href="#">Ball pickup Layups</a></td>
<td class="drill"><a href="#">Mikans and Scissor Dribbles</a></td>
<td class="drill"><a href="#">Ladder Scissors to Shots</a></td></tr>

<tr><td class="drill"><a href="#">Countdown Shots</a></td>
<td class="drill"><a href="#">Chair Accelleration Dribble J's</a></td>
<td class="drill"><a href="#">Double Bounce Series</a></td></tr>

<tr><td class="drill"><a href="#">1on1 from the Elbow</a></td>
<td class="drill"><a href="#">1on1 from Backdown</a></td>
<td class="drill"><a href="#">1on1 Full Court</a></td></tr>

<tr><td class="drill"><a href="#">Triple Cross Repeat</a></td>
<td class="drill"><a href="#">Devine Drill</a></td>
<td class="drill"><a href="#">Hook Shots</a></td></tr>

<tr><td class="drill"><a href="#">Group Shots</a></td>
<td class="drill"><a href="#">Nash Drill</a></td>
<td class="drill"><a href="#">Legend Series</a></td></tr>

</table>
<hr>

<div class="story">
In everyone’s life, we face obstacles that determine our character.  These obstacles may be great achievements or they may be huge failures.  More times than not we have to fail in order to succeed.  Think back in history.  Many of our great leaders failed before they succeeded.  Thomas Edison failed over 10,000 times before finally succeeding at inventing the light bulb.  Or Michael Jordan who was cut from his high school basketball team for being too small before going on to be arguably the greatest basketball player to ever play in the NBA.<br><br>

We cannot be afraid of failure.  As soon as we lose our sense of urgency at being successful, we lose our purpose.  Being successful is about getting up after you get knocked down or trying one more time after you’ve failed over 10,000 times.  Life is about achieving when others say you can’t do it.  It’s about thinking that the word “impossible” really means “I’m possible.”  You push forward when others would have given up.  You refuse to quit.  Why?  Because this is your life, your dreams and your success.
</div>

</div>

</section>
</div>

[pty]

Perhaps I didn't fully understand what you're after, but I'd steer clear of using plugins when you can use standard inputs.

Here's a five minute stab at what I think you're asking for. If it's not it should be easy to customise. Where I've defined let data = {...} you should be reading that from your data (or API) and not hardcoding it in the function!

Oh, and I've only added data for W12 2018 and W13 2018 so it'll throw errors for other weeks. You'd have to revert to a default schedule or handle the error sensibly.

[Jon_7]

That's very close to what I need, but how can I add HTML instead of the 1-word you used for each day? Also wondering how I can get the week to start on Sunday instead of Monday. And lastly, could I get today's to show on page onload? Thanks a ton!

Codepen Attempt: https://codepen.io/jonsan32/pen/wyVMLN (Only adding the html to show the desired result)

[Jon_7]

Also noticed the 2018 references in the javascript. Does this mean this wouldn't work for future years without me adding those as well. I wanted to come up with basically 370 or so workouts, and then have them applied once any year was chosen. Like the 12th Monday of any year would produce the same exact result, etc.

Thanks again.

[pty]

but how can I add HTML instead of the 1-word you used for each day?

Yes, you can add whatever you like. If you structure your data something like this, you can easily use a simple templating library to insert any HTML you like

    let data = {
        "2018-W12": {
            "Monday": {
                exercise: "Squats",
                reps: 50,
                intensity: "medium",
            },
            "Tuesday": {
                exercise: "Pressups",
                reps: 30,
                intensity: "hard",
            }

        }      
    };

Also noticed the 2018 references in the javascript

I did this for speed. You could write it by hand, or easily programatically generate a schedule for the next several years, or you could write some code that generates them on the fly. Without knowing your plans for creating the exercise schedule it's difficult to say, but providing your data is well-structured it's not that difficult.

[pty]

The week selector is based on ISO8601, and Monday was decided as the first day of the week.

You would need to use a custom widget to customise that. Alternatively, use two inputs, one with the year and one with numbers 1-52. But where possible, I try to stick to standards.

Templating is definitely the way to go for dynamic sections, don't try to build HTML manually with jury or similar. Simplicity is key.

[Jon_7]

OK, this is where I'm at now: http://fiftyallstars.com/50/curriculum.html --- Just need to add the info. One thing that's bothering me, though, is the use of the ALERT. I want something to say when the spreadsheet has been loaded, but I'd rather have a DIV that disappears after 5 seconds instead of the popup.

If anyone can help me with that, I'll be done. Thanks for everything!

Again, I'm posting the end result just in case someone down the line wants to do something like what I wanted to do.

<script type='text/javascript'>    
        var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1OrkcsjT32wHBu4el34eDXJZzyEHHk170PFBrrXdTU9g/edit?usp=sharing';

      let Records;
        function init() {
          Tabletop.init( { key: publicSpreadsheetUrl,
                           callback: showInfo,
                           simpleSheet: true } )
        }

        function showInfo(data, tabletop) {
            Records=data;
            alert('Drills have been loaded. Select a date.');
        }

        window.addEventListener('DOMContentLoaded', init)
      </script>

[Jon_7]

I'm still working on replacing the alert, but I think it might be more helpful to add that I'm trying to add a completion percentage bar that disappears once fully loaded. Looking around the internet, I can't find much. Any help would be great. Thank you!

[pty]

There's a progress HTML element, you shouldn't need to use any additional libraries or plugins and you can style it with CSS. It's as simple as:

<progress value="75" max="100"></progress>

[Jon_7]

The finished product: http://fiftyallstars.com/50/curriculum.html

Thanks for all the help. You're a superstar!