Question: 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

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"

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

I have to create a program in C and I can't figure it out. The program has to read a source file. Please help. /******************************************************************** PROJECT: Glossary...

0 5 Third - Party APIs: Task Board Your Task Create a simple task board application that allows a team to manage project tasks by modifying starter code. This app will run in the browser and feature...

Financial Statement Analysis Obtain a copy of the 2009 annual report for a publicly held firm. Try to obtain an annual report for a retail or manufacturing firm. Be sure that the financial statement...

Please read the instructions carefully: Introduction to Front-end Development with React In this assignment, we will continue to build upon our directory application by creating a front-end interface...

Hello, I am needing help on this assignment please ASAP so I can study it as I have a test on Thursday over this and many other things. let me know if there are any questions. Thank you. UNITED...

/**UserWindow Class*/ import javax.swing.*; import java.awt.*; import java.awt.event.*; /** * Creates the graphical user interface for the program FindADate. * * DO NOT MODIFY THIS CODE. Feel free to...

Please prepare a balanced score card using the information provided. You should prepare a balanced scorecard for the manager of a retail Apple Store. Use the template given. Area Measure Financial...

THIRD AVENUE SOFTWARE HEALTH-CARE APP PROJECT This case is new for the ninth edition of Information Technology Project Management . The case provides an opportunity to apply agile and Scrum...

**Please code this**** The outcome of this assignment will be used later in the last assignment. In the last assignment, you will add a GUI interface to the result of the assignment 1. - Java 8...

The outcome of this assignment will be used later in the last assignment. In the last assignment, you will add a GUI interface to the result of the assignment 1. - Java 8 introduced new APIs for Date...

write a paragraph on how you can implement this recommendation. vrbo was allowing hosts to enforce their own cancellation policys and then aribnb saw and did the same thing. Airbnb's decision to...

For each of the three partitioning techniques, namely round-robin, hash partitioning, and range partitioning, give an example of a query for which that partitioning technique would provide the...

Horrible corporation is trying to choose between the alternative and investments the three securities that the company is considering our follow tax free municipal boss with a return of 8 . 8 0 %...

Deko e 3/1/2019 3/X/2021 Total Book value (millions) $920 1,380 $2,300 Percent of total .40 .60 1.00 Quoted price 94.347 92.625 Market value (millions $867.992 1,278.225 $2,146.22 Percent of total...

3 How can reward and motivational systems be successfully employed in international joint ventures in order to meet the needs and aspirations of an indigenous workforce?

2 To what extent are Western HRM principles and practices being applied in Chinese enterprises, and how successful are these? How do they contrast with Chinese indigenous approaches, and to what...

1 Is there a relationship between cultural values in specific countries (e.g. collectivism, power distance, instrumentalism, humanism) and the way (indigenous) organizations respond to changes in...