Using setInterval()

JavaScript
1

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

2

This sets an interval to call countDownTimer every 1000 ms, is that not what you want?

Please elaborate on your issue, what you think the cause is, and what you have tried to solve it.

3

Well, the interval is set, but, if you have seen the whole project, the timer doesn’t run i.e. seconds and eventually minutes, hours etc should decrease with time. That is not happening.

4

I would suggest you open up your browser’s dev tools and look at the console. I think you’ll see a message in there that will help you figure out why it isn’t working.

5

could you possibly publish this to a codepen? I mean I am technically able to build this on my own, but it would be much nicer if you already had it built on a code-pen or the like so I could just hop in and check it out.

6

Are you using the code from his github, or somewhere else?
He has two directories on his github for the countdown-timer… “setup” and “final”.

Which one are you using? I pasted the html, css and js from his “final” folder on github into a jsfiddle and it worked fine for me.

Are you just trying to see this project working on your computer, or are you trying to modify it for your own use or some other purpose somewhere?

My guess (just a guess) is that you missed some stuff when you went to do the copy/pasta., or you copied stuff from the “setup” directory, which is the unfinished project… just the starter template files.

Also, on git you can view the file as RAW and then right-click, save as and save it to your computer… no copy/pasta necessary.

Since this is a step-by-step video format tutorial and the guy shows all the solution code in the video, and makes it available on github and link is in YouTube description, I don’t think there’s any spoiler issues to worry about, but I will refrain from posting the jsfiddle link for now until you clarify what you are trying to accomplish… (ex: just trying to run the final working code, trying to build it on your own from scratch for learning, modifying it for another use case, etc).

7

Also, there’s a bug in that particular project where John Smilga neglected to consider that if

const minutes = futureDate.getMinutes();

is < 10 then

giveaway.textContent = `giveaway ends on ${weekday}, ${date} ${month} ${year} ${hours}:${minutes}am`;

won’t display the leading zero in the minutes.

const minutes = futureDate.getMinutes();

Will display

giveaway ends on Saturday, 16 April 2022 11:0am

if the minutes is 0,

giveaway ends on Saturday, 16 April 2022 11:5am

if the minutes is 5, etc.

and he uses am in the output on the page for the giveaway.textContent string.
but

const hours = futureDate.getHours()

returns an integer between 0 and 23 because it is in 24hr format.

He neglects to account for that and needs code to convert to the hours to 12 hour format, or drop the “am” in the string and just display it as 24hr format.

I opened an issue and posted a comment for that project on his github (because I don’t really use github that often and don’t know how pull requests work) pointing out those things and providing working fixes.

8

I am trying to learn to code and build the project from scratch in my own way. I have not copy pasted his code. That, I think, is the reason why I am facing difficulties to run it and the reason I posted it on the forum. If someone point out the bug, I will be thankful.

9

Have you tried bbsmooth’s suggestion?

There might be more than one issue. One that stood out to me just by looking at your code… there is a variable that is not defined. If you’re doing it locally in a browser, do as bbsmooth suggested.

  1. In Chrome, Firefox, or Edge, press Ctrl+Shift+i to open the Developers Tools.

  2. Click on the javascript console (“Console” tab, you might need to stretch out the Dev Tools to see the tab) or you can undock it to a separate window.

  3. Open your page so the script runs… see the error?

Also, double check that your query selectors are correct (I have not looked through the html/css.

Also, I think you are missing something in the first section of your function where your variable declarations are made.

getDate() returns an integer between 0 - 6, getMonth() returns an integer between 0 - 11

For more info, see :

MDN Docs Date()

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.