Pulling values from script.js

Dilip · May 6

Hi, this is a beginner-level question. Please don't mind

I have an index.html and script.js. I have included script.js in index.html.

I am building a countdown timer. The script.js has values like

  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

How do I call days, hours, minutes etc to the index.html separately so that I can style the countdown timer?

Say

<div class="red">days</div> <div class="green">hours</div> ... etc

Thanks

requinix · May 6

How do you "call" them?

What's the rest of the code? Is script.js meant to directly manipulate index.html or is it a utility thing and index.html has its own Javascript code? Is your question about how to get those values into index.html or is it how to get those values into the HTML itself?

Dilip · May 6

Hi, attaching all the files, please check

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <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=Poppins:wght@300;400&display=swap" rel="stylesheet">
   
   
    <link href="/style.css" rel="stylesheet">

   
</head>
<body>

<div class="container my-5">



    <h1>Countdown Timer</h1>

    <br>

    <br>

    <h4 class="text-success">Contest Ends on 31st May 2024 GMT at 11:59:59 PM</h4>

    <br>


    <p>Time Now in GMT :</p>

    <p class="text-success" id="nowtimeutc"></p>
    <br>
    
    <p>Contest Ends on (your date)</p>

    <br>


    <div id="yourdate"></div>

    <br>


    <div class="text-danger fs-1" id="expired"></div>

   

    <br>

    <p>Time left, the contest ends in</p>

    <br>

     <!--
     <h2 class="text-danger fs-1" id="countdown"></h2>
     -->



    <br>       


    <div class="container text-center">
        <div class="row">

          <div class="col">
            <div class="fs-1" id="daysleft"></div>days
          </div>

          <div class="col">
            <div class="fs-1" id="hoursleft"></div>hours
          </div>

          <div class="col">
            <div class="fs-1" id="minutesleft"></div>minutes
          </div>

          <div class="col">
            <div class="fs-1" id="secondsleft"></div>seconds
          </div>

        </div>
      </div>

</div>


    




   <script src="/script2.js"></script>

    
</body>
</html>

let endingDate = new Date(Date.UTC(2024, 4, 31, 23,59,59)); // Enter the date in UTC
console.log(endingDate);

let yourDate = document.getElementById("yourdate"); // Get te date in your time zone
yourDate.textContent = endingDate;


let now = new Date(); // time now
console.log(now);


let difference = endingDate.getTime() - now.getTime(); // Difference between target time and time now, in milliseconds
console.log(difference);



// Time now in UTC

timeNow = new Date().toUTCString();

//timeNow = Math.floor((new Date()).getTime() / 1000);


let nowTime = document.getElementById("nowtimeutc");
nowTime.textContent = timeNow;


// Main function

function displayCountdown(){


//  input area start   

let endingDate = new Date(Date.UTC(2024, 4, 31, 23,59,59)); // Enter the date in UTC
console.log(endingDate);

let yourDate = document.getElementById("yourdate"); // Get te date in your time zone
yourDate.textContent = endingDate;


let now = new Date(); // time now
console.log(now);


let difference = endingDate.getTime() - now.getTime(); // Difference between target time and time now, in milliseconds
console.log(difference);

// input area ends


let days = Math.floor(difference / 86400000);  // divide Difference in milliseconds by no. of millisecond in a day to get days left
console.log(days);



let hours = Math.floor((difference % 86400000) / (1000 * 60 * 60)); // To get hours use modulus, get the time remaining after "days" and find how many hours in it
console.log(hours);

let minutes = Math.floor(((difference % 86400000) % (1000 * 60 * 60)) / (1000 * 60)); // finding minutes left - in effect hours - minutes in milliseconds
console.log(minutes);

let seconds = Math.floor((((difference % 86400000) % (1000 * 60 * 60)) % (1000 * 60)) / 1000);
console.log(seconds);

//let displayCount = `${days} days ${hours}  hours ${minutes}  minutes ${seconds}  seconds`;

//document.getElementById("countdown").innerHTML = displayCount;


//setTimeout(displayCountdown, 1000); // Refreshes every 1 seconds
//console.log("refreshed");


//Handling values individually 

// days

const element = document.getElementById("daysleft");
element.textContent = days;

document.getElementById("daysleft").innerHTML = myDays;
setTimeout(myDays, 1000); // Refreshes every 1 seconds


const element2 = document.getElementById("hoursleft");
element2.textContent = hours;

document.getElementById("hoursleft").innerHTML = myHours;
setTimeout(myHours, 1000); // Refreshes every 1 seconds


const element3 = document.getElementById("minutesleft");
element3.textContent = minutes;

document.getElementById("minutesleft").innerHTML = myMinutes;
setTimeout(myMinutes, 1000); // Refreshes every 1 seconds


const element4 = document.getElementById("secondsleft");
element4.textContent = seconds;

document.getElementById("secondsleft").innerHTML = mySeconds;
setTimeout(mySeconds, 1000); // Refreshes every 1 seconds





};

// check if the time difference is valid



