/Daily-Planner-App

A simple calendar application that allows users to save events for each hour of the day. Goal: add programming logic to a task-tracking app that can dynamically render HTML elements based on the time of day.

Primary LanguageHTMLMIT LicenseMIT

Project 7: Daily Planner App

Daily-Planner-App License: MIT Daily-Planner-App

Overview

This project involves creating a simple calendar application that allows users to save events for each hour of the day by modifying the starter code. The application runs in the browser and features dynamically updated HTML and CSS powered by jQuery. To work with date and time, the Day.js library is used. The main goal is to provide an effective daily planner for users to manage their busy schedules.

Table of Contents

User Story

AS AN employee with a busy schedule
I WANT to add important events to a daily planner
SO THAT I can manage my time effectively

Acceptance Criteria

The application should meet the following criteria:

  • Display the current day at the top of the calendar when a user opens the planner.

  • Present time blocks for standard business hours when the user scrolls down.

  • Color-code each time block based on past, present, and future time when 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.

Mock-Up

The following animation demonstrates the application functionality:

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

How to Run the Application

To run the application, you can visit the live URL where it's deployed. https://daironreijna.github.io/Daily-Planner-App/

Additionally, you can clone the project repository and open the HTML file in a web browser. https://github.com/daironreijna/Daily-Planner-App

The Project

When developers find themselves repeating a task, they tend to look for ways to simplify their workflow. Tools with these goals have emerged in the JavaScript ecosystem, including third-party APIs.

In this project, I have worked with third-party APIs like jQuery and Day.js to dynamically update an HTML file. These tools can add greater interactivity to an app, and they have historically seen wide adoption in the industry.

Project Learning Objectives

By the end of this project, I have been able to:

  • Create and select DOM elements.

  • Assign content or styling to a DOM element.

  • Append, prepend, and replace elements in the DOM.

  • Traverse the DOM through child elements.

  • Attach event listeners and their corresponding event handling functionality.

  • Delegate events for elements that have been dynamically created.

  • Use jQuery DOM manipulation to create simple games.

  • Use jQuery UI widgets to make webpages more user-friendly.

  • Implement jQuery UI interactions to create sortable lists.

  • Use Moment.js to calculate time differences.

  • Apply the inverse of a commit by using git revert.

  • Collaborate with teammates to create a project tracker app.

Resources

Contributing

Acknowledgement: None required. Coding and design completed solely by developer.

headshot of Dairon Reijna
Dairon Reijna
🎨💻

I welcome contributions from the community to enhance this Portfolio Project. By participating in this project, you contribute to a vibrant and inclusive environment. To ensure a positive experience the code of conduct we will adhere to is based on The Contributor Covenant. Please review and follow these guidelines when contributing.

Accessibility Testing

I aim to develop websites that are built mobile first, with accessibility in prime focus. I welcome feedback, and would ask that you test for accessibility by visiting this page: Accessibility Testing and Inclusive Design.

License

This project is licensed under a MIT License.

© 2023 Dairon Reijna. Confidential and Proprietary. All Rights Reserved.