troubleshooting Question

Troubleshooting a JS Timer Display

Avatar of Bob Schneider
Bob SchneiderFlag for United States of America asked on
JavaScriptAJAXTroubleshooting
1 Comment1 Solution11 ViewsLast Modified:
Hi.  I found a timer display that I like but it is not working.  Here is the html:
[code]
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

            <h1 class="bg-danger" style="text-align:center;">
                <span id="timer-minutes">00</span> :
                <span id="timer-seconds">00</span>
            </h1>
[/code]

Here is the js:
[code]
<script>
    $(function() {
    var TTimer = {
        startedTime: new Date(),
        restoredFromSession: false,
        started: false,
        minutes: 0,
        seconds: 0,
        
        tick: function tick() {
        // Since setInterval is not reliable in inactive windows/tabs we are using date diff.
        var diffInSeconds = Math.floor((new Date() - this.startedTime) / 1000);
        this.minutes = Math.floor(diffInSeconds / 60);
        this.seconds = diffInSeconds - this.minutes * 60;
        this.render();
        this.updateSession();
        },
        
        utilities: {
        pad: function pad(number) {
            return number < 10 ? '0' + number : number;
        }
        },
        
        container: function container() {
        return $(document);
        },
        
        render: function render() {
        this.container().find('#timer-minutes').text(this.utilities.pad(this.minutes));
        this.container().find('#timer-seconds').text(this.utilities.pad(this.seconds));

        },
        
        updateSession: function updateSession() {
        sessionStorage.setItem('timerStartedTime', this.startedTime);
        },
        
        clearSession: function clearSession() {
        sessionStorage.removeItem('timerStartedTime');
        },
        
        restoreFromSession: function restoreFromSession() {
        // Using sessionsStorage to make the timer persistent
        if (typeof Storage == "undefined") {
            console.log('No sessionStorage Support');
            return;
        }

        if (sessionStorage.getItem('timerStartedTime') !== null) {
            this.restoredFromSession = true;
            this.startedTime = new Date(sessionStorage.getItem('timerStartedTime'));
        }
        },
        
        start: function start() {
        this.restoreFromSession();
        this.stop();
        this.started = true;
        this.tick();
        this.timerId = setInterval(this.tick.bind(this), 1000);
        },
        
        stop: function stop() {
        this.started = false;
        clearInterval(this.timerId);
        this.render();
        }
    };

    TTimer.start();
</script>
[/code]

I have the js in the head section.  I would appreciate any help I can get, including any suggestions on how I can troubleshoot this myself with developer tools in my browser.  Thank you very much!
ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros