Experiment: Material Design Stopwatch, Alarm and Timer

By Danny Markov

material-design-stopwatch-timer-and-alarm

We have something special for all of our readers today. We made a small JavaScript application that conforms to Google’s Material Design Guidelines. It consists of three parts – an alarm clock, a stopwatch and a timer. The application is responsive and has a bunch of subtle animations that react to user input.

Material Design Alarm Clock

What it does

You can switch (and swipe on touch devices) between three modes of operation:

  • Alarm clock – Set an alarm to go off at a specific time. This mode has an option to play alarm sounds with HTML5 audio.
  • Stopwatch – Shows elapsed time from the moment you’ve hit start. You can start, pause and reset the stopwatch.
  • Timer – Set a duration in minutes, and this mode will let you know with an alarm when the time is up.

Everything is persisted to local storage, so even if you reload the page by mistake, the app will continue working.

Note: The alarm sounds won’t work on mobile devices. That’s because, in the mobile versions of Chrome and Safari, audio can be played only in response to user action (e.g. when you tap on a button). Because we play audio after a delay, mobile browsers ignore the audio playback.

Code and Design

We use the modern Materialize framework, together with jQuery, jQuery Timepicker and Hammer.js for touch events. Materialize turns the plain looking standard HTML input fields into these awesome Android-like switches and check boxes. It also adds the the on-click wave ink effect as it has Waves.js included in it’s package.

timer1

Animations are an important part of Material Design

As for the code, we have 4 main files, which you can see in assets/js:

  • alarm.js, stopwatch.js and timer.js handle the functionality of the three clock modes. They are not dependent on each other, meaning that if you need only one of them you can use just that one without any problems.
  • script.js is for general front-end. It controls changing between the clock modes and some other minor stuff.

Hope you like it!

Go ahead and grab the zip file with the demo from the download button near the top of the article. Feel free to modify and build upon our code, and we would love it if you share the results in the comment section!

Source:: Tutorialzine.com