[MUSIC]

Now we're going to build a stopwatch into our scoreboard app.

It will be a stateful component that counts seconds, and

allows users to start, stop, and reset the time.

Which could be useful in games for limiting a player's turn length.

We'll create a button to stop and start the timer.

If the time is stopped and

started again, it will continue counting from where it left off.

And hitting the reset button will return the timer to 0.

We'll start by building the stopwatch component and

its elements, then we'll use State to make the stopwatch timer run, and

write functions to let users start, stop, and reset the stopwatch.

Let's get coding.

Start by creating a new file in the Components folder named Stopwatch.js.

As we usually do first,

let's import React at the top of the file with import React from 'react'.

Our stopwatch will require three pieces of state.

A running state, an elapsed time state, and

a previous time state to let us calculate how much time has passed.

So we have to determine if this should be application state or components state.

A case could be made for either, but in our app we have no need for

the stopwatch state outside of the stopwatch component.

It's more of a utility than a core piece of the application.

So in that case, we'll consider the state to be component state,

which means our stopwatch will be a stateful component.

So let's also import Component from 'react' and

define our class with class Stopwatch extends Component.

Inside the class, we'll add the render method, and

inside that the return keyword, followed by a set of parentheses.

And as always, let's export the Component with export default, Stopwatch.

Inside the return statement, we'll build

the Stopwatch using a div with the class name Stopwatch,

then add a Stopwatch heading inside the div with an h2.

Next we'll display our stopwatch time in

a span with the class stopwatch-time, and

at a placeholder value for now, let's say zero.

Finally, let's create the stopwatch buttons.

I'll write a set of opening and closing button tags and

inside them the text Start.

Right below I'll create a reset button with a set of

button tags and the text Reset.

In our stopwatch when the timer is running,

the start button will be replaced by a stop button.

We're going to build that feature in the next video.

All right, now that the structure of the stopwatch is complete.

Let's head over to the file Header.js and import the Stopwatch

component at the top of the file with import stopwatch from ./Stopwatch.

And will display the stopwatch inside the header just

below the title using the Stopwatch.jsx tag.

All right, we've built the stopwatch UI.

So in the next video, we will begin implementing the stop watch logic.

Now our stop watch component presents a unique challenge.

When the stopwatch is running, it will need to count seconds and

update the time display each second.

The only data that changes in React is state, so

the state of the stopwatch will need to be updating constantly and

will need to keep track of multiple pieces of state.