Reviewing JavaScript Concepts by Doing Projects

Hello fellow developers, bootcamp starts tomorrow and I am excited for that! However, during this bootcamp period I want to be like a machine, so I started reviewing my JavaScript knowledge by doing beginner friendly projects. If you are walking this path as well, do not make the mistake I did. Start building projects once you cover the fundementals of JavaScript. Here we go

Project of the Day: Vanilla JS Stopwatch

First of all, I put some HTML and CSS in it, but did not bother to do a good job with them to be honest. I will take care of the styling part later. Most probably before applying for jobs :)

Let me break the code down into small pieces

/* Declare variables to keep track of time, 
declare them as "let" because they will constantly change*/
let seconds = 1;
let minutes = 1;
let hours = 1;
let interval;

// Getting every single element from my HTML file
const startBtn = document.getElementById("btn-start");
const pauseBtn = document.getElementById("btn-pause");
const resetBtn = document.getElementById("btn-reset");
let secondsElement = document.getElementById("seconds");
let minutesElement = document.getElementById("minutes");
let hoursElement = document.getElementById("hours");

Here is the HTML part:

<h1>VANILLA JAVASCRIPT STOPWATCH</h1>
    <p class="time">
      <span id="hours">00</span>:<span id="minutes">00</span>:
<span id="seconds">00</span>
    </p>
    <div class="btn-container">
      <button id="btn-start">Start</button>
      <button id="btn-pause">Pause</button>
      <button id="btn-reset">Reset</button>
    </div>

Once I got control over the DOM elements, I start manupulating (playing) them :D

Firstly declare a function that increments (adds one) every single second to our seconds variable. setInterval() method will do this for us.

Let me explain what the heck is setInterval() first. It takes two parameters the first one is a function and second one is in how many milliseconds the function gets executed.

For instance, if I were to say console.log(setInterval("Hello World", 1000)). "Hello World" would log to the console every second (every 1000 millisecond).

So, I added an event listener to our startBtn variable, (remember const startBtn = document.getElementById("btn-start")) to listen for "click" events and when the user clicks startBtn element on DOM the function below runs.

startBtn.addEventListener("click", () => {
  interval = setInterval(startTimer, 1000);
  secondsElement.innerHTML = seconds;
});

A quick reminder of .addEventListener() method. It takes two parameters; first, type of event (click OR keypress OR keydown and etc.). Second, a function, what happens when event is triggered.

As you can see, our event is a simple "click". And we have got a two-line function. First line assigns interval variable (we declared on top of the code) to setInterval method. Which calls startTimer function every second. Second line assigns secondsElements variable innerHTML to our seconds variable. Let me show you a small part of our startTimer function.

function startTimer() {
  seconds++;
}

As you can see, it increments "seconds" variable. setInterval(startTimer, 1000) and setInterval() calls this function every second. Let me show you our startTimer() function as a whole.

function startTimer() {
  seconds++;

  /* { 00 : 00 : 00 } timer looks like this, 
so before it hits 9, we still need 0, like 01, 02, 03, 04... 09
 and then we need 10, 11, 12... 59 once it hits 60
 we want seconds to be 00 again and add one to minutes */
  if (seconds <= 9) {
    secondsElement.innerHTML = "0" + seconds; /*assign the value 
of seconds variable to innerHTML */
  }

  if (seconds > 9) {
    secondsElement.innerHTML = seconds;
  }

  if (seconds > 59) {
    seconds = 0;
    secondsElement.innerHTML = "00";
    minutesElement.innerHTML = minutes++; 
    secondsElement.innerHTML = seconds++;

    if (minutes <= 9) {
      minutesElement.innerHTML = "0" + minutes;
    }

    if (minutes > 9) {
      minutesElement.innerHTML = minutes;
    }

    if (minutes > 59) {
      minutes = 0;
      minutesElement.innerHTML = "00";
      hoursElement.innerHTML = hours++;
      minutesElement.innerHTML = minutes++;
    }
  }
}

I know it looks big, but it is very simple... for me. Imagine this is our timer { 00:00:00 } how does it go? Hours : Minutes : Seconds. So, that means once seconds variable is equal to 60 (remember we increment it) we need to get it to zero and increment our minutes variable. That is why I have got a huge if block here.

Here is a function for pause button to stop the stopwatch

function pauseTimer() {
  clearInterval(interval); // to stop setInterval, we need clearInterval
// I used interval variable to make stopping part easier if you remember
// we used setInterval in our interval variable, so we stop it now 
}

Finally, reset button

resetBtn.addEventListener("click", () => {
  clearInterval(interval);
  seconds = 0;
  minutes = 0;
  hours = 0;

  secondsElement.innerHTML = "00";
  minutesElement.innerHTML = "00";
  hoursElement.innerHTML = "00";
});

Getting everything back to zero.
That is it for today, take care and keep coding https://meliksahakdeniz.com/reviewing-javascript-concepts-by-doing-projects