Stretch Assignment - Digital Timer
- Interacting with the DOM
- Choose selectors for a given problem
- Work with the object the different selectors return
- You'll be working in the
- Add your script tag into you index.html
- You can open your
index.htmlfile in your browser to see your work, but you may also work in codepen.io first if you'd like
- All your work will be done in
- Make sure to read both the
styles.cssfiles so that you know what you're working with
- Organization of your code in
index.jswill be up to you. There will be suggestions provided later in the day
You will be making a timer that:
- Counts up to 10 seconds
- Increments every 10 ms
- Has digits change to red when it gets to 10 seconds
- Should not count past 10 seconds
You will also need to look up and use
window.setInterval. For this method, and any of those listed in the "Topics" section of this README, you are encouraged to use MDN as your resource for Documentation. MDN can be challenging to consume at first, so you may also use something like W3schools if the MDN documentation on a given subject is a bit too complicated.
Stretch On The Stretch!
If you compelete the timer with time to spare:
- Self study and research DOM
- SG1: Implement a start button. The digital timer should not start until the button is pressed.
- SG2: Once you have a start button working, configure it so that when a user presses the start button it is disabled and not enabled until the timer finishes.
- SG3: Once you have finished SG2, add new new button called
resetthat resets the timer to 0:00:00 and then pressing the start button again will start the timer from 0.
- SG4: Finally, if you have completed all the stretch goals, spend some time styling your timer and buttons.