Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Callback Functions in JavaScript Callbacks with Timers Using a Repeat Timer with setInterval

Martin Larsen
Martin Larsen
9,839 Points
Posted by Martin Larsen
Martin Larsen
9,839 Points

Set start point for clock and count up

Hello.

I was trying to modify the clock code to use as a count up function.

The Problem: I have a number in Milliseconds provided by the server (Firebase). All I want is to set the start time of the clock to the number form the server and then count up.

The final result 01:29:45 and then count up.

I have been on Google and spend hours on this.

Does anyone know this.

Thanks

miikis
miikis
44,957 Points

Can you post your code? Difficult to help without that data.

1 Answer

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Martin. 6 months on, you may well have moved on to pastures new, but having just done this 'callback' course, I was inspired by your challenge. index.html is Andrew's (the teacher) and it now points at my countUp.js file. I pinched the 'pad' idea from Andrew. I wasn't sure if your Firebase server counts mS from Jan 1st 1970 or simply from midnight last night, but this solution should handle both. The function is set to run once every second and when it does, it adds a second to the initial time provided.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
        <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
        <section id='clock'>
            Clock Goes Here
        </section>
        <script src='countUp.js'></script>
    </body>
</html>

countUp.js

const clockSection = document.getElementById("clock");

// Time periods in mS
const day = 86400000;
const hour = 3600000;
const min = 60000;
const sec = 1000;


//Just before 1am in mS = 3590000
//Just before Midnight in mS = 86395000
//Time while I was editing this code in mS = 1518006858146

let timeMs = 5384000;

function getFirebaseTime() {
    function pad(number) {
      if (number < 10) {
        return "0" + number;
      } else {
        return number;
      }
    }
    timeMs = timeMs % day;
    timeMs += sec;

    const hh = pad(parseInt(timeMs/hour));
    const mm = pad(parseInt((timeMs % hour) / min));
    const ss = pad(parseInt(((timeMs % hour) % min) / sec));

    clockSection.textContent = `${hh}:${mm}:${ss}`;
}

setInterval(getFirebaseTime, 1000);