/lab-javascript-chronometer

Primary LanguageJavaScript

logo_ironhack_blue 7

LAB | JS IronChronometer

Introduction

In this lab, we are going to create a chronometer. Chronometers are very common in many 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 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 is running.
  3. As a bonus, we are going to add a split functionality. If you are questioning the usefulness of this functionality, well, it could be helpful to remember how much time we spent in each iteration of the exercise. 😉 As we finish an iteration, we will be able to press the split button, so we will know how hard or easy it was, depending on how much time it took us to finish it.

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 "done"
$ git push origin master
  • Create Pull Request so your TAs can check up your work.

Tests, tests, tests!

As you know by now, most of our labs are supported by tests. In the tests/chronometer.spec.js file, you can find the tests you need to pass to finish this exercise successfully. You know the process, go ahead and open the SpecRunner.html file to see all the tests, and start writing your code on the javascript/chronometer.js file.

Instructions

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

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

The style sheet already has the ds-digib 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. If you open the index.html file, you will see something like this:

This lab is primarily split into two main parts:

  • part 1: logic (the code you will add in the javascript/chronometer.js) and
  • part 2: DOM manipulation so we can visually represent and showcase the previously written logic (the code you will add in the javascript/index.js).

It is mandatory for you to use the following:

  • setInterval() method to update the chronometer on each second,
  • a class to create a JavaScript object that encapsulates all the Chronometer functionalities.

Iteration 1: The logic

As previously stated, the logic will be added to the javascript/chronometer.js.

The Chronometer class

Let's create a Chronometer class and apply the following:

  • the constructor method won't receive any arguments,
  • the class will have two properties: currentTime, intervalId.

To see more details about failing tests, open the tests/ChronometerSpec.js.

Let's proceed to create the Chronometer methods.

startClick()

We need to create a startClick(callback) method for the Chronometer object. At a later point, this method will receive a callback function to print the time. That is why we added a callback in the starter code between the parentheses.

The startClick() method should use the setInterval() JS method to increment by 1 the currentTime property every 1 second. The callback will also be triggered inside the scope of this method.

💡 Hint 1: Keep in mind - inside setInterval() the keyword this will not refer to the object chronometer but the global context. To enable access to this that points to chronometer, use arrow function syntax inside the setInterval().

💡 Hint 2: In case you get an error while invoking the callback, try to wrap it in the if statement.

The setInterval() will be assigned to our intervalId property, so this way, we will be able to clear it later on when we need to restart the timer.

getMinutes()

Our current time is our clock, but it only runs seconds. We need to create a method that will return the number of minutes that corresponds to the value of the seconds we have on the currentTime.

getSeconds()

As we did with the minutes, we need a method that returns the seconds that we have on the currentTime property after calculating the round number that represents the minutes.

twoDigitsNumber()

Our chronometer has a super cool screen that needs two digits number to display minutes and seconds, but sometimes getMinutes() and getSeconds() returns a single-digit number. Let's create a super simple algorithm that will turn into two-digits number any received value. Example: if the value of the currentTime property is 36 seconds, it should return 00 for minutes and 36 for seconds; if the currentTime is 5 min and 43 sec, it should give us back 05 for minutes and 43 for seconds. At the same time, if the currentTime is 17 min and 13 sec, it should give us back 17 for minutes and 13 for seconds.

stopClick()

When invoked, the stopClick() method should clear the intervalId. Simple as that.

💡 Hint: Use clearInterval.

resetClick()

The resetClick() will reset our chronometer. Since our code is super clean, we just need to set our currentTime property back to 0, and that's it!

splitClick()

The splitClick() method needs to capture the moment when the split button gets hit later on. Imagine this being a time frame in which a runner runs certain distances. The splitClick() will receive any two numbers and needs to output them in a valid format. For more information, check the corresponding test.

Iteration 2: DOM Manipulation

At this point, you should start writing your code in the javascript/index.js file.

Our chronometer logic is done, and it works perfectly! Now we need to set the visual components.

