Skip to content

shisinbin/workday-scheduler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Workday Scheduler

HTML5 CSS3 JavaScript jQuery moment.js badge

Description

A simple calendar application that allows a user to save events for each hour of the current working day.

This app was built to further my understanding of how to:

  • use the jQuery library to envelope DOM elements, giving access to their methods which can make traversal, manipulation and event handling easier
  • create time-based operations using Moment.js

Usage

The application is accessible by navigating to the link below.

https://hilarious-torte-daaee3.netlify.app/

The user is presented with a schedule that displays a block of time representing one hour for each row. Time blocks begin from 9am up to (and including) 5pm, that is, it shows the current "working day".

screenshot of console output

Each time block is coloured according to whether it includes the current time (red), a previous time (grey) or a future time (green).

Users can store an event by entering text into the time block's text area and then clicking the save button on the right.

screenshot of console output

There are checks to ensure the user has entered an event or not tried saving the same event in that hour again. If valid, the event is saved to the browser's local storage and an appropriate feedback message is shown. So, if the user refreshes the page or closes the app and comes back later that day, the events that were entered will persist in the schedule.

screenshot of console output

Users can clear the schedule by clicking the 'Clear Schedule' button on the bottom right of the page.

screenshot of console output

Warning: the quiz includes short feedback sounds for when an event is saved and when the schedule is cleared.

Credits

ChatGPT is pretty amazing (but also scarily depressing?). Using it helped to quickly answer questions on how to do some of the basic specific things and thus saved some time with scrolling through and searching the jQuery docs or Stack Overflow posts, although the latter two were still needed.

Other credits:

The base HTML and CSS were provided by the course and not created by myself.

License

Licensed under the MIT license.

Badges

License: MIT

About

Using jQuery and Moment.js to build a scheduler app

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published