Help - Search - Members - Calendar
Full Version: Editable Countdown Timer
HTMLHelp Forums > Programming > Client-side Scripting
natlmc
Hi, im hoping someone can help me. I am trying to make an editable countdown timer.
A box that you can type the value in, a drop down list (hours, minutes, seconds) and a start button.
Below that is the timer counting down. I have it set out, but something must be missing as start button is not working.

Also I want to make the timer number smaller. I will attach code below.

Thanks for help.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<title>Count Down Timers</title>
</head>
<body>

<div class="container-fluid">

<div class="row">
<div class="card text-white bg-secondary mb-3" style="width: 40rem;">

<div class="card-body">
<h5 class="card-title"><h5 style="text-align:center;">Timer 1 Name</h5>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown">
<!-- options -->
<select name="format">
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
<!-- submit button or set button -->
<button type="submit" class="set-btn">Start</button>
</form>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p>

<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>PAUSE</button>
<button class="reset-btn" disabled>RESET</button>
</div>
</p>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
pandy
Can you post the JavaScript also, please?
natlmc
/* grab necessary elements */
// grab the .form
const form = document.querySelector('.form');
// grab the .time-input
const timeInput = document.querySelector('.time-input');
// grab the select[name='format']
const format = document.querySelector("select[name='format']");
// grab the .set-btn
const setBtn = document.querySelector('.set-btn');
// grab the .countdown
const countDown = document.querySelector('.countdown');
// grab the .stop-btn
const stopBtn = document.querySelector('.stop-btn');
// grab the .reset-btn
const resetBtn = document.querySelector('.reset-btn');
/* grab necessary elements ends */


/* global variables and constants*/
// variable to store setInterval
let countDownInterval;

// secondsLeft in millisecond
let secondsLeftms;
// end time
let endTime;
// .stop-btn clicked or not
let stopBtnClicked = false;
/* global variables ends */


/* .stop-btn click listener */
stopBtn.addEventListener('click', () => {
// toggle the value of 'stopBtnClicked'
stopBtnClicked = !stopBtnClicked;

// if STOP button is clicked
if (stopBtnClicked === true) {
// change the text to 'PLAY'
stopBtn.innerHTML = 'PLAY';
// enable the .reset-btn
resetBtn.disabled = false;
// clear the setInterval() inorder to freeze the countdown timer
clearInterval(countDownInterval);
} else if (stopBtnClicked === false) {
// if PLAY button is clicked
// then change text to 'PAUSE'
stopBtn.innerHTML = 'PAUSE';
// disable the .reset-btn
resetBtn.disabled = true;
// then update endTime
endTime = secondsLeftms + Date.now();
// set a new setInterval()
countDownInterval = setInterval(() => {
setCountDown(endTime);
}, 1000);
}
});
/* .stop-btn click listener ends */


/* .reset-btn click listener */
resetBtn.addEventListener('click', () => {
resetCountDown();
});
/* .reset-btn click listener ends */


/* .form submit listener */
form.addEventListener('submit', (event) => {
// prevent the default page reloading
event.preventDefault();

// get the countdown time user typed
let countDownTime = timeInput.value;

// check if it is not zero
if (countDownTime > 0) {
// check which is the format, ie the <select> element's value
if (format.value === 'hours') {
// convert hours to milliseconds
// 1 hrs = 3600000 ms (5 zeros)
countDownTime = countDownTime * 3600000;
} else if (format.value === 'minutes') {
// 1 minute = 60000 ms (4 zeros)
countDownTime = countDownTime * 60000;
} else if (format.value === 'seconds') {
// 1 seconds = 1000 ms (3 zeros)
countDownTime = countDownTime * 1000;
}

// get current time in milliseconds
const now = Date.now();

// calculate the ending time
endTime = now + countDownTime;

//Endtime based on Odd/Even Hour
//endTime = getNextCallTime()

// activate the countdown at first
setCountDown(endTime);

countDownInterval = setInterval(() => {
setCountDown(endTime);
}, 1000);

// then disable the .set-btn
setBtn.disabled = true;
// then enable the .stop-btn
stopBtn.disabled = false;
}

});
/* .form submit listener ends */


/* setCountDown function */
const setCountDown = (endTime) => {
// calculate how many milliseconds is left to reach endTime from now
secondsLeftms = endTime - Date.now();
// convert it to seconds
const secondsLeft = Math.round(secondsLeftms / 1000);

// calculate the hours, minutes and seconds
let hours = Math.floor(secondsLeft / 3600);
let minutes = Math.floor(secondsLeft / 60) - (hours * 60);
let seconds = secondsLeft % 60;

// adding an extra zero infront of digits if it is < 10
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}

// stopping the timer if the time is up
if (secondsLeft < 0) {
resetCountDown();
return;
}

// set the .countdown text
countDown.innerHTML = `${hours} : ${minutes} : ${seconds}`;

};
/* setCountDown function ends */


/* resetCountDown function */
const resetCountDown = () => {
// destroy the setInterval()
clearInterval(countDownInterval);
// reset the countdown text
countDown.innerHTML = '00 : 00 : 00';
// set stopBtnClicked = false
stopBtnClicked = false;
// change inner text to STOP
stopBtn.innerHTML = 'STOP';

// enable .set-btn
setBtn.disabled = false;

// disable .stop-btn and .reset-btn
stopBtn.disabled = true;
resetBtn.disabled = true;
};
/* resetCountDown function ends */


/* Work out Lonework Ring time */
const getNextCallTime = () => {

const now = Date.now();
var dyear = new Date().getFullYear();
var dmonth = new Date().getMonth();
var dday = new Date().getDate();
var dhour = new Date().getHours();

//if current hour is odd then add 1 hour else add 2 hour
if (dhour % 2 === 1) {
return new Date(dyear, dmonth, dday, dhour + 1, 0)
}
else {
return new Date(dyear, dmonth, dday, dhour + 2, 0)
}

}








pandy
Afraid that's over my head, but Christian will probably be able to help you.

I just noticed one thing. This isn't working.

CODE
/* .form submit listener */
form.addEventListener('submit', (event) => {
// prevent the default page reloading
event.preventDefault();


The form is very much submitted and I guess that would be a showstopper.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.