Experiment: Material Design Stopwatch, Alarm and Timer
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.
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.