daironreijna / 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.

Project 7: 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
• Acceptance Criteria
• Mock-Up
• How to Run the Application
• The Project
• Project Learning Objectives
• Resources
• Contributing
• Accessibility Testing
• License

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:

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

• Day.js Documentation
• Sampath Lokuge (2013) How to Avoid Double Clicking With jQuery ?
• JQuery (n.d.) .one() Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
• JQuery (n.d) submit event - Bind an event handler to the "submit" event, or trigger that event on an element.
• Moment.js cheatsheet
• Arnold, J. (2017) A Moment with Moment.js
• Martin Tournoij (2019) Why I’m still using jQuery in 2019
• Martin Tournoij (n.d.) Free Saas - website analytics. Why I made GoatCounter
• Tim Kadlec (2019) The Ethics of Web Performance
• Danny Guo (2019)The history and legacy of jQuery
• Traversy Media (2016) jQuery Crash Course
• One Month (2017) jQuery vs Javascript
• W3Techs () Usage statistics and market share of jQuery for websites
• Google Hosted Libraries (n.d.) The Google Hosted Libraries is a content distribution network for open-source JavaScript libraries.
• How to randomize (shuffle) a JavaScript array? -How to 'minify' Javascript code
• Bitwise operation -Fisher–Yates shuffle
• jQuery UI Demos
• Day.js Docs
• Day.js docs on parsing
• Difference Day.js
• FreeCodeCamp (2020) HTML Elements Explained: What are HTML Tags and How Do You Use Them?

Contributing

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

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.