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 build this one yourself! We’ll also get a bit more ambitious on your behalf in this exercise, so, compared to chapter 11, there will be less so, and guidance from us and more development work to figure out on your own. But don’t worry, you have our full trust and confidence—we know you can do it!

We’ll 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’ve 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. See figure 12.1 for the high-level overview of this project.

Figure 12.1 When you’re completing the timer project, you’ll go through these five steps to end up with a fairly advanced timer.
12-01

12.1 Scaffolding for the timer

 
 

12.1.1 HTML output

 
 
 

12.1.2 Component hierarchy

 
 
 

12.1.3 Project structure

 

12.1.4 Source code

 

12.1.5 Running the application

 
 
 

12.2 Adding a simple play/pause timer

 

12.2.1 The goal of this exercise

 
 
 

12.2.2 Component hierarchy

 
 
 

12.2.3 Updated project structure

 
 

12.2.4 Source code

 
 

12.2.5 Running the application

 
 
 

12.3 Homework: Initializing the timer to a custom time

 

12.4 Homework: Resetting timers

 
 
 

12.5 Homework: Multiple timers

 
 
sitemap

Unable to load book!

The book could not be loaded.

(try again in a couple of minutes)

manning.com homepage
test yourself with a liveTest