In this iteration, your goal is to create a new chronometer and use its methods (which we previously defined in chronometer.js) while interacting with the DOM. Example: when clicked, the start button invokes startClick() method.

As you can see, we have two different buttons: start and clear. These are the button values when the chronometer is not running. When the chronometer is running, the start button will change its behavior to stop the chronometer. In contrast, the reset button will change to split.

Both buttons will have different behavior depending on the chronometer. These buttons are btnLeft and btnRight in our HTML. We can see the different values they will have in the following table:

Chronometer Status Button ID Text CSS Class
Stopped btnLeft START btn start
Stopped btnRight RESET btn reset
Running btnLeft STOP btn stop
Running btnRight SPLIT btn split

Note that you don't have to create any CSS class. All of them are already defined in the provided style sheet.

In the javascript/index.js file, you will find two click events that are already linked with both btnLeft and btnRight buttons. You have to create the necessary code to change the status of buttons.

💡 Hint: To change the status of the buttons, we have to toggle their classes.

It means that when we click in the btnLeft, if it has the start class, you will have to change the btnLeft and btnRight buttons, setting them up with the Running status described in the table above.

On the other hand, if the btnLeft doesn't have the start class when we click, we will have to change both btnLeft and btnRight properties setting them up with the Stopped status described in the table above.

Changing buttons texts

We will be working on the javascript/index.js file. We need to do the following:

  • When the left button is clicked while the chronometer is stopped, we need to:

    • Set the btnLeft button with the text STOP, and the class btn stop.
    • Set the btnRight button with the text SPLIT, and the class btn split.

  • When the left button is clicked while the chronometer is running we need to:

    • Set the btnLeft button with the text START, and the class btn start.
    • Set the btnRight button with the text RESET, and the class btn reset.

  • In the index.js file, create a new instance of the Chronometer object.

  • Create the necessary code in the index.js to call the Chronometer startClick method if the button has the start class, or the stopClick method if the button has the stop class applied.

Print our chronometer

Each second we need to update our screen. So go ahead and create a function that will receive the value for minutes and seconds, and print that on our HTML.

Using our Chronometer methods to get the values, this should be easy!

Iteration 3: Split time

The following feature we will implement is the split button. Remember that the split button is located in the btnRight button when the chronometer is running. In this iteration, we will have to create two different things: HTML & CSS, and the associated JavaScript.

HTML & CSS

First of all, we have to create in our index.html file an ordered list where we are going to append the current time every time we press the split button.

JavaScript

Once we have created the ordered list in our HTML, we have to create the button functionality. Every time we click on the split button, we will have to create a new <li> element and append it to the ordered list. The text of this element will be the current time of the chronometer (we have a method on our Chronometer constructor that returns this 😉).

Iteration 4: Reset

To finish up with this lesson, we are going to create the clear feature. Remember, we will execute this when the chronometer is stopped, and the user clicks on the right button. The behavior here is straightforward: we have to clear all the data on the clock.

To do that, we will have to set the minutes and seconds to zero in our clock and remove all the <li> elements that we could have in the list we created in the previous iteration.

BONUS Iteration: Milliseconds

Now, we can use our chronometer to calculate how much time we spend on each Ironhack exercise. What happens if we want to calculate our time in a race? We need to be more accurate with our chronometer. How can we be more accurate? By adding milliseconds!

If we want to add milliseconds to the chronometer, we will have to manipulate the HTML, the CSS, and the JavaScript. In the HTML, we will have to a container to show the milliseconds, changing the style of this container. Finally, in JavaScript, we will have to add all the logic to show the milliseconds in the clock. You will also have to add these milliseconds to the split counter.

Your goal is to create the JavaScript logic to:

  • be able to count the milliseconds,
  • show the milliseconds going forward,
  • show the milliseconds when you capture a split time and
  • clear the milliseconds when the Reset button is clicked.

This lab is a little bit complex, but it will guide you through the logical process of solving the problem and, at the same time, by following the guidelines, you will learn how to separate concerns between the logic and the DOM manipulation (which are the visuals).

Happy coding! ❤️