Daily Planner App

Description

The Daily Planner App is a simple calendar application that empowers users to manage their busy schedules effectively. With this app, users can add and save important events for each hour of the day. It is a daily planner that helps to add important events such as appointments, tasks and daily plans during the day.

Features of the App

Display the current day and time at the top of the calendar when a user opens the planner.
Present time blocks for standard business hours when scroll down.
Colours for each time block based on whether it's in the past, present, or future when the time block is viewed.
Allow a user to enter an event when they click a time block.
Save the event in local storage when the save button is clicked in that time block.
Persist events between refreshes of a page.
Actual Time display on screen.

Resources and Tools

HTML and CSS to define the structure and style, while JavaScript and jQuery provide the app's functionality, and Day.js helps manage date and time-related operations.

VScode
GitHub
Google Search
jQuery
Day.js

Usabilty

When you open the app, the current day will be displayed at the top of the calendar.
Scroll down to view time blocks for standard business hours.
Each time block will be a different colour to indicate whether it's in the past, present, or future.
Click on any time block to enter and save an event for a particular hour.
Events will be saved in local storage and persist when page refreshes.

Acknowledgments

Thanks to Drew and my classmates, for their support, enlightenment and collaboration throughout the project.

Challenges Faced

During the development of this Daily Planner App, I encountered some challenges, one of which was understanding the manipulation of jQuery. It is very hard to find the proper syntax within the library. With research and persistence and guidance from Drew, I successfully implemented the desired functionality. Practicing during class in the week really helped.