开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

LAB | JS IronChronometer

Introduction

In this lab, we are going to create a chronometer. Chronometers are very commonly used in sports - car racing, athletics, etc. Why wouldn't we practice a bit of our JS and DOM manipulation knowledge and create our own IronChronometer? And then, we can use it to see how many minutes and seconds will take us to complete any of our labs. Sounds like a plan.

Let's go!

These are our milestones:

1. Our chronometer will have an LCD screen, where we will see the minutes and seconds moving forward.
2. It will also have two different buttons that will change their behavior depending on the status of the chronometer. For example, the start button will become a stop button when the chronometer runs.
3. As a bonus, we will add a split functionality allowing us to record the time when we press the split button.

Let's do it!

To check how your final version should look like check this demo.

Requirements

• Fork this repo.
• Clone this repo.

Submission

• Upon completion, run the following commands:

$ git add .
$ git commit -m "solve iteration x, y, z"
$ git push origin master

• Create a Pull Request so that your TAs can check your work.

Instructions

To kick-off, we are provided with the following files and folders:

├── README.md
├── index.html
├── javascript
│   ├── chronometer.js
│   └── index.js
├── styles
│   ├── fonts
│   │   ├── ds-digi.ttf
│   └── style.css
└── tests
    └── chronometer.spec.js

The stylesheet already has the ds-digi font inserted. This font helps us to have a classic LCD screen to achieve the styles of the traditional chronometers.

We have also created the clock to let you focus on the JavaScript portion of this exercise. Click below to see the image you should get when you open the index.html file:

This lab is divided into two main parts:

• Part 1: the logic (which you will be adding to the javascript/chronometer.js file).
• Part 2: the DOM manipulation, so we can visually represent and showcase the previously written logic (the code you will add in the javascript/index.js).

Your solution will require the usage of the global methods setInterval and clearInterval.

setInterval can be called with a function as first argument and a number of milliseconds as the second argument. It will run said function every number of milliseconds that you passed it.

When called, setInterval returns a number that can be used to identify the interval that was initialized. That same interval can later be stopped by running clearInterval and passing it the id of the interval we want to interrupt.

Iteration 1: The logic

In the first part of the LAB, you will be working on the javascript/chronometer.js file.

The Chronometer class

Let's create our Chronometer class. The constructor method shouldn't expect any arguments. It should initialize two properties of the chronometer:

• currentTime, which should start of as the number 0.
• intervalId, which should start as null.

Let's proceed with the creation of the Chronometer methods.

Method start

The Chronometer class needs to have a start method. When called, start will start keeping track of time, by running a function in a 1 second interval, which will increment the amount of seconds stored in the property currentTime by 1.

You should rely on the setInterval method to achieve this. The interval id that is returned by calling setInterval should be assigned to our intervalId property, so this way, we will be able to clear it later on when we need to stop the timer.

Additionally, the start method should accept a function as an argument. Let's name it callback. The callback argument is optional. If start is called and a callback is passed, said callback should be executed inside of the function you have passed to setInterval. If no callback is passed, it should be disregarded (hint: you should check whether if the callback was passed before attempting to run it).