if (difference <= 0) {

    console.log("Contest Finished, time expired");

    let expiredContest = "Contest Finished, entry time expired";

    document.getElementById("expired").innerHTML = expiredContest;

   

} else {

    //setTimeout(displayCountdown, 500); // Call updateCountdown again every second }

   // setInterval(displayCountdown, 100); // Refreshes every 5 seconds

    // To stop the automatic execution:
    //clearInterval(intervalId);

    //setTimeout(displayCountdown, 1000); // Refreshes every 1 seconds

    displayCountdown();
    console.log("printed");

   
};

//displayCountdown();

Danishhafeez · May 9

It seems like you're almost there! Your code looks good, but there are a few adjustments needed to properly update the countdown timer in your HTML.

// Main function to update countdown timer
function updateCountdown() {
    // Calculate the time difference between now and the ending date
    let difference = endingDate.getTime() - new Date().getTime();

    // Check if the difference is valid
    if (difference <= 0) {
        console.log("Contest Finished, time expired");
        let expiredContest = "Contest Finished, entry time expired";
        document.getElementById("expired").textContent = expiredContest;
    } else {
        // Calculate days, hours, minutes, and seconds
        let days = Math.floor(difference / (1000 * 60 * 60 * 24));
        let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((difference % (1000 * 60)) / 1000);

        // Update HTML elements with the calculated values
        document.getElementById("daysleft").textContent = days;
        document.getElementById("hoursleft").textContent = hours;
        document.getElementById("minutesleft").textContent = minutes;
        document.getElementById("secondsleft").textContent = seconds;

        // Schedule the next update after 1 second
        setTimeout(updateCountdown, 1000);
    }
}

// Call the updateCountdown function to start the countdown
updateCountdown();

With these changes, your countdown timer should update every second, displaying the correct values for days, hours, minutes, and seconds until the contest ends. Let me know if you have any questions or encounter any issues!

Best Regard

Danish Hafeez | QA Assistant

ICTInnovations

Strider64 · May 10

Here's a countdown clock that I did years ago, but I recently updated it a couple of months ago.

countdown.js file

"use strict";

/**
 * Calculates the time remaining until a specified end time.
 * @param {string} endtime - The end time in a format parseable by Date.parse.
 * @returns {object} An object containing the total milliseconds and the breakdown in days, hours, minutes, and seconds.
 */
const getTimeRemaining = (endtime) => {
    const total = Date.parse(endtime) - Date.now();  // Calculate the difference in milliseconds from now to the end time
    return {
        total,
        days: Math.floor(total / (1000 * 60 * 60 * 24)), // Convert milliseconds to days
        hours: Math.floor((total / (1000 * 60 * 60)) % 24), // Convert milliseconds to hours, modulo 24
        minutes: Math.floor((total / 1000 / 60) % 60), // Convert milliseconds to minutes, modulo 60
        seconds: Math.floor((total / 1000) % 60) // Convert milliseconds to seconds, modulo 60
    };
};

/**
 * Initializes a countdown clock on the webpage.
 * @param {string} id - The ID suffix of the countdown clock container.
 * @param {Date} endtime - The countdown end time.
 */
const initializeClock = (id, endtime) => {
    const clock = document.getElementById(`display_clock${id}`); // Access the clock element by ID
    if (!clock) {
        console.error(`Clock with id 'display_clock${id}' not found.`);
        return; // Exit if no element is found
    }

    // Map each time unit to its corresponding DOM element within the clock container
    const fields = ['days', 'hours', 'minutes', 'seconds'].map(field =>
        clock.querySelector(`.${field}`)
    );

    if (fields.some(element => element === null)) { // Check if any elements are missing
        console.error('One or more clock elements not found:', fields);
        return; // Exit if missing elements are found
    }

    // Updates the countdown clock display every second
    const updateClock = () => {
        const { total, days, hours, minutes, seconds } = getTimeRemaining(endtime);

        // Update each field in the DOM with the new time
        [days, hours, minutes, seconds].forEach((val, i) => {
            fields[i].textContent = String(val).padStart(2, '0'); // Format with leading zeros
        });

        if (total <= 0) {
            clock.textContent = "Contest Finished, entry time expired";
            clearInterval(timeInterval); // Stop the timer if the countdown is complete
        }
    };

    updateClock();
    const timeInterval = setInterval(updateClock, 1000); // Set the timer to update every second
};

/**
 * Fetches the countdown data and initializes the clock using that data.
 */
const fetchRoutine = () => {
    fetch('data.json') // Fetch the countdown data from a local JSON file
        .then(response => response.json())
        .then(data => {
            document.getElementById("countdown_date").textContent = data.date_format; // Set the formatted date
            document.getElementById("display_title").textContent = data.title; // Set the event title
            initializeClock(1, new Date(Date.parse(data.time_left))); // Initialize the clock with the fetched data
        })
        .catch(error => {
            console.error('Fetch error:', error); // Log any errors during fetch
        });
};

