
Lab 42 was about creating a timer on a webpage. After setting up the HTML, I created a div for the controls and a div for the time display. Within the control's div, I created several buttons with a data-time attribute set to the amount of seconds the button would set the timer for. I also created an <input> set to text so the user could also type a custom amount of minutes. In the JS, I stored all the buttons in a variable and created a function to look at the data-time attribute of the button and set a countdown function based on the amount of seconds. Using various Math.round() functions, I got the amount of time to display in the time display div by converting seconds to minutes and using DOM to display it in the div.
These skills are useful for a web designer because they come in handy for certain applications involving time. If a site is hosting a timed exam, these skills can be used to display to the user how much time they have left to finish the exam. Another situation could be if a user is allowed to be logged onto their account for only a certain amount of time before being auto-logged off for security reasons. A timer could be displayed to the user showing how much time they have left on their account before having to renew the session.
Comments
Post a Comment