How to make javascript countdown continue after refresh

How to make javascript countdown continue after refresh - javascript

I want to make javascript countdown continue after refreshing until the end even if page closed if possible without a database. I have done some searching but couldn't apply any on this code at all.
Can anyone help me with this one, please? I need to get it working without replacing the whole thing.
let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
// check if we should stop it!
if(secondsLeft < 0) {
document.getElementById('itimer').style.display = 'none'
document.getElementById('ifree').innerHTML = "done!";
document.getElementById("ifree").style.fontSize = "3.5rem";
clearInterval(interval);
clearInterval(countdown);
return;
}
// display it
displayTimeLeft(secondsLeft);
}, 1000);
document.getElementById('itimer').style.display = 'unset'
document.getElementById("ifree").style.fontSize = "15px";
}
function displayTimeLeft(seconds){
const minutes = Math.floor(seconds/60);
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;``
document.title = display;
timerDisplay.textContent = display;
}
function displayEndTime(timestamp){
const end = new Date(timestamp);
const hour = end.getHours();
const minutes = end.getMinutes();
endTime.textContent = `... ${hour}:${minutes}`;
}
function startTimer() {
const seconds = parseInt(this.dataset.time);
timer(seconds);
}
buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
e.preventDefault();
const mins = this.minutes.value;
console.log(mins);
timer(mins * 60);
this.reset();
});
.body{
direction: rtl;
font-family: 'Droid Arabic Kufi', sans-serif;
color: black;
}
#ifree{
font-size: 15px;
color:black;
}
html {
box-sizing: border-box;
font-size: 10px;
color: black;
}
*, *:before, *:after {
box-sizing: inherit;
}
.display__time-left {
font-weight: 100;
font-size: 5rem;
margin: 12px;
color:white;
text-shadow:4px 4px 0 rgba(0,0,0,0.05);
margin-bottom: -25px;
color: black;
}
.timer {
display:flex;
min-height: 35vh;
flex-direction:column;
direction: rtl;
}
.timer__controls {
display: flex;
}
.timer__controls > * {
flex:1;
}
.timer__controls form {
flex:1;
display:flex;
}
.timer__controls input {
flex:1;
border:0;
padding:2rem;
}
.timer__button {
background:none;
border:0;
cursor: pointer;
color:black;
font-size: 2.5vh;
text-transform: uppercase;
background:rgba(0,0,0,0.1);
border-bottom:3px solid rgba(0,0,0,0.2);
border-right:1px solid rgba(0,0,0,0.2);
padding:1rem;
font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__leave {
border:0;
cursor: pointer;
color:black;
font-size: 2.5vh;
text-transform: uppercase;
background:rgba(0,0,0,0.1);
border-bottom:3px solid rgba(0,0,0,0.2);
border-right:1px solid rgba(0,0,0,0.2);
padding:1rem;
font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__button:hover,
.timer__button:focus {
background:rgba(0,0,0,0.2);
outline:0;
}
.display {
flex:1;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 105px;
}
.display__end-time {
font-size: 3vh;
color:white;
font-family: 'Droid Arabic Kufi', sans-serif;
margin: 12px;
}
#media screen and (min-width: 1200px) {
timer__button {
font-size: 1px;
}
}
<body>
<div class="timer">
<div class="timer__controls">
<button data-time="1800" class="timer__button">30</button>
<button data-time="3600" class="timer__button">60</button>
<button data-time="5400" class="timer__button">90</button>
<button data-time="7200" class="timer__button">120</button>
<button data-time="14400" class="timer__button">240</button>
<button class="timer__leave" id="timer__leave">OFF</button>
<button data-time="0" class="timer__button">X</button>
</div>
<div class="display">
<h1 class="display__time-left" id="itimer"></h1>
<p class="display__end-time" id="ifree"></p>
</div>
</body>

Update the timer function
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
// check if we should stop it!
if(secondsLeft < 0) {
document.getElementById('itimer').style.display = 'none'
document.getElementById('ifree').innerHTML = "متاح الآن!";
document.getElementById("ifree").style.fontSize = "3.5rem";
clearInterval(interval);
clearInterval(countdown);
localStorage.removeItem("timeLeft")
return;
}
// display it
localStorage.timeLeft=secondsLeft;
displayTimeLeft(secondsLeft);
}, 1000);
document.getElementById('itimer').style.display = 'unset'
document.getElementById("ifree").style.fontSize = "15px";
}
then add the below condition.
if(localStorage.timeLeft){
timer(localStorage.timeLeft);
}

Maybe use localStorage?
Add 3 additional functions:
function loadTimeLeft() {
return JSON.parse(localStorage.timeLeft)
}
function persistTimeLeft(timeLeft) {
localStorage.timeLeft = JSON.stringify(timeLeft)
}
function clearTimeLeft() {
localStorage.removeItem("timeLeft")
}
Then just plug it in:
window.onload = function() {
const seconds = loadTimeLeft()
if (seconds) {
timer(seconds)
}
}
function timer(seconds) {
....
countdown = setInterval(() => {
if(secondsLeft < 0) {
....
clearTimeLeft() //added at the end of if statement
return
}
displayTimeLeft(secondsLeft)
persistTimeLeft(secondsLeft) //added at the end of callback
}, 1000)
...

Related

StopWatch is not working when I click on Stop Button

It's difficult to identify the exact issue, My StopWatch is not working when I click on Stop Button and wait for some second then I click on start button then I see that my second is working fine but minutes is not working properly. please check that is there any issue
let start = document.getElementById("start");
let stop = document.getElementById("stop");
let reset = document.getElementById("reset");
let h3 = document.getElementById("h3");
let time = document.getElementById("time");
let h3CreateMin = document.createElement("h3");
let h3CreateHour = document.createElement("h3");
let milisecond = document.getElementById("milisecond");
let second = document.getElementById("second");
let minSpan = document.createElement("span");
let minSpanSigin = document.createElement("span");
let hourSpan = document.createElement("span");
let hourSpanSigin = document.createElement("span");
let secStart = 0;
let miliSecStart = 0;
let minStart = 0;
let hourStart = 0;
let s = true;
start.addEventListener("click", function () {
reset.style.display = "block";
stop.style.display = "block";
start.style.display = "none";
miliSecondStop = setInterval(() => {
let miliSec = miliSecStart + 1;
milisecond.innerText = miliSec;
miliSecStart = miliSec;
if (miliSecStart === 99) {
miliSecStart = 0;
}
}, 10);
// Sec Start
secondStop = setInterval(() => {
let sec = secStart + 1;
secStart = sec;
second.innerText = secStart;
if (sec === 60) {
secStart = 0;
}
}, 1000);
// Min Start
minStop = setInterval(() => {
let min = minStart + 1;
if (s === true) {
time.prepend(h3CreateMin);
}
h3CreateMin.style.display = "block";
h3CreateMin.append(minSpan);
minSpan.classList = "value";
h3CreateMin.classList = "time_s_m_h";
h3CreateMin.append(minSpanSigin);
minSpanSigin.classList = "sigin";
minSpanSigin.innerText = "M";
minStart = min;
minSpan.innerText = min;
if (min === 60) {
minStart = 0;
}
s = false;
}, 60000);
// 60000
// Hour Start
hourStop = setInterval(() => {
let hour = hourStart + 1;
time.prepend(h3CreateHour);
h3CreateHour.style.display = "block";
h3CreateHour.classList = "time_s_m_h";
h3CreateHour.append(hourSpan);
hourSpan.classList = "value";
h3CreateHour.append(hourSpanSigin);
hourSpanSigin.classList = "sigin";
hourSpanSigin.innerText = "H";
hourSpan.innerText = hour;
hourStart = hour;
if (hour === 24) {
hourStart = 0;
}
}, 60000);
// 3600000
});
stop.addEventListener("click", function () {
start.style.display = "block";
stop.style.display = "none";
clearInterval(miliSecondStop);
clearInterval(secondStop);
clearInterval(minStop);
clearInterval(hourStop);
});
reset.addEventListener("click", function () {
start.style.display = "block";
stop.style.display = "none";
clearInterval(miliSecondStop);
miliSecStart = 0;
milisecond.innerText = "00";
clearInterval(secondStop);
secStart = 0;
second.innerText = 0;
clearInterval(minStop);
minStart = 0;
h3CreateMin.style.display = "none";
clearInterval(hourStop);
hourStart = 0;
h3CreateHour.style.display = "none";
});
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
main{
width: 100%;
height: 500px;
background-color: #FEA600;
display: flex;
flex-direction: column;
align-items: center;
}
main div:first-child{
margin-top: 20px;
}
main div:first-child h1, main div:first-child h2,main div:first-child h3{
font-size: 4rem;
font-weight: 100;
text-align: center;
margin-top: 20px;
}
main div:first-child #time{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
main div:first-child #time .time_s_m_h{
display: flex;
/* border: 1px solid rgb(0, 8, 255); */
align-items: flex-end;
justify-content: center;
width: 100px;
margin: 5px;
}
main div:first-child h3 .sigin{
font-size: 2rem;
/* border: 1px solid green; */
}
main div:first-child h3 #milisecond{
display: inline-block;
width: 50px;
/* border: 1px solid green; */
}
main div:last-child{
display: flex;
}
main div:last-child button{
padding: 20px;
width: 150px;
background-color: #FEA600;
font-size: 25px;
margin: 10px;
border:1px solid #ffffff;
cursor: pointer;
}
#stop,#reset{
display: none;
}
HTML
<body>
<main>
<div>
<h1>STOP WATCH</h1>
<!-- <h2>Vanilla JavaScript stopwatch</h2> -->
<div id="time">
<h3 class="time_s_m_h">
<span id="second" class="value">0</span>
<span class="sigin">S</span>
</h3>
<h3 id="h3">
<span id="milisecond" class="sigin">00</span>
</h3>
</div>
</div>
<div id="btnDiv">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</main>
<script src="app.js"></script>
</body>

You should use one timer to count.
Your code does not work exactly for second too.
If you click start and stop quickly, scond label will not increase.
It's because when you click start and stop, all timer will be reset.
So you should use one timer.
let start = document.getElementById("start");
let stop = document.getElementById("stop");
let reset = document.getElementById("reset");
let h3 = document.getElementById("h3");
let time = document.getElementById("time");
let h3CreateMin = document.createElement("h3");
let h3CreateHour = document.createElement("h3");
let milisecond = document.getElementById("milisecond");
let second = document.getElementById("second");
let minSpan = document.createElement("span");
let minSpanSigin = document.createElement("span");
let hourSpan = document.createElement("span");
let hourSpanSigin = document.createElement("span");
let miliSec = 0;
let s = true;
start.addEventListener("click", function () {
reset.style.display = "block";
stop.style.display = "block";
start.style.display = "none";
miliSecondStop = setInterval(() => {
miliSec++;
let milsecText = miliSec % 100;
let secText = (parseInt(miliSec / 100)) % 60;
let minText = (parseInt(miliSec / 6000)) % 60;
let hourText = parseInt(miliSec / 360000);
milisecond.innerText = milsecText;
second.innerText = secText;
if(minText>0){
time.prepend(h3CreateMin);
h3CreateMin.style.display = "block";
h3CreateMin.append(minSpan);
minSpan.classList = "value";
h3CreateMin.classList = "time_s_m_h";
h3CreateMin.append(minSpanSigin);
minSpanSigin.classList = "sigin";
minSpanSigin.innerText = "M";
minSpan.innerText = minText;
}
if(hourText > 0){
time.prepend(h3CreateHour);
h3CreateHour.style.display = "block";
h3CreateHour.classList = "time_s_m_h";
h3CreateHour.append(hourSpan);
hourSpan.classList = "value";
h3CreateHour.append(hourSpanSigin);
hourSpanSigin.classList = "sigin";
hourSpanSigin.innerText = "H";
hourSpan.innerText = hourText;
}
}, 10);
});
stop.addEventListener("click", function () {
start.style.display = "block";
stop.style.display = "none";
clearInterval(miliSecondStop);
});
reset.addEventListener("click", function () {
start.style.display = "block";
stop.style.display = "none";
clearInterval(miliSecondStop);
miliSec = 0;
milisecond.innerText = "00";
h3CreateMin.style.display = "none";
h3CreateHour.style.display = "none";
});
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
main{
width: 100%;
height: 500px;
background-color: #FEA600;
display: flex;
flex-direction: column;
align-items: center;
}
main div:first-child{
margin-top: 20px;
}
main div:first-child h1, main div:first-child h2,main div:first-child h3{
font-size: 4rem;
font-weight: 100;
text-align: center;
margin-top: 20px;
}
main div:first-child #time{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
main div:first-child #time .time_s_m_h{
display: flex;
/* border: 1px solid rgb(0, 8, 255); */
align-items: flex-end;
justify-content: center;
width: 100px;
margin: 5px;
}
main div:first-child h3 .sigin{
font-size: 2rem;
/* border: 1px solid green; */
}
main div:first-child h3 #milisecond{
display: inline-block;
width: 50px;
/* border: 1px solid green; */
}
main div:last-child{
display: flex;
}
main div:last-child button{
padding: 20px;
width: 150px;
background-color: #FEA600;
font-size: 25px;
margin: 10px;
border:1px solid #ffffff;
cursor: pointer;
}
#stop,#reset{
display: none;
}
HTML
<body>
<main>
<div>
<h1>STOP WATCH</h1>
<!-- <h2>Vanilla JavaScript stopwatch</h2> -->
<div id="time">
<h3 class="time_s_m_h">
<span id="second" class="value">0</span>
<span class="sigin">S</span>
</h3>
<h3 id="h3">
<span id="milisecond" class="sigin">00</span>
</h3>
</div>
</div>
<div id="btnDiv">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</main>
<script src="app.js"></script>
</body>