// Ensure all DOM content is loaded before executing the fetch routine.
document.addEventListener('DOMContentLoaded', fetchRoutine);

it pulls in data from data.json file

{
  "time_left": "2024-08-27T11:59:59-04:00",
  "date_format": "Tuesday - August 28, 2024",
  "title": "Countdown to "
}

here is the HTML file:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countdown Clock</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="countdown.css">
</head>
<body>

<div class="info">
    <h1 id="display_title"></h1>
    <h2 id="countdown_date"></h2>
</div>
<div id="display_clock1">
    <figure class="box">
        <div class="days"></div>
        <figcaption>Days</figcaption>
    </figure>
    <figure class="box">
        <div class="hours"></div>
        <figcaption>Hours</figcaption>
    </figure>
    <figure class="box">
        <div class="minutes"></div>
        <figcaption>Minutes</figcaption>
    </figure>
    <figure class="box">
        <div class="seconds"></div>
        <figcaption>Seconds</figcaption>
    </figure>
</div>

<script src="countdown.js"></script>

</body>
</html>

and even the css file countdown.css

*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.info {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    text-align: center;
    padding: 2px;
    margin: 10px auto;
}

div.info::after { content: ''; display: block; clear: both; }

h1 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1.2em;
    line-height: 1.5;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-style: italic;
    font-weight: 300;
}

div#display_clock1 {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 5px auto;
    background-color: pink;
}
div#display_clock1 figure.box {
    float: left;
    display: block;
    width: 100%;
    max-width: 40px;
    height: 70px;
    color: #fff;
    text-align: center;
    padding: 0;
    margin-left: 5px;
}

div#display_clock1 figure.box div {
    background-color: #2e2e2e;
    height: 50px;
    line-height: 50px;
}

div#display_clock1 figure.box figcaption {
    font-family: Arial, Helvetica, sans-serif;

    font-size: 0.6em;
    line-height: 20px;
    font-weight: bold;
    color: #000;
}

It's a simple countdown clock, but can be modify to enhance. I did check it out that it still runs properly. Fetching the clock can be modify to add even more countdown counters by the `id` in this example there is only 1.

Danishhafeez · May 10

Modify the HTML: Add additional countdown containers with unique IDs.

Modify the JavaScript:

Update the initializeClock function to accept a unique id for each countdown.

Update the fetchRoutine function to fetch data for multiple countdowns and initialize clocks accordingly.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countdown Clock</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="countdown.css">
</head>
<body>

<div class="info">
    <h1 id="display_title"></h1>
    <h2 id="countdown_date"></h2>
</div>
<div id="countdown_container1" class="countdown-container">
    <div id="display_clock1">
        <figure class="box">
            <div class="days"></div>
            <figcaption>Days</figcaption>
        </figure>
        <figure class="box">
            <div class="hours"></div>
            <figcaption>Hours</figcaption>
        </figure>
        <figure class="box">
            <div class="minutes"></div>
            <figcaption>Minutes</figcaption>
        </figure>
        <figure class="box">
            <div class="seconds"></div>
            <figcaption>Seconds</figcaption>
        </figure>
    </div>
</div>

<div id="countdown_container2" class="countdown-container">
    <!-- Another countdown container can be added here -->
</div>

<script src="countdown.js"></script>

</body>
</html>

In the JavaScript (countdown.js), you would modify the functions accordingly:

const initializeClock = (containerId, clockId, endtime) => {
    const clock = document.getElementById(clockId);
    if (!clock) {
        console.error(`Clock with id '${clockId}' not found.`);
        return;
    }

    const fields = ['days', 'hours', 'minutes', 'seconds'].map(field =>
        clock.querySelector(`.${field}`)
    );

    if (fields.some(element => element === null)) {
        console.error('One or more clock elements not found:', fields);
        return;
    }

    const updateClock = () => {
        const { total, days, hours, minutes, seconds } = getTimeRemaining(endtime);

        [days, hours, minutes, seconds].forEach((val, i) => {
            fields[i].textContent = String(val).padStart(2, '0');
        });

        if (total <= 0) {
            clock.textContent = "Contest Finished, entry time expired";
            clearInterval(timeInterval);
        }
    };

    updateClock();
    const timeInterval = setInterval(updateClock, 1000);
};

const fetchRoutine = () => {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            document.getElementById("countdown_date").textContent = data.date_format;
            document.getElementById("display_title").textContent = data.title;
            initializeClock("countdown_container1", "display_clock1", new Date(Date.parse(data.time_left)));
            // Initialize additional countdowns here if needed
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
};

document.addEventListener('DOMContentLoaded', fetchRoutine);

With these modifications, you can add multiple countdown containers to your HTML, and the JavaScript will handle initializing countdowns for each container separately based on the fetched data.

Best Regard

danish Hafeez | QA Assistant

https://www.ictinnovations.com

https://www.ictbroadcast.com

Sign In

Pulling values from script.js

Recommended Posts

Dilip

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Dilip

Link to comment

Share on other sites

Danishhafeez

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Danishhafeez

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information