This daily planner is designed for society's hard worker with the typical nine-to-five active hours in mind. The motivation behind this planner is to help the user plan one day at a time and receive visual feedback as the hours pass. A day-planner such as this removes the need for users to memorize daily tasks and instead provides a reliable place to write everything down.

In making this planner, I learned better how to use jQuery to write JavaScript in shorthand. I also learned, however, that recent developments in JavaScript versioning are catching up to jQuery's previously uncontested optimizations. Regarding formatting, it is important to take careful note of Bootstrap class items and CSS so as to not incorporate conflicting stylizations.

N/A. Deployed site here!

Click or tap in an hour-block to add text. Be sure to click or tap the "Save" icon to the left of the block after adding text so that the page may be closed without losing information. Reopen the page any time to check what is planned and keep track of the day. As an added feature, there is a "Clear Your Day" button which allows the user to empty the entire planner to start fresh with a new day - or to take a much deserved rest.

Below is an image of a clear and free day once 5pm has passed and each time block is darkened. The planner while still during active hours has brighter hues and colors:

• current date and time is displayed live in header
• responsive view
• each block of time is highlighted in a specific color based on its point in time: past, present, or future
• save button persists data in local storage
• clear button refreshes page view and removes local storage
• page elements react to user interaction, such as highlighting on hover, click, or tap

Documentation referenced:

• Mozilla Developer Network
• Slack Overflow forums
• Day.js.org

Tutorials referenced:

• WebDevSimplified, GitHub, YT Channel - setting interval in clock to update live
• GeeksForGeeks.org - RegEx match method that extracts a number from a string

Artists:

• dontbeshy, ColourLovers.com - color palette for hourly tracker
• dontbeshy, ColourLovers.com - color palette for accent features

Tutor credit:

• Alexis San Javier GitHub - save button event listener scope, Day.js calculations

Please refer to the LICENSE in the repo.