Skip to content

JonSno29/Daily_Planner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Work Day Scheduler Starter Code

OVERVIEW

For this challenge, I was given a starter code and was tasked with creating a Daily_Schedule

that consisted of three rows that included the times, tasks, and a save button, I researched and chose to

add a "Delete" button and to use Day.js. A CSS style sheet was already created for me, I customized and

corrected the style classes into their designated elements. The functionality was comprised of being able to

type in an event in the center column and then hit the save button, which would save the task to local storage,

when the page is refreshed, the task would still remain on the page. Additionally,

for the tasks, the background color of all past time is light blue, the background of the current time is aqua green,

and the backgrounds of all future times are royal blue. This webpage also

displays the current date at the top of the page under the title of the page using Day.js.

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

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

LIVE LINK:

Repository: https://github.com/JonSno29/Daily_Planner.git

WebPage: https://jonsno29.github.io/Daily_Planner/

INSTALLATION, USAGE & MOCK-UP:

🎗 JavaScript

🎗 jQuery

🎗 Terminal

🎗 Replaced Moment.js with Day.js

🎗 GitHub

🎗 GitHub Pages

🎗 Visual Studio (VS) Code

🎗 HTML

🎗 CSS

🎗 Screencastify for mock-up GIF

CREDITS:

Thank you for the starter code: https://github.com/coding-boot-camp/super-disco.git

My fellow bootcamp study group at the U Of M, it's always fun collaborating with eachother.

https://momentjs.com/docs/#/-project-status/

LICENSE:

MIT LICENSE

FEATURES:

🎗 Day.js for local time.

🎗 Uses a GIF to show features.

🎗 Powered by jQuery.

🎗 Visually appealing.

🎗 Includes local time.

🎗 These features enhance user experience.

HOW TO CONTRIBUTE:

Fork my repositories so I can fork yours:

Use the "scout rule" to help others.

TESTS:

🎗 I created extra files in VScode to double check my work.

🎗 Trial and error.

🎗 Research.

CONTACT:

Snoverjon@gmail.com