How to add lap functionality in stopwatch using Javascript?

I am working on a stopwatch and basically I have all done but I don't know how to add the lapping functionality. I want that as soon as the user clicks on the lap button, a new lap gets added on a "new line". However I am not able to do that here is my code:
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let laps = null;
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10){
displayMilisec = "0" + miliseconds.toString();
}
else {
displayMilisec = miliseconds;
}
if(seconds < 10) {
displaySec = "0" + seconds.toString();
}
else {
displaySec = seconds;
}
if(minutes < 10) {
displayMins = "0" + minutes.toString();
}
else {
displayMins = minutes;
}
if(hours < 10) {
displayHours = "0" + hours.toString();
}
else {
displayHours = hours;
}
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
document.getElementById("timerMilisec").innerHTML = displayMilisec;
document.getElementById("timerSec").innerHTML = displaySec;
document.getElementById("timerMins").innerHTML = displayMins;
document.getElementById("timerHrs").innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = window.setInterval(start, 10);
document.getElementById('startBtn').innerHTML = "Stop";
status = "started";
}
else {
window.clearInterval(interval);
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
}
function reset() {
window.clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timerMilisec").innerHTML = "00";
document.getElementById("timerSec").innerHTML = "00";
document.getElementById("timerMins").innerHTML = "00";
document.getElementById("timerHrs").innerHTML = "00";
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
function lap() {
lapNow = hours + " : " + minutes + " : " + seconds + " : " + miliseconds;
laps = document.getElementById('lapRecord').innerHTML + lapNow;
document.getElementById('lapRecord').innerHTML = laps;
}
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito","poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito","poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn" onclick="startStop()">Start</button>
<button type="button" id="resetBtn" onclick="reset()">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord">
</p>
</div>
</div>
I have used a very bad method to do this but yeah I will definitely improve it as soon as know how to add that lap function. I would appreciate an explanation of your code as I just a beginner to coding and I don't know much still. Thank you so much for reading my questions.

Well then, I've edited the code and implemented the lap functionality. Here's what I did.
I would advice you stop using inline html event listeners (onclick). So I replaced all the onclicks with addEventListener('click')
Selecting elements from the DOM is heavy on the performance of your document, so I assigned all the ids to a variable, because these elements were used a lot.
In the lap function, I used template stings to concatenate the time together, and wrapped them in a <div></div> tag with a class of lap in case you want to style the laps later.
I also removed curly braces ({ }) around one-line ifelse statements to reduce the number of lines in the code.
You can test it out here in the snippet. :-)
const lapBtn = document.getElementById('lapBtn');
const timerMilliSec = document.getElementById('timerMilliSec');
const timerSec = document.getElementById('timerSec');
const timerMins = document.getElementById('timerMins');
const timerHrs = document.getElementById('timerHrs');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const lapRecord = document.getElementById('lapRecord');
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10) displayMilisec = "0" + miliseconds.toString();
else displayMilisec = miliseconds;
if (seconds < 10) displaySec = "0" + seconds.toString();
else displaySec = seconds;
if (minutes < 10) displayMins = "0" + minutes.toString();
else displayMins = minutes;
if (hours < 10) displayHours = "0" + hours.toString();
else displayHours = hours;
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
timerMilisec.innerHTML = displayMilisec;
timerSec.innerHTML = displaySec;
timerMins.innerHTML = displayMins;
timerHrs.innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = setInterval(start, 10);
startBtn.innerHTML = "Stop";
status = "started";
} else {
clearInterval(interval);
startBtn.innerHTML = "Start";
status = "stopped";
}
}
function reset() {
clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
timerMilisec.innerHTML = "00";
timerSec.innerHTML = "00";
timerMins.innerHTML = "00";
timerHrs.innerHTML = "00";
startBtn.innerHTML = "Start";
lapRecord.innerHTML = '';
status = "stopped";
}
function lap() {
lapNow = `<div class="lap">${hours} : ${minutes} : ${seconds} : ${miliseconds}</div>`;
lapRecord.innerHTML += lapNow;
}
lapBtn.addEventListener('click', lap);
startBtn.addEventListener('click', startStop);
resetBtn.addEventListener('click', reset);
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito", "poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito", "poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn">Start</button>
<button type="button" id="resetBtn">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord"></p>
</div>
</div>

