12 Project: Timer
This chapter covers
- Creating the necessary scaffolding for a timer component
- Implementing a fixed-duration timer
- Homework adding advanced features to the timer
Welcome to this next project, where we're going to build a countdown timer. It's just like the timer app on your phone, only you built this one yourself! We are also going to get a bit more ambitious on your behalf in this exercise, so compared to chapter 10, there will be less hand-holding and guidance from us and more development work to figure out on your own. But don't worry, you still have our full trust and confidence – we know you can do it!
We're going to set up the foundations for the project for you, so you don't have to mess too much with design or semantics. For that purpose, we have set up a scaffold for you in step 1, which contains the static HTML and semantics required for step 2, but also all the images, icons, and styles that you need for the whole project. Please refer to figure 12.1 for the high-level overview of this project.
Figure 12.1 When you're completing the timer project, you will go through these five steps, and end up with a pretty advanced timer.
