Here is app.js of "countdown" project. It works correctly if I declare:
let newLaunch = "1 July 2023" (by typing inside the app.js).
But when I decided to add UI and allow to input date for visitors it does not work! All I've achieved is that correct display console.log of input date (when typing to input field of website) but how can I force my code use this input for correct work of app?
It seems easy but I get stuck. Any helps appreciate.
const daysEl = document.getElementById("days")
const hoursEl = document.getElementById("hours")
const minutesEl = document.getElementById("minutes")
const secondsEl = document.getElementById("seconds")
let newLaunch = "1 July 2023" // It works correctly and can be changed
/* It does not work correctly...
let newLaunch = document.querySelector("input");
newLaunch.addEventListener("input", () => {
console.log(newLaunch.value.split("-").reverse().join("-"));
});
*/
function countdown () {
const newLaunchDate = new Date(newLaunch)
const currentDate = new Date()
const totalSeconds = (newLaunchDate - currentDate) / 1000
const days = Math.floor(totalSeconds / 3600 / 24)
const hours = Math.floor(totalSeconds / 3600) % 24
const minutes = Math.floor(totalSeconds / 60) % 60
const seconds = Math.floor(totalSeconds) % 60
daysEl.innerHTML = days
hoursEl.innerHTML = formatTime(hours)
minutesEl.innerHTML = formatTime(minutes)
secondsEl.innerHTML = formatTime(seconds)
}
const formatTime = time => time < 10 ? `0${time}` : time
//initial call
countdown ()
setInterval(countdown, 1000)
Let's add an input date and work with it. There are many options and some might recommend using library such as "moment.js". But lets keep it simple.
Update: I made some minimal changes so it would work with your example.
const daysEl = document.getElementById("days")
const hoursEl = document.getElementById("hours")
const minutesEl = document.getElementById("minutes")
const secondsEl = document.getElementById("seconds")
var int_id;
const formatTime = time => time < 10 ? `0${time}` : time
function got_date(elem) {
// the parsed value is always formatted yyyy-mm-dd
var str_date = elem.value + 'T00:00'
var newLaunch = str_date;
const newLaunchDate = new Date(newLaunch)
function countdown() {
const currentDate = new Date()
const totalSeconds = (newLaunchDate - currentDate) / 1000
if (totalSeconds < 0) {
console.log("target date has passed");
return;
}
const days = Math.floor(totalSeconds / 3600 / 24)
const hours = Math.floor(totalSeconds / 3600) % 24
const minutes = Math.floor(totalSeconds / 60) % 60
const seconds = Math.floor(totalSeconds) % 60
daysEl.innerHTML = days
hoursEl.innerHTML = formatTime(hours)
minutesEl.innerHTML = formatTime(minutes)
secondsEl.innerHTML = formatTime(seconds)
}
//initial call
countdown()
clearInterval(int_id);
int_id = setInterval(countdown, 1000)
}
<input id="date" type="date" name="date" oninput="got_date(this)">
<hr>
<span id="days"></span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
Related
Hey I try to run the timer always until 24 o'clock but it always runs 24 when the page is loaded. I do not understand how I can calculate that the timer always shows the correct time until 24 o'clock can someone help me?
const countToDate = new Date().setHours(new Date().getHours() + 24)
let previousTimeBetweenDates
setInterval(() => {
const currentDate = new Date()
const timeBetweenDates = Math.ceil((countToDate - currentDate) / 1000)
flipAllCards(timeBetweenDates)
previousTimeBetweenDates = timeBetweenDates
}, 250)
function flipAllCards(time) {
const seconds = time % 60
const minutes = Math.floor(time / 60) % 60
const hours = Math.floor(time / 3600)
flip(document.querySelector("[data-hours-tens]"), Math.floor(hours / 10))
flip(document.querySelector("[data-hours-ones]"), hours % 10)
flip(document.querySelector("[data-minutes-tens]"), Math.floor(minutes / 10))
flip(document.querySelector("[data-minutes-ones]"), minutes % 10)
flip(document.querySelector("[data-seconds-tens]"), Math.floor(seconds / 10))
flip(document.querySelector("[data-seconds-ones]"), seconds % 10)
}
function flip(flipCard, newNumber) {
const topHalf = flipCard.querySelector(".top")
const startNumber = parseInt(topHalf.textContent)
if (newNumber === startNumber) return
const bottomHalf = flipCard.querySelector(".bottom")
const topFlip = document.createElement("div")
topFlip.classList.add("top-flip")
const bottomFlip = document.createElement("div")
bottomFlip.classList.add("bottom-flip")
top.textContent = startNumber
bottomHalf.textContent = startNumber
topFlip.textContent = startNumber
bottomFlip.textContent = newNumber
topFlip.addEventListener("animationstart", e => {
topHalf.textContent = newNumber
})
topFlip.addEventListener("animationend", e => {
topFlip.remove()
})
bottomFlip.addEventListener("animationend", e => {
bottomHalf.textContent = newNumber
bottomFlip.remove()
})
flipCard.append(topFlip, bottomFlip)
}
I have a countdown timer for next 25 years. how can I display years in this timer. currently instead of year days are showing. I need to display the years also. please help .
enter image description here
please find the code i have used
"code"
enter code here
let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");
let countDown = () => {
let futureDate = new Date("17 august 2022 9:59:59");
let currentDate = new Date();
let myDate = futureDate - currentDate;
//console.log(myDate);
let days = Math.floor(myDate / 1000 / 60 / 60 / 24);
let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;
let min = Math.floor(myDate / 1000 / 60) % 60;
let sec = Math.floor(myDate / 1000) % 60;
daysItem.innerHTML = days;
hoursItem.innerHTML = hours;
minItem.innerHTML = min;
secItem.innerHTML = sec;
}
countDown()
setInterval(countDown, 1000)
You need to make calculation with getFullYear() from current date to futur date.
let yearsItem = document.querySelector("#years");
let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");
let countDown = () => {
let futureDate = new Date("17 august 2047 9:59:59");
let currentDate = new Date();
let myDate = futureDate - currentDate;
//console.log(myDate);
let years = futureDate.getFullYear() - currentDate.getFullYear();
let days = Math.floor(myDate / 1000 / 60 / 60 / 24);
let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;
let min = Math.floor(myDate / 1000 / 60) % 60;
let sec = Math.floor(myDate / 1000) % 60;
yearsItem.innerHTML = years;
daysItem.innerHTML = days;
hoursItem.innerHTML = hours;
minItem.innerHTML = min;
secItem.innerHTML = sec;
}
countDown()
setInterval(countDown, 1000)
div { display:inline-block; padding:5px; background:#000; color:#fff }
Years <div id="years"></div>
Days <div id="days"></div>
Hours <div id="hours"></div>
Min <div id="min"></div>
Sec <div id="sec"></div>
I noticed that the setInterval part makes the code not work. No error is being shown. It works when I manually press the button one at a time.
const stopWatch = document.getElementById("time");
let totalSecs = 0;
const start = document.getElementById("start");
let timeCount = setInterval(seconds, 1000);
let seconds = () => {
start.innerHTML = "Clicked!";
++totalSecs;
let hr = Math.floor(totalSecs / 3600);
let min = Math.floor(totalSecs / 60);
let sec = totalSecs - hr * 3600 - min * 60;
stopWatch.innerHTML = `${hr} : ${min} : ${sec}`;
}
document.addEventListener("click", seconds);
<div id="time">
</div>
<button id="start">Start</button>
I made a timer for a project in school (I am still in school yes and I do not have JavaScript as a lesson that we get this semester) in JavaScript and it continues after the 0. I got some help from a teacher but I can't reach him with the pandemic and stuff.
This is the code that I wrote and what happens is that when it reaches the date that I put in it goes into -0 -0 -0 -01 and continues from there.
const countdown = () => {
let countDate = new Date('Febuary 9, 2022 00:00:00').getTime();
let now = new Date().getTime();
let gap = countDate - now;
let second = 1000;
let minute = second * 60;
let hour = minute * 60;
let day = hour * 24;
let textDay = Math.floor(gap / day);
let textHour = Math.floor((gap % day) / hour);
let textMinute = Math.floor((gap % hour) / minute);
let textSecond = Math.floor((gap % minute) / second);
document.querySelector('.day').innerText = textDay;
document.querySelector('.hour').innerText = textHour;
document.querySelector('.minute').innerText = textMinute;
document.querySelector('.second').innerText = textSecond;
};
setInterval(countdown, 1000);
setInterval returns a value which you can pass to clearInterval to stop the interval from running. Store that value in a variable, for example:
let countInterval = 0;
const countdown = () => {
//...
};
countInterval = setInterval(countdown, 1000);
Then within countdown you can check if you want to clear that interval. For example, if you want to clear it when gap <= 0 you would perform that logic:
if (gap <= 0) {
clearInterval(countInterval);
return;
}
This would stop the interval from running when that condition is eventually met.
Example:
let countInterval = 0;
const countdown = () => {
let countDate = new Date('January 11, 2022 13:35:00').getTime();
let now = new Date().getTime();
let gap = countDate - now;
if (gap <= 0) {
clearInterval(countInterval);
return;
}
let second = 1000;
let minute = second * 60;
let hour = minute * 60;
let day = hour * 24;
let textDay = Math.floor(gap / day);
let textHour = Math.floor((gap % day) / hour);
let textMinute = Math.floor((gap % hour) / minute);
let textSecond = Math.floor((gap % minute) / second);
document.querySelector('.day').innerText = textDay;
document.querySelector('.hour').innerText = textHour;
document.querySelector('.minute').innerText = textMinute;
document.querySelector('.second').innerText = textSecond;
};
countInterval = setInterval(countdown, 1000);
<div class="day"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
A few days ago, I created countdown timer by watching a video on YouTube. The countdown timer is completely perfect but one thing is missing from it. When the timer goes to the zero it will hide from the page.
I want to show some text when timer ends. Like if timer goes to zero then timer hides and show this message "You are too late. Stay with us".
This is a .js code in which I need some modification.
const dayDisplay = document.querySelector(".days .number");
const hourDisplay = document.querySelector(".hours .number");
const minuteDisplay = document.querySelector(".minutes .number");
const secondDisplay = document.querySelector(".seconds .number");
const countdownContainer = document.querySelector(".countdown-container");
const endDate = new Date("August 04 2020 10:38:00");
let saleEnded = false;
const updateTimer = () => {
if(countdownContainer) {
let currentDate = new Date();
let difference = endDate.getTime() - currentDate.getTime();
if (difference <= 1000) {
saleEnded = true;
}
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
let newDay = Math.floor(difference / day);
let newHour = Math.floor((difference % day) / hour);
let newMiute = Math.floor((difference % hour) / minute);
let newSecond = Math.floor((difference % minute) / second);
dayDisplay.innerText = newDay < 10 ? "0" + newDay : newDay;
hourDisplay.innerText = newHour < 10 ? "0" + newHour : newHour;
minuteDisplay.innerText = newMiute < 10 ? "0" + newMiute : newMiute;
secondDisplay.innerText = newSecond < 10 ? "0" + newSecond : newSecond;
};
};
setInterval(() => {
if (!saleEnded) {
updateTimer();
} else {
countdownContainer.style.display = "block";
}
}, 1000);
Try this?
setInterval(() => {
if (!saleEnded) {
updateTimer();
} else {
countdownContainer.style.display = "block";
countdownContainer.innetHTML="You are too late. Stay with us";
}
}, 1000);