PWA in 3 easy steps: The conscious timer 2 of 3 (add functionality using JS)

Hi! Let’s create today a Progressive Web Application in 3 easy steps. If this is your first time here and you want to learn Frontend and JavaScript, start right now by subscribing, and don’t forget to turn on the subtitles. [Music playing] In this series, we will create an app titled “The conscious timer.” A simple and straightforward approach to stay focused. Hit the button to start the timer. The bell rings every 5 minutes remembering to keep your focus.

00:32 - Let’s create today the main JavaScript functionality. To make the ring bells, I need to load a “wave” file and run it using the HTML5 Audio component. To make it stop, I need to pause the sound and reset the timer because the HTML5 Audio container doesn’t have a “stop” function. To make the ring bells every 5 minutes, I’m going to use “setInterval” methods. I don’t need to re-create an audio container to fire a “play” function every 5 minutes, because it’s a persistent object.

01:03 - But I need to store a reference to an “interval” to remove it when a user wants to stop this action. Take into account that the JavaScript timer is not precise and doesn’t guarantee to run every five minutes. It just guarantees to fire not earlier than you set. When the tab with the app is not active, the browser will trigger our actions on idle time. That means that the bell will ring in some random time, but not earlier than every 5 minutes. Let’s dive into the code.

01:37 - [Music playing] Let’s add JavaScript functionality to toggle our button. For that I’m going to add IDs for all active elements and the link to our JavaScript file. Let’s start with ID for a button, it should be “id button”. Another one for a bell color. And one more for overlay. And the link to JavaScript file here “script”, “source”, “script.js” Let’s add this file to our folder - “script. js” For a bell sound I am going to use a wave file by freesound, so let’s add this file to our directory. Now let’s load this file using html5 audio. It should be audio and our “bell.wav” here. And let’s create a reference to all our active elements, so our elements should be an area of the following ids: button image and button overlay. Now map over them to create references. Should be like this: “el” return like document querySelector “el”. Set a flag to an audio container whether we’re playing a sound or not yet. By default it should be “false”.

03:07 - And create a variable to store a reference to our timer. Now let’s add an event listener to our button. It should be “ID button” here and event listener. By click do the following: function here and for each stored elements let’s toggle its visibility. Element’s classList toggle “u-invisible”. And regarding sound. If it’s playing then, stop playing and rest the timer. Like this. And clear our interval, time out ID here. Else play the sound. Audio play here and now set our timeout. Set interval.

04:07 - Audio play each five minutes, 5 minutes, 60 seconds, 1000 microseconds and toggle isPlaying flag. And I have one issue here, it should be “dot”. And now let’s test. Good. I like it. That’s it. So easy. My code is available on GitHub. Documentation is available on the Internet. Follow the links if you’re eager to get more. [Music playing] If you like this video, give it “thumbs up,” share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and dive deeper. .