INSTRUCCIÓN DIGITAL PARA NO EXPERTOS

Patreon Tiktok Youtube Discord Info-circle

Pomodoro escrito en Javascript

Aquí te dejo todo el código por separado, de un sistema de Pomodoro escrito en JavaScript, almacena los datos de manera persistente en el propio navegador haciendo uso de «localStorage» de JS.

El código hace uso de las librerías de Bootstrap para los elementos visuales y JQuery para mayor comodidad.

Todos los campos y etiquetas, incluyendo el código CSS, son modificables mediante campos de formulario, y se puede usar de manera local sin necesidad de servidor. Esta pensado para que pueda funcionar perfectamente dentro de la aplicación OBS (Open Broadcaster Software).



        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);

Ahora el código para el HTML, aquí tienes la interfaz gráfica, los elementos personalizables y el formulario, así como los botones de función.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

        
    </head>
    <body>
        <div class="block_label_total_blocks"><span class="label_total_blocks"></span><span class="total_blocks"></span></div>
        <div class="block_total_session"><span class="label_total_session"></span><span class="total_session"></span></div>
        <div class="block_total_short_breaks"><span class="label_total_short_breaks"></span><span class="total_short_breaks"></span></div>
        <div class="block_total_long_breaks"><span class="label_total_long_breaks"></span><span class="total_long_breaks"></span></div>
        <div class="block_session"><span class="label_session"></span><span class="actual_session_session"><span class="actual_session"></span> / <span class="pomodoro_block_label"></span></span></div>


        <div class="timer"><span class="ptimer">00:00</span></div>
        <div class="msg"><span class="msg_label">&nbsp;</span></div>


    <div class="container">

        <div class="card">
            <div class="card-body">

                <div class="row">
                    <div class="col">
                        <input class="btn btn-lg btn-primary" type="button" id="sp" value="start pomodoro">
                        <input class="btn btn-lg btn-success" type="button" id="ssb" value="start short break">
                        <input class="btn btn-lg btn-info" type="button" id="slb" value="start long break">
                        <input class="btn btn-lg btn-danger" type="button" id="reset" value="Stop All">
                    </div>
                </div>

            </div>
        </div>

        <br />

        <h2>SETTINGS</h2>
        <div class="card">
            <div class="card-body">
                
                <div class="mb-3 row">
                    <label for="msg_pomodoro" class="col-sm-2 col-form-label">P.MESSAGE</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control form-control-lg" name="msg_pomodoro" id="msg_pomodoro" placeholder="Focus time">
                            <button class="btn btn-primary set_msg_pomodoro">SET</button>
                        </div>
                    </div>
                </div>


                <div class="mb-3 row">
                    <label for="msg_short" class="col-sm-2 col-form-label">S.MESSAGE</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="text" name="msg_short" id="msg_short" placeholder="Short break">
                            <button class="btn btn-primary set_msg_short">SET</button>
                        </div>
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="msg_long" class="col-sm-2 col-form-label">L.MESSAGE</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="text" name="msg_long" id="msg_long" placeholder="Long break">
                            <button class="btn btn-primary mb-1 set_msg_long">SET</button>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="pomodoro_time" class="col-sm-2 col-form-label">P.TIME</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="number" name="pomodoro_time" id="pomodoro_time" value="25" min ="1" max="59">
                            <button class="btn btn-primary mb-1 set_pomodoro_time">SET</button>
                        </div>
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="pomodoro_short_break" class="col-sm-2 col-form-label">P.SHORT TIME</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="number" name="pomodoro_short_break" id="pomodoro_short_break" value="5" min ="1" max="59">
                            <button class="btn btn-primary mb-1 set_pomodoro_short_break">SET</button>
                        </div>
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="pomodoro_long_break" class="col-sm-2 col-form-label">P.LONG TIME</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="number" name="pomodoro_long_break" id="pomodoro_long_break" value="15" min ="1" max="59">
                            <button class="btn btn-primary mb-1 set_pomodoro_long_break">SET</button>
                        </div>
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="pomodoro_blocks" class="col-sm-2 col-form-label">POMODOROS POR BLOQUE</label>
                    <div class="col-sm-10">                
                        <div class="input-group mb-3">
                            <input class="form-control form-control-lg" type="number" name="pomodoro_blocks" id="pomodoro_blocks" value="4">
                            <button class="btn btn-primary mb-1 set_pomodoro_blocks">SET</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <br />

        <h2>LABELS</h2>
        <div class="card">
            <div class="card-body">
        

                <div class="mb-3 row">
                    <label for="label_total_blocks" class="col-sm-2 col-form-label">LABEL TOTAL BLOQUES</label>
                    <div class="col-sm-10">
                        <input class="form-control form-control-lg" type="text" name="label_total_blocks" id="label_total_blocks">
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="label_total_session" class="col-sm-2 col-form-label">LABEL TOTAL POMODOROS</label>
                    <div class="col-sm-10">
                        <input class="form-control form-control-lg" type="text" name="label_total_session" id="label_total_session">
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="label_total_short_breaks" class="col-sm-2 col-form-label">LABEL TOTAL SHORT BREAKS</label>
                    <div class="col-sm-10">
                        <input class="form-control form-control-lg" type="text" name="label_total_short_breaks" id="label_total_short_breaks">
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="label_total_long_breaks" class="col-sm-2 col-form-label">LABEL TOTAL LONG BREAKS</label>
                    <div class="col-sm-10">
                        <input class="form-control form-control-lg" type="text" name="label_total_long_breaks" id="label_total_long_breaks">
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="label_session" class="col-sm-2 col-form-label">LABEL ACTUAL SESSION</label>
                    <div class="col-sm-10">
                        <input class="form-control form-control-lg" type="text" name="label_session" id="label_session">
                    </div>
                </div>

                <div class="mb-3 row">
                    <div class="col-sm-10">
                        <input class="btn btn-lg btn-primary" type="button" name="label_session" id="save_settings" value="save labels">
                    </div>
                </div>



            </div>
        </div>


        <br />

        <h2>CSS STYLE</h2>
        <div class="card">
            <div class="card-body">


                <div class="mb-3 row">
                    <label for="label_session" class="col-sm-2 col-form-label">CSS CODE</label>
                    <div class="col-sm-10">
                        <textarea name="css_style" id="css_style" cols="30" rows="10" class="form-control form-control-lg css_style"></textarea>
                    </div>
                </div>

                <div class="mb-3 row">
                    <div class="col-sm-10">
                        <input class="btn btn-lg btn-primary set_css_style" type="button" name="set_css_style" id="set_css_style" value="Apply & save CSS">
                        <input class="btn btn-lg btn-danger reset_css_style" type="button" name="reset_css_style" id="reset_css_style" value="RESET to DEFAULT">
                    </div>
                </div>



            </div>
        </div>


    </div>





    </body>
    <script type="text/javascript" src="pomodoro.js"></script>
</html>
Categorías Sin categoría

Deja un comentario

Contacta con elGeneralista

elGeneralista EktorCaba
Entra
Regístrate
Mi cuenta
ADMIN
LEGAL
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para fines de afiliación y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad