i have been trying 15 JS projects by john smilga. one of the projects is the timer. i have the same code as him but unable to run the timer
here’s my HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Advent+Pro&family=Barlow+Condensed:wght@300&family=Cormorant+Garamond:wght@300&family=Dancing+Script&family=Lato&family=Quattrocento:wght@700&family=Quicksand:wght@300&family=Saira&family=Smooch+Sans&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Countdown</title>
</head>
<body>
<section class="container">
<article class="giveaway-img">
<img src="img.jpg" alt="iphone giveaway">
</article>
<article class="timer-container">
<div class="title">
<h3>i-phone giveaway</h3>
<p class="deadline">
free i-phone for lucky customers till april 15, 2022 11:59:59 pm
</p>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur odio eaque blanditiis ab, aspernatur
pariatur iste eligendi? Recusandae, possimus numquam! Eveniet minus provident dolorum ipsam?</p>
</div>
<div class="timer">
<div class="item">
<div>
<h3 class="days"></h3>
<span>days</span>
</div>
</div>
<div class="item">
<div>
<h3 class="hours"></h3>
<span>hours</span>
</div>
</div>
<div class="item">
<div>
<h3 class="mins"></h3>
<span>mins</span>
</div>
</div>
<div class="item">
<div>
<h3 class="secs"></h3>
<span>secs</span>
</div>
</div>
</div>
</article>
</section>
<script src="script.js"></script>
</body>
</html>
here’s my CSS
*{
padding: 0;
margin: 0;
}
h3{
text-transform: capitalize;
}
.timer .item span{
display: block;
}
.container{
width: 70vw;
margin: 1.5rem auto;
padding: 1rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
position: relative;
top: 20vh;
}
.timer-container{
width: 50%;
margin: 1rem;
}
.title{
margin-bottom: 0.5rem;
text-align: center;
}
.desc{
text-align: justify;
margin-bottom: 0.3rem;
}
.timer{
display: flex;
justify-content: center;
}
.item{
text-align: center;
margin: 0.8rem;
padding: 0.5rem;
color: white;
background: black;
font-weight: bold;
width: 2.5rem;
}
here’s my JS
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",];
const deadline = document.querySelector(".deadline");
const items = document.querySelectorAll(".item h3");
const timer = document.querySelector(".timer")
let currentDate = new Date();
// console.log(currentDate)
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
let currentDay = currentDate.getDate();
// console.log(currentDay)
const futureDate = new Date(currentYear, currentMonth, currentDay + 5, 23, 59, 59);
// console.log(futureDate)
const futureYear = futureDate.getFullYear();
let futureMonth = months[futureDate.getMonth()];
const futureDay = futureDate.getDate();
const futureDayName = days[futureDate.getDay()];
const futureHours = futureDate.getHours()
const futureMins = futureDate.getMinutes()
const futureSecs = futureDate.getSeconds()
deadline.textContent = `free i-phone for lucky customers till ${futureDayName}, ${futureMonth} ${futureDay} ${futureYear}, ${futureHours}:${futureMins}:${futureSecs} pm`
const futureDur = futureDate.getTime();
function countDownTimer() {
const currentDur = currentDate.getTime();
const diff = futureDur - currentDur;
// console.log(diff)
const oneDay = 24 * 60 * 60 * 1000;
const oneHour = 60 * 60 * 1000;
const oneMin = 60 * 1000;
let day = Math.floor(diff / oneDay);
let hour = Math.floor((diff % oneDay) / oneHour);
let mins = Math.floor((diff % oneHour) / oneMin);
let secs = Math.floor((diff % oneMin) / 1000);
// console.log(secs)
const values = [day, hour, mins, secs];
function format(item) {
if (item < 10) {
return (item = `0${item}`);
}
return item;
}
items.forEach(function (item, index) {
item.innerHTML = format(values[index]);
})
if (diff < 0) {
clearInterval(countDown);
timer.innerHTML = `<h4 class="expired">sorry, this giveaway has expired!</h4>`;
}
}
let countDown = setInterval(countDownTimer, 1000);
countDownTimer();
a little help would be appreciated