Pomodoro escrito en Javascript

        if (!localStorage.total_blocks) {
            localStorage.total_blocks = 0;
        }

        if (!localStorage.total_pomodoro_sessions) {
            localStorage.total_pomodoro_sessions = 0;
        }

        if (!sessionStorage.actual_pomodoro_session) {
            sessionStorage.actual_pomodoro_session = 1;
        }

        if (!localStorage.total_short_breaks) {
            localStorage.total_short_breaks = 0;
        }

        if (!localStorage.total_long_breaks) {
            localStorage.total_long_breaks = 0;
        }       

        if (!localStorage.msg_pomodoro) {
            localStorage.msg_pomodoro = "";
        }

        if (!localStorage.msg_short) {
            localStorage.msg_short = "";
        }   

        if (!localStorage.msg_long) {
            localStorage.msg_long = "";
        }   


        if (!localStorage.pomodoro_time) {
            localStorage.pomodoro_time = 25;
        }  

        if (!localStorage.pomodoro_short_break) {
            localStorage.pomodoro_short_break = 5;
        }  

        if (!localStorage.pomodoro_long_break) {
            localStorage.pomodoro_long_break = 15;
        }  

        if (!localStorage.pomodoro_blocks) {
            localStorage.pomodoro_blocks = 4;
        }  
        

        if (!localStorage.label_total_blocks) {
            localStorage.label_total_blocks = "T.BLOCKS: ";
        } 

        if (!localStorage.label_total_session) {
            localStorage.label_total_session = "T.POMODOROS: ";
        } 

        if (!localStorage.label_total_short_breaks) {
            localStorage.label_total_short_breaks = "T.SHORT BREAKS: ";
        } 

        if (!localStorage.label_total_long_breaks) {
            localStorage.label_total_long_breaks = "T.LONG BREAKS: ";
        } 

        if (!localStorage.label_session) {
            localStorage.label_session = "SESION ACTUAL: ";
        } 






        $(".total_session").html(localStorage.total_pomodoro_sessions);
        $(".actual_session").html(sessionStorage.actual_pomodoro_session);
        $(".total_blocks").html(localStorage.total_blocks);
        $(".total_short_breaks").html(localStorage.total_short_breaks);
        $(".total_long_breaks").html(localStorage.total_long_breaks);
        $(".pomodoro_block_label").html($("#pomodoro_blocks").val());
        $("#css_style").val(localStorage.default_css_style);



        //LABELS
        $(".label_total_blocks").html(localStorage.label_total_blocks);
        $(".label_total_session").html(localStorage.label_total_session);
        $(".label_total_short_breaks").html(localStorage.label_total_short_breaks);
        $(".label_total_long_breaks").html(localStorage.label_total_long_breaks);
        $(".label_session").html(localStorage.label_session);


        $("#label_total_blocks").val(localStorage.label_total_blocks);
        $("#label_total_session").val(localStorage.label_total_session);
        $("#label_total_short_breaks").val(localStorage.label_total_short_breaks);
        $("#label_total_long_breaks").val(localStorage.label_total_long_breaks);
        $("#label_session").val(localStorage.label_session);




        $("#msg_pomodoro").val(localStorage.msg_pomodoro);
        $("#msg_short").val(localStorage.msg_short);
        $("#msg_long").val(localStorage.msg_long);


        $("#pomodoro_time").val(localStorage.pomodoro_time);
        $("#pomodoro_short_break").val(localStorage.pomodoro_short_break);
        $("#pomodoro_long_break").val(localStorage.pomodoro_long_break);
        $("#pomodoro_blocks").val(localStorage.pomodoro_blocks);


        $(".ptimer").html($("#pomodoro_time").val().padStart(2, '0') + ":00");






        function fn_pomodoro(classname){

                    $(".ptimer").html($(classname).val().padStart(2, '0') + ":00");
                    $(".msg_label").html($("#msg_pomodoro").val());

                    const unixTime = Math.floor(Date.now() / 1000);
                    var pomodoro_time = $(classname).val()*60;

                    if (typeof pomodoro_timer !== 'undefined') {clearInterval(pomodoro_timer)};

                    pomodoro_timer = setInterval(function(){

                        var remaining_secs = (unixTime + pomodoro_time)- (Math.floor(Date.now() / 1000));

                        let unix_timestamp = remaining_secs;
                        var date = new Date(unix_timestamp * 1000);
                        var hours = date.getHours();
                        var minutes = "0" + date.getMinutes();
                        var seconds = "0" + date.getSeconds();
                        var formattedTime = minutes.substr(-2) + ':' + seconds.substr(-2);

                        if(remaining_secs > 0){
                            $(".ptimer").html(formattedTime);
                        } else {
                            clearInterval(pomodoro_timer);
                            $(".ptimer").html("00:00");
                            $(".msg_label").html("");


                            localStorage.total_pomodoro_sessions = Number(localStorage.total_pomodoro_sessions) + 1;
                            if(sessionStorage.actual_pomodoro_session >= Number($("#pomodoro_blocks").val()) ){
                                sessionStorage.actual_pomodoro_session = 1;

                                localStorage.total_blocks = Number(localStorage.total_blocks) + 1;
                                $(".total_blocks").html(localStorage.total_blocks);
                            }else{
                                sessionStorage.actual_pomodoro_session = Number(sessionStorage.actual_pomodoro_session) + 1;
                            }

                            $(".total_session").html(localStorage.total_pomodoro_sessions);
                            $(".actual_session").html(sessionStorage.actual_pomodoro_session);
                        }
                        



                    },1000)


        }





        function fn_break(classname){

                $(".ptimer").html($(classname).val().padStart(2, '0') + ":00");
                $(".msg_label").html(((classname === "#pomodoro_short_break") ? $("#msg_short").val():$("#msg_long").val()));

                const unixTime = Math.floor(Date.now() / 1000);
                var pomodoro_time = $(classname).val()*60;

                if (typeof pomodoro_timer !== 'undefined') {clearInterval(pomodoro_timer)};

                pomodoro_timer = setInterval(function(){

                    var remaining_secs = (unixTime + pomodoro_time)- (Math.floor(Date.now() / 1000));
                    let unix_timestamp = remaining_secs;
                    var date = new Date(unix_timestamp * 1000);
                    var hours = date.getHours();
                    var minutes = "0" + date.getMinutes();
                    var seconds = "0" + date.getSeconds();
                    var formattedTime = minutes.substr(-2) + ':' + seconds.substr(-2);

                    if(remaining_secs > 0){
                        $(".ptimer").html(formattedTime);
                    } else {
                        clearInterval(pomodoro_timer);
                        $(".ptimer").html("00:00");
                        $(".msg_label").html("");

                        if(classname === "#pomodoro_short_break"){
                            localStorage.total_short_breaks = Number(localStorage.total_short_breaks) + 1;
                            $(".total_short_breaks").html(localStorage.total_short_breaks);
                        }else{
                            localStorage.total_long_breaks = Number(localStorage.total_long_breaks) + 1;
                            $(".total_long_breaks").html(localStorage.total_long_breaks);
                        }
                    }

                },1000)


        }



        function set_default_value(value){

            if (typeof pomodoro_timer === 'undefined') {

                if ((value) || (value !="")) {
                    $(".ptimer").html(value + ":00");
                }else{
                    $(".ptimer").html("00:00");
                }

                if(Number(value) > 59){
                    $(".ptimer").html("00:00");
                }

            };


        }











        $("#sp").on("click",function(e){
            fn_pomodoro("#pomodoro_time");
        });


        $("#ssb").on("click",function(e){
            fn_break("#pomodoro_short_break");
        });


        $("#slb").on("click",function(e){
            fn_break("#pomodoro_long_break");
        });

        $("#reset").on("click",function(e){
            if (typeof pomodoro_timer !== 'undefined') {
                clearInterval(pomodoro_timer);
                $(".ptimer").html("00:00");
                $(".msg_label").html("");
            };
            
        });



        $(".set_pomodoro_time").on("click",function(e){
            set_default_value($("#pomodoro_time").val().padStart(2, '0'));
            localStorage.pomodoro_time = $("#pomodoro_time").val();
        });        

        $(".set_pomodoro_short_break").on("click",function(e){
            set_default_value($("#pomodoro_short_break").val().padStart(2, '0'));
            localStorage.pomodoro_short_break = $("#pomodoro_short_break").val();
        });

        $(".set_pomodoro_long_break").on("click",function(e){
            set_default_value($("#pomodoro_long_break").val().padStart(2, '0'));
            localStorage.pomodoro_long_break = $("#pomodoro_long_break").val();
        });

        $(".set_pomodoro_blocks").on("click",function(e){
            localStorage.pomodoro_blocks = $("#pomodoro_blocks").val();
        });


        $(".set_css_style").on("click",function(e){
            localStorage.default_css_style = $("#css_style").val();

            var sheet = document.createElement('style');
            sheet.innerHTML = localStorage.default_css_style;
            document.body.appendChild(sheet);

        });
        

        $(".set_msg_pomodoro").on("click",function(e){
            localStorage.msg_pomodoro = $("#msg_pomodoro").val();
        });

        $(".set_msg_short").on("click",function(e){
            localStorage.msg_short = $("#msg_short").val();
        });

        $(".set_msg_long").on("click",function(e){
            localStorage.msg_long = $("#msg_long").val();
        });





        $("#save_settings").on("click",function(e){
            localStorage.label_total_blocks = $("#label_total_blocks").val();
            localStorage.label_total_session = $("#label_total_session").val();
            localStorage.label_total_short_breaks = $("#label_total_short_breaks").val();
            localStorage.label_total_long_breaks = $("#label_total_long_breaks").val();
            localStorage.label_session = $("#label_session").val();

            $(".label_total_blocks").html(localStorage.label_total_blocks);
            $(".label_total_session").html(localStorage.label_total_session);
            $(".label_total_short_breaks").html(localStorage.label_total_short_breaks);
            $(".label_total_long_breaks").html(localStorage.label_total_long_breaks);
            $(".label_session").html(localStorage.label_session);


        });









        var default_css_style = `body{
                font-family: 'Montserrat', sans-serif;
            }

            .ptimer{
                font-size: 36px;
                font-weight: 600;
            }

            .msg_label {
                font-size: 24px;
                font-weight: 600;       
            }


            .actual_session_session{
                font-size: 16px;
                font-weight: 600;
            }

            .actual_session_session .actual_session{
                color: #ff0000;
            }

            .actual_session_session .pomodoro_block_label{
                color: #00d362;
            }


            .total_blocks{color: #0e00d3;}
            .total_session{color: #0e00d3;}
            .total_short_breaks{color: #0e00d3;}
            .total_long_breaks{color: #0e00d3;}
            
            div.block_label_total_blocks{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            div.block_total_session{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            div.block_total_short_breaks{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            div.block_total_long_breaks{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            div.block_session{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }

            div.timer{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            div.msg{ margin:20px; border: 4px dashed #ff0000; padding: 20px; }
            
            `;




        $("#reset_css_style").on("click",function(e){
            localStorage.default_css_style = default_css_style;
            $("#css_style").val(default_css_style);

            var sheet = document.createElement('style');
            sheet.innerHTML = localStorage.default_css_style;
            document.body.appendChild(sheet);
        });



        if (!localStorage.default_css_style) {
            localStorage.default_css_style = default_css_style;
        };


        var sheet = document.createElement('style');
        sheet.innerHTML = localStorage.default_css_style;
        document.body.appendChild(sheet);