study-countdown-timer/time.html at main · Faisal19348/study-countdown-timer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer with Audio Control</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #121212;
            color: #ffffff;
            font-family: Arial, sans-serif;
            flex-direction: column;
        }

        #timer {
            font-size: 20em;
            margin-bottom: 5px;
        }

        .button-container {
            display: flex;
            gap: 10px;
            margin-top: 5px;
        }

        button {
            padding: 10px 20px;
            font-size: 1em;
            border: none;
            cursor: pointer;
            background-color: #1f1f1f;
            color: #ffffff;
            border-radius: 20px;
            transition: 0.3s;
        }

        button:hover {
            background-color: #333333;
        }
    </style>
</head>
<body>
    <div id="timer">02:00:00</div>
    <div class="button-container">
        <button onclick="startTimer()">Start</button>
        <button onclick="pauseTimer()">Pause</button>
        <button onclick="resumeTimer()">Resume</button>
        <button onclick="resetTimer()">Reset</button>
    </div>
    <audio id="audio" src="C:\Users\mdash\Music\2 Hours Heart Touching Quran Reaction   Abdul Rahman Mossad   (HD).mp3" preload="auto"></audio>

    <script>
        let timerInterval;
        let remainingTime = 2 * 60 * 60; // 2 hours in seconds
        let isPaused = false;

        const timerElement = document.getElementById("timer");
        const audio = document.getElementById("audio");

        function updateTimer() {
            const hours = Math.floor(remainingTime / 3600);
            const minutes = Math.floor((remainingTime % 3600) / 60);
            const seconds = remainingTime % 60;

            timerElement.textContent =
                `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

            if (remainingTime === 0) {
                clearInterval(timerInterval);
                audio.pause();
                audio.currentTime = 0; // Reset audio to the beginning
                print("Times up,very good,Go for a breake")
            }
        }

        function startTimer() {
            if (!timerInterval) {
                timerInterval = setInterval(() => {
                    if (!isPaused && remainingTime > 0) {
                        remainingTime--;
                        updateTimer();
                        audio.play();
                    }
                }, 1000);
            }
        }

        function pauseTimer() {
            isPaused = true;
            audio.pause();
        }

        function resumeTimer() {
            isPaused = false;
            audio.play();
        }

        function resetTimer() {
            clearInterval(timerInterval);
            timerInterval = null;
            remainingTime = 2 * 60 * 60;
            updateTimer();
            audio.pause();
            audio.currentTime = 0;
        }

        updateTimer(); // Initialize timer display
    </script>
</body>
</html>