Build an online alarm clock using Moment.js! Here are some goals for this project:
- Continue to get used to using Gulp in your projects. Start this project by following along with all the Gulp lessons from this weekend and yesterday to build a full asset pipeline with a development server. You should be moving towards a template project structure that you can continue to use throughout the week including package.json file, a complete gulpfile.js with all tasks, and a basic folder structure.
- Use this project to build up to working with APIs. Work on figuring out 3rd party documentation by using Moment.js - API documentation can be very daunting, so this should be a good place to start practicing your research skills. Review your jQuery for allowing your users to interact with your alarm clock in the browser.
- Continue to practice Object Oriented JavaScript concepts.
Follow along with the Bower lesson to install jQuery, Bootstrap, and Moment.js. Here are some goals to get you started:
- As a user of your alarm clock, I would like to be able to view the current time.
- I would also like to be able to enter a time into a form to set an alarm.
- The alarm should turn on at the specified alarm time.
- As a user, when the alarm turns on I want it to either show me something on the screen (like a picture/animation) or make a sound, or both.
Bonus goals are below! These are optional - come back to them if you have extra time after working on the weather app.
- As a user I would like to be able to hit a snooze button, which makes the alarm turn off and then be activated again five minutes later.
- I'd like the ability to change the amount of snooze time if I would actually prefer another ten minutes of sleep, instead of five.
- As a user I would like to be able to set multiple alarms because mornings are hard.
The full lesson can be found here, learnhowtoprogram.com/javascript/modern-js-apps/alarm-clock-weather-app.
- Clone this repository:
- In the command-line run:
$ npm install
- In the command-line run:
$ bower install
- In the command-line run:
$ gulp build
- In the command-line run (to open the Index.html file in a development server.):
$ gulp serve
- Currently no known bugs
If you run into any issues or have questions, ideas, or concerns, please feel free to contact Maldon or Marty on GitHub.
- HTML
- JavaScript
- jQuery
- Command-line Terminal
MIT License
Copyright (c) 2016 Epicodus