Create a simple calendar application that allows a user to save events for each hour of the day by modifying starter code. This app will run in the browser and feature dynamically updated HTML and CSS powered by jQuery.

Acceptance Criteria

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

WHEN I refresh the page

THEN the saved events persist

![A user clicks on slots on the color-coded calendar and edits the events.

//script.js

// Wrap all code that interacts with the DOM in a call to jQuery to ensure that

// the code isn't run until the browser has finished rendering all the elements

// in the html.

$(function () {

// TODO: Add a listener for click events on the save button. This code should

// use the id in the containing time-block as a key to save the user input in

// local storage. HINT: What does `this` reference in the click listener

// function? How can DOM traversal be used to get the "hour-x" id of the

// time-block containing the button that was clicked? How might the id be

// useful when saving the description in local storage?

//

// TODO: Add code to apply the past, present, or future class to each time

// block by comparing the id to the current hour. HINTS: How can the id

// attribute of each time-block be used to conditionally add or remove the

// past, present, and future classes? How can Day.js be used to get the

// current hour in 24-hour time?

//

// TODO: Add code to get any user input that was saved in localStorage and set

// the values of the corresponding textarea elements. HINT: How can the id

// attribute of each time-block be used to do this?

//

// TODO: Add code to display the current date in the header of the page.

});

//HTML

rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"

/>

rel="stylesheet"

href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"

integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"

crossorigin="anonymous"

/>

href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"

rel="stylesheet"

/>

Work Day Scheduler

A simple calendar app for scheduling your work day

9AM

10AM

11AM

src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"

integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U="

crossorigin="anonymous"

>