A work day scheduler, or daily planner, build by modifying some starter code and uses Third-Party APIs.
View the application here.
- Create a simple calendar application that allows a user to save events for each hour of the day.
- This app with run in the browser and feature dnamically updated HTML and CSS powered by jQuery.
- Will utilize a library like Moment.js to work with dates and times.
- Application loads with no errors.
- Application user experience is intuitive and easy to navigate.
- Application user interface style is clean and polished.
- Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
Our instructions for this assignment were based on the following user story and acceptance criteria:
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
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
Third Party APIs: Third party APIs are located on third party servers. Third party APIs are APIs provided by third parties — generally companies such as Facebook, Twitter, or Google — to allow you to access their functionality via JavaScript and use it on your site. To access them from JavaScript you first need to connect to the API functionality and make it available on your page. This typically involves first linking to a JavaScript library available on the server via a <script> element,
standard business hours: In the U.S., a business whose employees work Monday through Friday 9am to 5pm; this results in an 8 hour workday and a typical work-week of 40 hours.
local storage: A JavaScript read-only property that allows you to access a storage object for the document's origin; the data stored is saved across browser sessions. Data stored in localStorage has no expiration time (data is not cleared when the page session ends, or closes). Data stored in localStorage is specific to the protocol of the page.
For my workday daily scheduler I focused on a detailed html format, but later realized that would only complicate my JavaScript code. This assignment marked a mini milestone for myself because I managed to create both the root variable and the main 'for' loop on my own! Small accomplishment but made me feel like JavaScript is starting to click. Also, huge thank you to Nathan Sartain (TA) for his time and patience.
The following image shows the web application's appearance and functionality:
- Clone repo and install packages. Edit scripts within package.json file. npm start to run in integrated terminal, run in browser with localhost:3000.
Dana Smooke
© 2020 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.