Link to home
Start Free TrialLog in
Avatar of Bob Schneider
Bob SchneiderFlag for United States of America

asked on

Troubleshooting a JS Timer Display

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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial