Vue Clock

The Vue clock was a project done in class at Awesome Inc's coding bootcamp. The teacher requested that we set an alarm and create a countdown clock.

Setting an alarm was relatively easy. I first binded my hour, minutes and seconds inputes to corresponding data variables in Vue.js. Then I combined that data to create a set time. I then created a function that converted that the inputted set time into milliseconds. The function also converted the current time into milliseconds and subtracted the difference between the set time from the current time. The difference between the set time and the current time was then set to a variable called timerremainder. The variable was then used in an if statement. The if statement went as follows:if the set time is greater than the current time in milliseconds,then set a time out function that will go off when the timeremainder in milliseconds has lapsed, else have the app say that the time has passed.

As for the countdown clock, that took more time to figure out. I was unsure where to start with the countdown timer so I researched online to see if there were any answers in how to create a countdown clock. I found a solution in W3schools on how to create a countdown clock but it was in vanilla javascript. I was able to convert most of the vanilla javascript into vue.js syntax but I was having trouble calling my countdown function in the setinterval method. I kept getting an error saying my countdown function wasn't a function. I looked all over stackoverflow and I found a similiar issue. It turns out that I needed to use a callback function to make my code work. Now the app was capable of both setting an alarm and showing a countdown timer.

Conclusion

This project was great for practicing code logic. This project was also good for reviewing javascript time methods. This project will be a useful resource to me on future projects that will deal with the use of time.