 Editable Countdown Timer |
  |
| natlmc |
 Dec 13 2020, 12:18 AM
Post
#1
|
|
Group: Members Posts: 3 Joined: 13-December 20 Member No.: 27,684  |
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 |
Dec 13 2020, 12:34 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Can you post the JavaScript also, please?
|
|
|
|
| natlmc |
Dec 13 2020, 12:37 AM
Post
#3
|
|
Group: Members Posts: 3 Joined: 13-December 20 Member No.: 27,684 |
/* 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 |
Dec 13 2020, 05:24 AM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 04:01 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC