clocks/clocks.js

var clocks = [];
var nextClock = 1;
var DateTime = luxon.DateTime;

function LoadClocks(){
    let jclocks = localStorage.getItem("clocks");
    if (jclocks){
        jclocks = JSON.parse(jclocks);
        jclocks.forEach((v)=>{
            let clock = createClock();
            clock.data().startTime = DateTime.fromSeconds(v.startTime);
            $("#clocks").append(clock);
            clocks.push(clock);
        })
    }
}

function StoreClocks(){
    let jclocks = [];
    clocks.forEach((v)=>{
        jclock = { "startTime": v.data().startTime.toSeconds() }
        jclocks.push(jclock);
    });
    localStorage.setItem("clocks",JSON.stringify(jclocks) );
}


function removeClock(clock){
    let i = clocks.indexOf(clock);
    clocks.splice(i, 1);
    $(clock).remove();
    StoreClocks();
}

function createClock(){
    let clock = $('<div class="clock border col-12 col-sm-6 col-md-4 col-lg-3"><button id="btnRemoveClock" class="float-end">[ X ]</button><h3>#' + nextClock++ + '</h3>'+
        '<div class="container"><div id="startTime" class="text-nowrap"></div></div>'+
        '<div class="container"><div id="duration" class="fs-4 text-nowrap"></div></div>'+
        '</div></div>');
    let d = clock.data();
    $("#btnRemoveClock", clock).click(()=>removeClock(clock));
    d.startTime = DateTime.now();
    return clock;
}

function updateClock(clock){
    let d = clock.data();
    let now = DateTime.now();
    let duration = now.diff(d.startTime);
    $("#startTime", clock).text(d.startTime.toFormat('dd.MM.yyyy HH:mm:ss'));
    $("#duration", clock).text(duration.toFormat("hh:mm:ss"));

    if (duration.as("seconds") < 900){
        $(clock)
            .removeClass("text-secondary text-success text-danger")
            .addClass("text-secondary");
    } else if (duration.as("seconds") < 1200){
        $(clock)
            .removeClass("text-secondary text-success text-danger")
            .addClass("text-success");
    } else {
        $(clock)
            .removeClass("text-secondary text-success text-danger")
            .addClass("text-danger");
    }

}


function updateClocks(){
    let cd = DateTime.now();
    $("#currentTime").text(cd.toFormat('dd.MM.yyyy HH:mm:ss'));
    clocks.forEach((v,i)=>updateClock(v));
}
function btnStartNewClock(){
    let clock = createClock();
    updateClock(clock);
    $("#clocks").append(clock);
    clocks.push(clock);
    StoreClocks();
}