givin.school/timer.js

function fancyTimeFormat(duration) {
    // Hours, minutes and seconds
    const hrs = ~~(duration / 3600);
    const mins = ~~((duration % 3600) / 60);
    const secs = ~~duration % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    let ret = "";

    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;

    return ret;
}

function play_ding() {
    let ding_sound = new Audio('ding-sound-effect_2.mp3');
    ding_sound.play();
}

function startTimerOnElement() {

    let currElement = $('#task_list > .current_element').first();
    if (!currElement.length) {
        $('#timer_reset_btn').prop('disabled', true);
        $('#timer_start_btn').prop('disabled', false);
        $('#spent_time').text('0:00');
        $('#element_title').text('');
        return;
    }

    let element_ttl = currElement.data('ttl');

    let title = currElement.html();

    if (title) {
        let short_title = '';
        $($.parseHTML(title)).filter('b').each(function () {
            short_title += $(this).text() + ' ';
        });
        $('#element_title').text(short_title);
    }

    let timer = element_ttl;

    timerObj = setInterval(function () {
        $('#spent_time').text(fancyTimeFormat(element_ttl - timer));
        $('#rest_time').text(fancyTimeFormat(timer));

        if (!timer--) {
            clearInterval(timerObj);
            //play_ding();

            timer = 0;

            let nextElement = currElement.parent().children('li.current_element + li');

            if (nextElement) {
                currElement.removeClass('current_element');
                nextElement.addClass('current_element');
                startTimerOnElement();
            }
        }
    }, 1000);
}

let timerObj;

$(document).ready(function () {
    let total_time = 0;
    $('#task_list').children('li').each(function () {

        let timestr = fancyTimeFormat($(this).data('ttl'));
        total_time += $(this).data('ttl');

        /*
                        $(this).on('click', function () {
                            $(this).parent().children('.current_element').removeClass('current_element');
                            $(this).addClass('current_element');
                        });
        */
    });

    $('#total_rest_time').text(fancyTimeFormat(total_time));


    $('#timer_start_btn').on('click', function () {
        $(this).prop('disabled', true);
        $('#timer_reset_btn').prop('disabled', false);
        //play_ding();

        if (!$('#task_list > .current_element').length) {
            $('#task_list > li').first().addClass('current_element');
        }

        startTimerOnElement();
    })

    $('#timer_reset_btn').on('click', function () {
        if (!timerObj) {
            return;
        }

        clearInterval(timerObj);
        startTimerOnElement();
    });
});