Experiment: Material Design Stopwatch, Alarm and Timer

Experiment: Material Design Stopwatch, Alarm and Timer

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

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.


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!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.



  1. Romeo says:

    Nice tutorial Danny, as expected from you. I liked that you showed us how to use a plugin that you listed before (in those Favorite jQuery Plugins). You could have added that Material Design Preloader too. I'm really missing those days when Tutorialzine used to have bigger tutorials with everything right here, instead of asking us to download the zip which contains commented code.

  2. LauLau says:

    Hello, may i know how to disable the time picker for some range(for exp: after 8pm-8am), disable to select

    1. Danny Markov says:

      We've created the time picker using this jQuery plugin - jquery.timepicker.

      As you can see in their documentation, there is a 'disableTimeRanges' option, which you can set on initializiing.

  3. Alex Dimitrov says:

    It looks awesome, but i tried resizing the browser and ... well its not that cool about that ;/ What i would be extremly happy to see is dealing with the issues about that.

  4. Stella Bryan says:

    Hey! Thanks for sharing this tutorial it works relay well in designing apps.

  5. Jack Coe says:

    Those animations when hitting start, stop etc. are Android Lollipop inspired.

  6. samuel says:

    if i have to play alarm sound in loop till person dismiss it manually how to do it ....

  7. Michael says:

    nice gear, clean and crisp, love it

  8. Danny says:

    I love it and use it on my website

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links