javimarashall / daily-planner

An application that allows users to organize their daily activities.

Daily-Planner

Site

Technologies Used

• HTML used to write the code for the daily planner
• CSS used to style the code written on the HTML
• Java Script - Used to create the advance layout of the application
• Git - Used for pushing data up to the repository
• GitHub - Used for publishing the application
• VS Code - Software used for writing the code for the site
• Moment.js - Used to fetch information about the time of day

Summary

This site contains a daily planner application where the user is able to plan their business hours, from 9am to 5pm. The application contains some cool features such as time of day colors. Time of day colors mean that if the current time of day has passed a time block on the daily planner, turn that time block gray. However, any time blocks ahead of the current time, those time blocks will remain green. Another cool feature of the application is that when the user writes something in the input field and saves it, the input will be stored in the local storage and will not be deleted when the page is refreshed. The application is set to display the current day and date of the year at the very top of the application.

Code Snippet

This code snippet is included to show the relationship between the moment and the color time blocks. The if statement sets the criteria for the time of day and what color the time blocks should be.

function colorBlocks() {
var currentHour = moment().hour();
for (var i = 0; i < timeBlocks.length; i++) {
var time = $(timeBlocks[i]).attr("time")
if (currentHour > time) {
$(timeBlocks[i]).addClass("past");
} else if (currentHour === time) {
$(timeBlocks[i]).addClass("present");
} else if (currentHour < time) {
$(timeBlocks[i]).addClass("future");
}
}
};

Repository Link

https://github.com/javimarashall/Daily-Planner

Deploy LInk

https://javimarashall.github.io/Daily-Planner/

Personal Links

Github
Linkedin