Alarm Clock App
Saturday, February 16 2019
Lately, I have been trying to be more proactive with my blog. I want to try to create blog posts for the little side projects I’ve been working on to explain how I went about creating it. What better way to retain the things I’ve been learning than to make a post explaining those things? So, this will the first of (hopefully) many posts doing just this.
I soon noticed that things like months and days were actually numbered so I created two arrays so that when called instead of having it return “2” it would say February.
Next were a few logical things. The Date Object returns everything in a 24-hour clock. Since most people generally use a 12-hour clock I decided to change it up. Using if statements, I check if the hour is over 12, if it is, I subtract 12 and set AM to PM. I ran into an issue though where 12 PM would read as 12AM so I had to create a separate statement to fix this.
Then I wanted every number under 10 to have a 0 before to make it look a little more uniform so I made some statements to fix that. With all the logic set it was time create the html to append onto the page. I wanted to refresh every second so I used a setInterval function to do this.
Next was to create the alarm. I decided to make a
select element. I created a loop to make every hour and minute and add zeros to the beginning of them to make them readable with the actual Date Object.
To set the alarm I needed to create a new date object and compare it to the time the user set. I had to turn the user input into a string and use some logic so it could be compared with the date easily. Using a setInterval function it will constantly check if the users time is the same is the current time. Once it is it’ll “ring” and end the clear the interval.
In order to have an actual alarm I found a 5 second mp3 file of an alarm clock. Using an
audio tag that holds the file and then simply using the play function when the time matches the user input.
To make the clock a little less boring to look at, I used a random image from the Unsplash API.
There it is. A fully functional alarm clock.
This last week I've been teaching myself some node.js and SQL. For my next blog, I'm going to work on putting together an app that you can add, edit and delete data from a localy served database.