Enable Button when click counter is at 100 with jQuery/JavaScript

I've been doing a little game lately. You have two buttons with which you can earn money, One has a timer and when the timer is over you can click on it and you get +$500 in your account.
With the other button you can earn money by clicking on it. With every click you get +1$ in your account.
Now I wanted to make a button that doubles the money. For this I made a third button that says "Enable me".
I wanted to make a function that enables the button when your account is over $100. Do you know how I could do it?
Here is my code:
$(".addOneButton").click(function() {
setCounter(getCounter() + 1);
});
function myFunction(){
$(".addOneButton").click(function() {
setCounter(getCounter() + 1);
});
}
function hideUpgradeButton() {
document.getElementById("upgrade").style.display = "none";
}
$('#btn').prop('disabled',true);
startCountDown();
function getCounter(){
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter() + 500);
$('#btn').prop('disabled',true);
startCountDown();
});
function startCountDown() {
var counter = document.getElementById("counter")
var minutes = 1,
seconds = 30;
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
$("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
clearInterval(count);
$('#btn').prop('disabled',false);
} else {
$("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
seconds--;
if (seconds < 10) seconds = "0" + seconds;
}
if(parseInt(minutes) === 1 && parseInt(seconds) === 0) {
minutes = 0;
seconds = 60
}
if(parseInt(counter) > 500){
$("#upgrade").prop('disabled', false);
}
}, 1000);
}
* {
font-family: 'Roboto', sans-serif;
}
#total {
display: flex;
justify-content: center;
margin: 0 auto;
width: auto;
}
#border {
border: 1px solid grey;
padding: 0.2em 1em 0.2em 1em;
}
.inline {
display: inline-block;
}
/*
Timer Button Start
*/
button:disabled {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #d0d0d0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
filter: grayscale(30%);
}
button {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
margin: 0.5em;
user-select: none;
}
button:enabled:hover {
transform: scale(1.1);
}
button:enabled:active {
transform: scale(0.9);
filter: brightness(70%);
}
/*
Timer Button End
*/
.bi {
font-size: 20px;
display: inline-flex;
align-items: center;
}
#centerButtons {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div id="total">
<div id="border">
<div class="inline" id="counter">0</div>
<div class="inline" id="money">$</div>
</div>
</div><br>
<div id="centerButtons">
<button id="btn">
<span id="countdown">Collect</span>
</button>
<button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>
<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

