Work Day Scheduler Challenge. The purpose is to generate a workday scheduler that uses local storage to store tasks, that shows the current date and that shows different colors for past, present and future timeslots based on the current time. It also allows the user to delete contents from the local storage.

Installation not required, simply open up the Work Day Scheduler html file and select an hour. You can review past annotations, you can add annotations and you can delete the contents of any timeslot if desired.

• GIVEN I am using a daily planner to create a schedule
  • WHEN I open the planner
    • THEN the current day is displayed at the top of the calendar
  • WHEN I scroll down
    • THEN I am presented with timeblocks for standard business hours
  • WHEN I view the timeblocks for that day
    • THEN each timeblock is color coded to indicate whether it is in the past, present, or future
  • WHEN I click into a timeblock
    • THEN I can enter an event
  • WHEN I click the save button for that timeblock
    • THEN the text for that event is saved in local storage
    • THEN a notification message confirming data has been saved is displayed for 2 seconds
  • WHEN I click the delete button for that timeblock
    • THEN the text for that event is deleted from local storage
    • THEN a notification message confirming data has been deleted is displayed for 2 seconds
  • WHEN I refresh the page
    • THEN the saved events persist

The github URL containing the code for this challenge is located at:

https://github.com/Maelikah/M5_WorkdayScheduler

The github pages URL containing the deployed webpage is located at:

https://maelikah.github.io/M5_WorkdayScheduler

Here is a screenshot of the deployed webpage for reference:

• https://icolorpalette.com/color/cloud-cream
• https://day.js.org/docs/en/get-set/hour
• https://www.w3schools.com/jquery
• https://getbootstrap.com/docs/
• https://learn.jquery.com/using-jquery-core/document-ready/
• https://api.jquery.com/
• https://metafizzy.co/blog/this-in-event-listeners/
• https://www.w3schools.com/jquery/jquery_traversing_siblings.asp
• https://api.jquery.com/closest/

NA