This code creates a countdown timer with a professional design. The startTimer and stopTimer functions handle the start and stop functionality, while the updateTime function updates the timer display every second. The timer format is in hh:mm:ss.
Let's go through the code and explain each part of the countdown timer.
HTML (index.html):
The HTML file sets up the basic structure of the countdown timer. It includes a container (
) that holds the timer display and control buttons.Inside the container, we have a element with the class timer. This is where the timer digits will be displayed in the format "hh:mm:ss".
Below the timer, there are two elements with the IDs startBtn and stopBtn. These buttons will be used to start and stop the countdown.
CSS (styles.css):
The CSS file provides some basic styling for the timer container and the buttons. It centers the timer on the screen and sets the font size for the timer and button text.
You can customize the CSS styles to change the appearance of the timer and buttons to match your desired design.
JavaScript (script.js):
The JavaScript file contains the logic to handle the countdown timer functionality.
We define some variables at the beginning: timerInterval (to store the interval ID for the running timer), hours, minutes, and seconds (to keep track of the time values).
We retrieve references to the timer display elements (hoursElement, minutesElement, and secondsElement) and the start and stop buttons (startBtn and stopBtn) using document.getElementById().
We add event listeners to the start and stop buttons. When the startBtn is clicked, the startTimer function will be executed. Similarly, when the stopBtn is clicked, the stopTimer function will be executed.
JavaScript Functions:
updateTimerDisplay():
This function updates the timer display with the current time values (hours, minutes, seconds). It formats the time values to ensure that they always have two digits (e.g., "00", "01", "10") using the padStart() method of strings.
startTimer():
This function is called when the "Start" button is clicked. It sets up an interval using setInterval() to call the updateTime function every 1000 milliseconds (1 second). This makes the timer count down in real-time. It also disables the "Start" button and enables the "Stop" button to prevent multiple countdowns from running concurrently.
stopTimer():
This function is called when the "Stop" button is clicked. It clears the interval using clearInterval() to stop the countdown. It also re-enables the "Start" button and disables the "Stop" button, allowing the user to start a new countdown if needed.
updateTime():
This function is the core of the countdown timer logic. It increments the seconds and updates the display accordingly. When the seconds reach 60, it resets to 0 and increments the minutes. The same happens for minutes and hours. Finally, it calls updateTimerDisplay() to show the updated time on the screen.
When you open the index.
html file in your web browser, you'll see the countdown timer with the "Start" and "Stop" buttons. Clicking the "Start" button will initiate the countdown, and clicking the "Stop" button will pause it.
Top comments (0)