Set a variable that holds the increment value , and a var that make sur you enable the button double once ,
then check if counter > 100 && wasn't enabled yet then increment the increment using the function myFunction()
PS I've edited timer value : to go fast with testing :
see below, snippet :
var increment = 1;
var enabled = false;
$(".addOneButton").click(function() {
var count = getCounter();
if(count > 100 && !enabled) {
$("#upgrade").prop('disabled', false)
enabled = true;
}
setCounter(count + increment);
});
function myFunction() {
increment++;
}
function hideUpgradeButton() {
document.getElementById("upgrade").style.display = "none";
}
$('#btn').prop('disabled', true);
startCountDown();
function getCounter() {
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter() + 500);
$('#btn').prop('disabled', true);
startCountDown();
});
function startCountDown() {
var counter = document.getElementById("counter")
var minutes = 0,
seconds = 10
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <= 0) {
$("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
clearInterval(count);
$('#btn').prop('disabled', false);
} else {
$("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
seconds--;
if (seconds < 10) seconds = "0" + seconds;
}
if (parseInt(minutes) === 1 && parseInt(seconds) === 0) {
minutes = 0;
seconds = 60
}
if (parseInt(counter) > 500) {
$("#upgrade").prop('disabled', false);
}
}, 1000);
}
* {
font-family: 'Roboto', sans-serif;
}
#total {
display: flex;
justify-content: center;
margin: 0 auto;
width: auto;
}
#border {
border: 1px solid grey;
padding: 0.2em 1em 0.2em 1em;
}
.inline {
display: inline-block;
}
/*
Timer Button Start
*/
button:disabled {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #d0d0d0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
filter: grayscale(30%);
}
button {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
margin: 0.5em;
user-select: none;
}
button:enabled:hover {
transform: scale(1.1);
}
button:enabled:active {
transform: scale(0.9);
filter: brightness(70%);
}
/*
Timer Button End
*/
.bi {
font-size: 20px;
display: inline-flex;
align-items: center;
}
#centerButtons {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div id="total">
<div id="border">
<div class="inline" id="counter">0</div>
<div class="inline" id="money">$</div>
</div>
</div><br>
<div id="centerButtons">
<button id="btn">
<span id="countdown">Collect</span>
</button>
<button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>
<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

change getCounter:
function getCounter(){
var counter = parseInt($('#counter').html());
if(parseInt(counter) > 99){
$("#upgrade").prop('disabled', false);
}
return counter;
}

CSS Animation not clearing in JS

I'm penning a digital clock and I want to create a feature that slides the numbers up on change. I'm applying inline animation to the secondDiv and clearing it every second, but the animation only shows up on page load. I want it to show every second, hence trying to clear it first. I've tried secondDiv.style.animation = "" as well as secondDiv.removeAttribute('style'), but to no avail.
Codepen Example
JS
const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");
const getDate = () => {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
if (hours > 12) {
hours = hours - 12;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
hourDiv.textContent = hours;
minuteDiv.textContent = minutes;
secondDiv.textContent = seconds;
secondDiv.style.animation = `0.3s change`;
};
window.setInterval(getDate, 1000);
CSS
#keyframes change {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-30px);
}
}
What am I doing wrong? How can I clear the Inline Animation every second before it's applied again?

Remove style just after animation is finished with help of animationend event. Without waiting for next loop.
Instead of:
secondDiv.removeAttribute("style");
Use
secondDiv.addEventListener('animationend', () => {
secondDiv.removeAttribute("style");
});
outside your getDate function
Full example
const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");
const getDate = () => {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
if (hours > 12) {
hours = hours - 12;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
hourDiv.textContent = hours;
minuteDiv.textContent = minutes;
secondDiv.textContent = seconds;
secondDiv.style.animation = `0.3s change`;
};
secondDiv.addEventListener('animationend', () => {
secondDiv.removeAttribute("style");
});
window.setInterval(getDate, 1000);
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(#444, #222);
height: 100vh;
color: #fff;
}
#clock-body {
display: flex;
align-items: center;
font-size: 2rem;
font-family: "Courier New", Courier, monospace;
padding: 2.5rem;
border: 10px solid #fff;
border-radius: 20px;
background: #000;
box-shadow: 0 8px 30px #212121;
span {
font-weight: 300;
font-size: 3rem;
}
#hours,
#minutes,
#seconds {
font-weight: 700;
font-size: 4rem;
border-radius: 3px;
}
}
#keyframes change {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-30px);
}
}
<div id="clock-body">
<div id="hours"></div>
<span>:</span>
<div id="minutes"></div>
<span>:</span>
<div id="seconds"></div>
<div id="zone"></div>
</div>

