PRODIGY_WD_02/script.js at main · harshvardhandpu/PRODIGY_WD_02 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
const playButton = document.getElementsByClassName("play")[0]
const lapButton = document.getElementsByClassName("lap")[0]
const resetButton = document.getElementsByClassName("reset")[0]
const minuteEl = document.getElementsByClassName("minute")[0]
const secondEl = document.getElementsByClassName("sec")[0]
const centiEl = document.getElementsByClassName("msec")[0]
const lapsList = document.getElementsByClassName("laps")[0]
const clearAllBtn = document.getElementsByClassName("lap-clear-button")[0]

let intervalId = null
let centiCounter = 0
let secCounter = 0
let minCounter = 0
let lapCount = 0

const showControls = (show) => {
    if (!lapButton || !resetButton || !clearAllBtn) return
    if (show) {
        lapButton.classList.remove("hidden")
        resetButton.classList.remove("hidden")
        clearAllBtn.classList.remove("hidden")
    } else {
        lapButton.classList.add("hidden")
        resetButton.classList.add("hidden")
        clearAllBtn.classList.add("hidden")
    }
}

const updateDisplay = () => {
    minuteEl.textContent = String(minCounter)
    secondEl.textContent = secCounter < 10 ? "0" + secCounter : String(secCounter)
    centiEl.textContent = centiCounter < 10 ? "0" + centiCounter : String(centiCounter)
}

const start = () => {
    if (intervalId) return
    intervalId = setInterval(() => {
        centiCounter++
        if (centiCounter >= 100) {
            centiCounter = 0
            secCounter++
            if (secCounter >= 60) {
                secCounter = 0
                minCounter++
            }
        }
        updateDisplay()
    }, 10)
}

const stop = () => {
    if (!intervalId) return
    clearInterval(intervalId)
    intervalId = null
}

const play = () => {
    if (!playButton) return
    if (!intervalId) {
        playButton.textContent = "pause"
        start()
        showControls(true)
    } else {
        playButton.textContent = "play"
        stop()
    }
}

const reset = () => {
    stop()
    centiCounter = 0
    secCounter = 0
    minCounter = 0
    lapCount = 0
    updateDisplay()
    playButton.textContent = "play"
    showControls(false)
    while (lapsList.firstChild) {
        lapsList.removeChild(lapsList.firstChild)
    }
    clearAllBtn.classList.add("hidden")
}

const formatTime = (m, s, c) => {
    const mm = String(m)
    const ss = s < 10 ? "0" + s : String(s)
    const cc = c < 10 ? "0" + c : String(c)
    return `${mm} : ${ss} : ${cc}`
}

const lap = () => {
    if (!intervalId) return
    lapCount++
    const li = document.createElement("li")
    li.className = "lap-item"
    const spanNum = document.createElement("span")
    spanNum.className = "number"
    spanNum.textContent = `#${lapCount}`
    const spanTime = document.createElement("span")
    spanTime.className = "time-stamp"
    spanTime.textContent = formatTime(minCounter, secCounter, centiCounter)
    li.appendChild(spanNum)
    li.appendChild(spanTime)
    lapsList.insertBefore(li, lapsList.firstChild)
    clearAllBtn.classList.remove("hidden")
}

const clearAll = () => {
    while (lapsList.firstChild) {
        lapsList.removeChild(lapsList.firstChild)
    }
    lapCount = 0
    clearAllBtn.classList.add("hidden")
}

if (playButton) playButton.addEventListener("click", play)
if (resetButton) resetButton.addEventListener("click", reset)
if (lapButton) lapButton.addEventListener("click", lap)
if (clearAllBtn) clearAllBtn.addEventListener("click", clearAll)

updateDisplay()