Skip to content

Instantly share code, notes, and snippets.

@h4xnoodle
Created April 26, 2020 19:43
Show Gist options
  • Save h4xnoodle/06e0f7a9aaf235bb7f26bc7694fecf53 to your computer and use it in GitHub Desktop.
Save h4xnoodle/06e0f7a9aaf235bb7f26bc7694fecf53 to your computer and use it in GitHub Desktop.
quarantine timers
<html>
<head>
<style rel='stylesheet'>
body {
text-align: center;
padding: 130px 0 0 0;
}
div {
text-align: center;
font-family: 'Roboto', sans-serif;
border:2px solid #ddd;
display:inline-block;
padding:20px;
margin:0 30px;
background:#fbfbfb;
}
.timer h2 {
font-size: 40px;
font-weight:400;
margin:10px 0;
}
.timer span {
font-size: 50px;
display: block;
padding: 10px 0;
}
.timer button {
padding: 10px 20px;
border-collapse: collapse;
font-size: 40px;
color: #444;
}
.water {
color: #0B486B;
}
.exercises {
color: #3B8686;
}
</style>
</head>
<body>
<div class='timer water'>
<h2>Water</h2>
<span id='water'></span>
<button id='water-reset'>Drank some</button>
</div>
<div class='timer exercises'>
<h2>Exercises</h2>
<span id='exercises'></span>
<button id='exercises-reset'>Did them</button>
</div>
<script>
function countdown(element, resetbtn, seconds) {
var ogseconds = seconds;
var left = seconds;
display();
var timer = setInterval(tick, 1000);
resetbtn.addEventListener('click', function() {
reset();
});
function reset() {
left = ogseconds;
display();
}
function tick() {
left--;
display();
}
function display() {
if (left <= 0) {
element.innerHTML = "Now!!!";
return;
}
var d = "";
var h = String(Math.floor(left/3600));
var m = String(Math.floor((left-h*3600)/60));
var s = String(left - h*3600 - m*60);
d = h.padStart(2, "0") + ":" + m.padStart(2, "0") + ":" + s.padStart(2, "0");
element.innerHTML = d;
}
}
function exercises() {
var time = document.getElementById('exercises');
var btn = document.getElementById('exercises-reset');
var every = 2*60*60;
countdown(time, btn, every);
}
function water() {
var time = document.getElementById('water');
var btn = document.getElementById('water-reset');
var every = 30*60;
countdown(time, btn, every);
}
water();
exercises();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment