Stopwatch

by Boris Kachanov

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Stopwatch</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../src/styles.css">
    </head>
    <body>
        <div id="stopwatch" class="stopwatch">

            <div id="information" class="information">
              <div id="clock_face" class="clock_face">
            <img src="https://s10.postimg.org/pskzaofm1/clockface.png">
        <div id="seconds-arrow" class="seconds-arrow">
          <img src="https://s10.postimg.org/szfiubn7d/seconds-arrow.png">
        </div>
        <div id="minutes-arrow" class="minutes-arrow">
          <img src="https://s10.postimg.org/o0s0fsbop/minutes-arrow.png">
        </div>
      </div>
            </div>

            <div id="display" class="display">
                <div id="time" class="time">
                    <div id="minutes" class="minutes">
                        0
                    </div>
                    <div id="separator">:</div>
                    <div id="seconds" class="seconds">
                        00
                    </div>
                </div>
            </div>

            <div id="navigation" class="navigation">
                <button id="start-pause-button" class="start-pause-button">
                    Start
                </button>
                <button id="stop-button" class="stop-button">
                    Stop
                </button>
                <button id="lap-button" class="lap-button">
                    ⟳ Lap
                </button>
            </div>

            <div id="laps" class="laps"></div>
        </div>

        <script src="bundle.js"></script>
    </body>
</html>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.stopwatch{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;

    width: 100vw;
    height: 100vh;
    background-color: #1a080b;
}

.time{
    display: flex;
    flex-direction: row;
    justify-content: center;

    width: 450px;
    height: 50px;
    background-color: #6c2125;
    font-size: 24pt;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    margin-top: 20px;
    color: #ff0d2f;
}

.navigation{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

.display{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

.start-pause-button{
    display: flex;
    flex-direction: row;
    justify-content: center;

    width: 150px;
    height: 50px;
    background-color: greenyellow;
    text-align: center;
    font-size: 24pt;
    border: 2px solid black;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.start-pause-button.isStart{
    background-color: #fff100;
}

.stop-button{
    width: 150px;
    height: 50px;
    background-color: red;
    text-align: center;
    font-size: 24pt;
    border: 2px solid black;
    cursor: pointer;
    user-select: none;
    margin-top: 5px;
    border-radius: 10px;
}

.lap-button{
    width: 150px;
    height: 50px;
    background-color: #6061ff;
    text-align: center;
    font-size: 24pt;
    border: 2px solid black;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.information{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.clock_face{
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1;
    background: url("../images/clockface.png") no-repeat;
    width: 300px;
   ...

JavaScript

let timerID;
let startTime, currentTime, timer;
let pauseTime = 0;


class Stopwatch{

    constructor(minutes, seconds){
        this.seconds = seconds;
        this.minutes = minutes;
        this.laps = [];
    }


    getTime() {
        seconds.innerHTML = this.seconds;
        minutes.innerHTML = this.minutes;

        if(this.seconds < 10){
            seconds.innerHTML = "0" + this.seconds;
        }
    }


    start(){
        startTime = Date.now();
        const go = () => {
            currentTime = Date.now();
            timer = new Date(currentTime + pauseTime - startTime);
            this.seconds = timer.getSeconds();
            this.minutes = timer.getMinutes();
            this.getTime();

            this.rotateSecondsArrow();
            this.rotateMinutesArrow();
        };

        timerID = setInterval(go, 1000);
        go();
    };


    stop(){
        this.seconds = 0;
        this.minutes = 0;
        pauseTime = 0;
        this.getTime();

        this.rotateSecondsArrow();
        this.rotateMinutesArrow();
    }


    pause(){
        clearInterval(timerID);
        pauseTime = +timer;
    }


    rotateSecondsArrow(){
        secondsArrow.style.transform = "rotate(" + this.seconds * 6 + "deg)";
    }

    rotateMinutesArrow(){
        minutesArrow.style.transform = "rotate(" + this.minutes * 6 + "deg)";
    }

    pushLaps(){
        if(this.seconds !== 0 || this.minutes !== 0) {
            if(this.seconds < 10){
                this.laps.push(this.minutes + ":0" + this.seconds);
            }else{
                this.laps.push(this.minutes + ":" + this.seconds);
            }

            let newLap = document.createElement("div");
            if (this.laps.length > 5) {
                lapsCart.lastElementChild.innerHTML = this.laps[this.laps.length - 1];
            } else {
                newLap.innerHTML = "" + this.laps[this.laps.length - 1] + "";
                newLap.style.textAlign = "center";
               ...