Here is my solution, Its not perfect, but it can be a good starting point.
I am using setTimeout inside the function along with transition property of css to control the position and opacity of the number
const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");
const getDate = () => {
// secondDiv.removeAttribute("style");
secondDiv.style.transition = `opacity 0.3s linear`;
secondDiv.style.transform = `translateY(0px)`;
secondDiv.style.opacity = `1`;
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
if (hours > 12) {
hours = hours - 12;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
hourDiv.textContent = hours;
minuteDiv.textContent = minutes;
secondDiv.textContent = seconds;
setTimeout(() => {
secondDiv.style.transition = `all 0.3s linear`;
secondDiv.style.transform = `translateY(-50px)`;
secondDiv.style.opacity = `0`;
}, 500);
};
window.setInterval(getDate, 1000);
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(#444, #222);
height: 100vh;
color: #fff;
}
#clock-body {
display: flex;
align-items: center;
font-size: 2rem;
font-family: "Courier New", Courier, monospace;
padding: 2.5rem;
border: 10px solid #fff;
border-radius: 20px;
background: #000;
box-shadow: 0 8px 30px #212121;
}
#clock-body span {
font-weight: 300;
font-size: 3rem;
}
#clock-body #hours,
#clock-body #minutes,
#clock-body #seconds {
font-weight: 700;
font-size: 4rem;
border-radius: 3px;
}
#keyframes change {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-30px);
}
}
<div id="clock-body">
<div id="hours"></div>
<span>:</span>
<div id="minutes"></div>
<span>:</span>
<div class="s-div" id="seconds"></div>
<div id="zone"></div>
</div>

JavaScript Beep Sound incorrect on mobile but desktop

I creat short script want to make a beep sound every second.
It just a simple JS in HTML file.
When it run on desktop (chrome) it working (beep every sec) but when it run on mobile (both android and ios) it only beep once and gone.
Can anyone suggest a fix?
I try many method but cannot find a fix.
here is script
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 !important;
padding: 0 !important;
}
h1 {
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
margin-left: 1px;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 15px 2px 2px 5px;
display: inline-block;
}
select.form-control{display:inline-block}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: #45a049;
}
table, th, td {
border: 0px;
padding:0;
margin:0;
border-collapse: collapse;
}
td {
border: 0px;
padding:1;
margin:0;
}
</style>
<script>
var bit = 18;
var flat = 1;
var cmd = [0,0,0,0,0,0,0,0,0,0,0,0,0];
var j = 0;
var secTime = 0;
var t;
var confirmCmd;
var beep = function () {
(new
Audio(
"data:audio/wav;base64,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 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="
)).play();
}
function clock () {
var h1 = document.getElementById('clockShow'),
seconds = 0, minutes = 0, hours = 0;
function add() {
seconds++;
secTime++
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
beep();
}
function timer() {
t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = function () {
//init
document.getElementById("msg").innerHTML="UP";
document.getElementById("start").disabled = true;
timer();
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
document.getElementById("msg").innerHTML="START";
j = 0;
secTime = 0;
document.getElementById("Next").innerHTML = "Count Down";
document.getElementById("start").disabled = false;
}
}
</script>
</head>
<body onload="clock()">
<div align="center">
<h1 id="msg" style="font-size:20vw">START</h1>
<span style="font-size:5vw" id="Next">Clock</span>
</div><br>
<div align="center">
<h1 id="clockShow" style="font-size:5vw"><time>00:00:00</time></h1>
<button id="start" class="button">Start</button>
<button id="clear" class="button">Abort</button>
</div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

How to make javascript countdown continue after refresh - javascript

Related

StopWatch is not working when I click on Stop Button

How to add lap functionality in stopwatch using Javascript?

Enable Button when click counter is at 100 with jQuery/JavaScript

CSS Animation not clearing in JS

JavaScript Beep Sound incorrect on mobile but desktop

Categories

Resources