Skip to content

Instantly share code, notes, and snippets.

@gudnm
Last active April 8, 2018 02:27
Show Gist options
  • Save gudnm/5eae8aaac5684c06e7d32903aaf8e829 to your computer and use it in GitHub Desktop.
Save gudnm/5eae8aaac5684c06e7d32903aaf8e829 to your computer and use it in GitHub Desktop.
Simple pomodoro timer (written in vanilla JS)
<div>
<div id="history">
<ul id="completed_tasks">
</ul>
</div>
<div id="working">
Working on <span id="current_task">current task</span>, <span id="task_countdown">25:00</span> left.
</div>
<div id="break">
Completed <span id="finished_task">a task</span>. On break, <span id="break_countdown">5:00</span> left.
</div>
<div id="task">
<input type="text" placeholder="What would you like to focus on for the next 25 minutes?" id="todo" size="50">
<input type="button" value="Start" id="start">
</div>
</div>
<style type="text/css">
li {
display: inline-block;
margin: 1em;
}
#working, #break, #task {
font: 3em sans-serif;
margin: 1em;
}
input {
font: 0.5em sans-serif;
}
body {
font: 1em sans-serif;
}
</style>
<script type="text/javascript">
let current_task;
let history = JSON.parse(localStorage.getItem('history'));
let intervalId;
let pause = false;
let ul = document.getElementById('completed_tasks');
document.getElementById('working').style.display = "none";
document.getElementById('break').style.display = "none";
if (history) {
for (let task of history) {
let li = document.createElement('li');
li.appendChild(document.createTextNode(task));
ul.appendChild(li);
}
} else {
localStorage.setItem('history', JSON.stringify([]));
}
function countdown(timer, element, callback) {
intervalId = setInterval(function () {
let minutes = parseInt(timer/60, 10),
seconds = parseInt(timer%60, 10);
if (!pause) {
minutes = minutes < 10 ? "0"+minutes : minutes;
seconds = seconds < 10 ? "0"+seconds : seconds;
element.innerText = minutes+':'+seconds;
if (timer) {
timer--;
} else {
clearInterval(intervalId);
callback();
}
}
}, 1000);
}
document.getElementById('todo').onchange = function(e) {
current_task = e.target.value;
};
document.getElementById('todo').addEventListener('keyup', function(e) {
e.preventDefault();
if (e.keyCode == 13) {
document.getElementById('start').click();
}
});
document.getElementById('start').onclick = function() {
document.getElementById('current_task').innerText = current_task;
document.getElementById('task').style.display = "none";
document.getElementById('working').style.display = "block";
countdown(25*60-1, document.getElementById('task_countdown'), function() {
let history = JSON.parse(localStorage.getItem('history'));
history.push(current_task);
localStorage.setItem('history', JSON.stringify(history));
document.getElementById('finished_task').innerText = current_task;
document.getElementById('working').style.display = "none";
document.getElementById('break').style.display = "block";
countdown(5*60-1, document.getElementById('break_countdown'), function() {
window.location.reload();
});
alert("Time's up, ready to take a break?");
});
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment