The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multiple Timers on 1 page
natlmc
post Jun 24 2021, 09:57 AM
Post #1





Group: Members
Posts: 3
Joined: 13-December 20
Member No.: 27,684



Hi, i'm looking for some help please. I currently have a html page that needs multiple timers that are independent of each other. I can get the first one to work, but once i try to use the second one, it resets the first. Im not sure what im doing wrong here. i'm quite new to this! any help would be appreciated.
I have attached Html file and JS script

Thanks

html
<!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>ZAOCC Timers</title>
</head>
<body>
<p style="text-align:center;">
<audio id="sound">
<source src="audio/alarm_mp3.mp3" />
</audio>

<div class="card-group">

<div class="card text-white bg-primary">

<div class="card-body">
<h4 class="card-title"><h4 style="text-align:center;">Timer 1 Name</h4>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea><br><br>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br>
<p style="text-align:center;"><p style="text-align:center;">
<!-- 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-btn1" name="t1_start">Start</button>
</form><br>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p><br>


<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>Pause Timer</button>
<button class="reset-btn" disabled>Reset Timer</button>
<button class="alarm-btn" disabled>Stop Alarm</button>
</div>
</div>
</div>

<!--------------------------------------------------CARD 2 ---------------------------------------------------->


<div class="card text-white bg-success mb-3" style="width: 20rem;">

<div class="card-body">
<h4 class="card-title"><h4 style="text-align:center;">Timer 2 Name</h4>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea><br><br>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br>
<p style="text-align:center;"><p style="text-align:center;">
<!-- 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-btn2" name="t2_start">Start</button>
</form><br>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p><br>


<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>Pause Timer</button>
<button class="reset-btn" disabled>Reset Timer</button>
<button class="alarm-btn" disabled>Stop Alarm</button>
</div>

</div>
</div>
<!--------------------------------------------------CARD 3 ---------------------------------------------------->

<div class="card text-white bg-warning mb-3" style="width: 20rem;">

<div class="card-body">
<h4 class="card-title"><h4 style="text-align:center;">Timer 3 Name</h4>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea><br><br>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br>
<p style="text-align:center;"><p style="text-align:center;">
<!-- 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-btn3" name="t3_start">Start</button>
</form><br>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p><br>


<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>Pause Timer</button>
<button class="reset-btn" disabled>Reset Timer</button>
<button class="alarm-btn" disabled>Stop Alarm</button>
</div>

</div>
</div>
<!--------------------------------------------------CARD 4 ---------------------------------------------------->
<div class="card text-white bg-danger mb-3" style="width: 20rem;">

<div class="card-body">
<h4 class="card-title"><h4 style="text-align:center;">Timer 4 Name</h4>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea><br><br>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br>
<p style="text-align:center;"><p style="text-align:center;">
<!-- 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-btn4" name="t4_start">Start</button>
</form><br>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p><br>


<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>Pause Timer</button>
<button class="reset-btn" disabled>Reset Timer</button>
<button class="alarm-btn" disabled>Stop Alarm</button>
</div>

</div>
</div>

<!--------------------------------------------------CARD 5 ---------------------------------------------------->

<div class="card text-white bg-info mb-3" style="width: 20rem;">

<div class="card-body">
<h4 class="card-title"><h4 style="text-align:center;">Timer 5 Name</h4>
<p class="card-text"><p style="text-align:center;"><p style="text-align:center;">
<textarea row="">
</textarea><br><br>
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<p style="text-align:center;"><input type="number" min="1" class="time-input" placeholder="Enter Countdown"><p><br>
<p style="text-align:center;"><p style="text-align:center;">
<!-- 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-btn5" name="t5_start">Start</button>
</form><br>
<!-- countdown text -->
<p style="text-align:center;">
<p class="countdown">00 : 00 : 00</p><br>


<!-- buttons -->

<div class="buttons"><p style="text-align:center;">
<button class="stop-btn" disabled>Pause Timer</button>
<button class="reset-btn" disabled>Reset Timer</button>
<button class="alarm-btn" disabled>Stop Alarm</button>
</div>

</div>
</div>

</div>


<script type="text/javascript" src="js/script.js"></script>
</body>
</html>



JS Script


/* 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 Alarm button is clicked
if (stopBtnClicked === true) {
// change the text to 'Restart Timer'
stopBtn.innerHTML = 'Restart Timer';
// enable the .reset-btn
resetBtn.disabled = false;
// clear the setInterval() inorder to freeze the countdown timer
clearInterval(countDownInterval);
} else if (stopBtnClicked === false) {
// if Restsart button is clicked
// then change text to 'Pause Timer'
stopBtn.innerHTML = 'Pause Timer';
// 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 Pause Timer
stopBtn.innerHTML = 'Pause Timer';

// 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)
}

}











Attached File(s)
Attached File  timer.html ( 7.56k ) Number of downloads: 12
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 24 2021, 01:04 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,778
Joined: 9-August 06
Member No.: 6



The script isn't designed to work with more than one form. It identifies form fields by the name of the classes they have. And all your forms have the same classes. The script will only look at the first instance. Even if you use different classes for different forms, the script isn't written to work like that. A whole lot of logic would need to be added and I think it would be a major rewrite. It's probably easier to do it from scratch.

Christian may have some idea, but I think he'll agree with me. But you never know. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 1st August 2021 - 07:05 PM