Day-Planner

05 Third-Party APIs: Work Day Scheduler

Motivation

This task allowed me to become much more comfortable with jQuery, JavaScript, and local storage. I wanted to approach this task with clear goals in mind that would allow me to focus on functionality and work to have purposeful and concise code.

The Task

I was tasked with creating a simple calendar application that allows users to save events in a day planner for each hour of the day. I was given HTML and CSS starter code to modify and update dynamically through the power of jQuery.

I was also introduced to the Moment.js library to have the current date displayed at the top of the page and the time to color-code the planner according to past, present, and future time blocks.

User Story

I was given the following '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

This is the 'Acceptance Criteria' that was provided:

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 time blocks for standard business hours
WHEN I view the time blocks for that day
THEN each time block is color-coded to indicate whether it is in the past, present, or future
WHEN I click into a time block
THEN I can enter an event
WHEN I click the save button for that time block
THEN the text for that event is saved in local storage
WHEN I refresh the page
THEN the saved events persist

Mock-Up

The following animation demonstrates my applications funcionality:

Deployment

GitHub repositories URL: https://github.com/rayna-v/Day-Planner

Live URL: https://rayna-v.github.io/Day-Planner/

---

Grading Requirements

This homework is graded based on the following criteria:

Technical Acceptance Criteria: 40%

• Satisfies all of the above acceptance criteria plus the following:

  • Uses the Moment.js library to work with date and time

Deployment: 32%

• Application deployed at live URL

• Application loads with no errors

• Application GitHub URL submitted

• GitHub repo contains application code

Application Quality: 15%

• Application user experience is intuitive and easy to navigate

• Application user interface style is clean and polished

• Application resembles the mock-up functionality provided in the homework instructions

Repository Quality: 13%

• Repository has a unique name

• Repository follows best practices for file structure and naming conventions

• Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.

• Repository contains multiple descriptive commit messages

• Repository contains quality README file with description, screenshot, and link to deployed application

Review

You are required to submit BOTH of the following for review:

• The URL of the functional, deployed application.

• The URL of the GitHub repository. Give the repository a unique name and include a README describing the project.

---

© 2020 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.