Created
August 22, 2021 17:42
-
-
Save hlorand/999c94ef5865bf532c59db17781d73ac to your computer and use it in GitHub Desktop.
Simple JavaScript pomoodro timer.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Pomodoro timer | |
| -------------- | |
| The counter works unreliably when the tab is inactive (the browser slows down the counter). | |
| TODO: Rewrite to date + time based solution instead of setInterval. | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Pomodoro timer</title> | |
| <style> | |
| button{ | |
| font-size: xx-large; | |
| margin-right: 10px; | |
| } | |
| #timer, #pomodorocount, #breakcount{ | |
| font-size: 100px; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body onload="load();"> | |
| <button id="start" onclick="start(false);">🍅 START</button> | |
| <button id="start" onclick="start(true);">⏲️ BREAK</button> | |
| <button id="start" onclick="pause();">⏸️ PAUSE</button> | |
| <button id="start" onclick="reset();">🔄 RESET</button> | |
| <button id="start" onclick="del();">🧹 DELETE</button> | |
| <span id="timer">00:00</span> | |
| <span id="pomodorocount">0 x 🍅</span> | |
| <span id="breakcount">0 x ⏲️</span> | |
| <script> | |
| var pomodorolength = 20; | |
| var pomodorocount = 0; | |
| var breaklength = 10; | |
| var breakcount = 0; | |
| var elapsedsec = 0; | |
| var timer; | |
| function start(isBreak = false){ | |
| if(!timer) timer = setInterval(function(){ | |
| // increase elapsed time | |
| elapsedsec++; | |
| // calculate minutes and seconds | |
| minutes = parseInt(elapsedsec / 60); | |
| seconds = elapsedsec % 60; | |
| // alert if 1 pomodoro done | |
| if(!isBreak && minutes == pomodorolength) { | |
| reset(); | |
| pomodorocount++; | |
| update(); | |
| window.open("https://dummyimage.com/1280x720/440000/888888&text=Pomodoro!"); | |
| } | |
| // alert if 1 break done | |
| if(isBreak && minutes == breaklength){ | |
| reset(); | |
| breakcount++; | |
| update(); | |
| window.open("https://dummyimage.com/1280x720/004400/888888&text=Break!"); | |
| } | |
| // add leading zeroes | |
| if(minutes < 10) minutes = "0" + minutes; | |
| if(seconds < 10) seconds = "0" + seconds; | |
| // color according to if it is a pomodoro or a break | |
| if(isBreak){ | |
| document.getElementById("timer").style.color = "green"; | |
| } else { | |
| document.getElementById("timer").style.color = "red"; | |
| } | |
| // display time | |
| document.getElementById("timer").innerHTML = minutes + ":" + seconds; | |
| },1000); | |
| } | |
| // pause timer | |
| function pause(){ | |
| clearInterval(timer); | |
| } | |
| // reset timer | |
| function reset(){ | |
| clearInterval(timer); | |
| timer = null; | |
| elapsedsec = 0; | |
| document.getElementById("timer").innerHTML = "00:00"; | |
| } | |
| // updates pomodoro and break counter | |
| function update(){ | |
| save(); | |
| document.getElementById("pomodorocount").innerHTML = pomodorocount+ " x 🍅 = " + (pomodorocount*pomodorolength) + " min"; | |
| document.getElementById("breakcount").innerHTML = breakcount+ " x ⏲️ = " + (breakcount*breaklength) + " min"; | |
| } | |
| // save pomodoro and break count to localstorage | |
| function save(){ | |
| var timerdata = { | |
| "pomodorocount" : pomodorocount, | |
| "breakcount" : breakcount | |
| }; | |
| localStorage.timerdata = JSON.stringify(timerdata); | |
| } | |
| // load pomodoro and break count from localstorage | |
| function load() { | |
| var timerdata = JSON.parse(localStorage.timerdata || null) || {}; | |
| if(timerdata){ | |
| if (pomodorocount) pomodorocount = timerdata.pomodorocount; | |
| if (breakcount) breakcount = timerdata.breakcount; | |
| } | |
| update(); | |
| } | |
| // delete pomodoro and break count from localstorage | |
| function del(){ | |
| localStorage.timerdata = null; | |
| pomodorocount = 0; | |
| breakcount = 0; | |
| update(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment