Created
July 21, 2020 14:25
-
-
Save VasVV/cb33633d27b783a5b4a058877ac147ff to your computer and use it in GitHub Desktop.
Countdown timer
This file contains 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
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio> | |
<div class="timer"> | |
<div class="timer__controls"> | |
<button id='20sec' class="timer__button">20 Seconds</button> | |
<button id="300sec" class="timer__button">5 Minutes</button> | |
<button id="900sec" class="timer__button">15 Minutes</button> | |
<button id="1200sec" class="timer__button">20 Minutes</button> | |
<button id="3600sec" class="timer__button">1 Hour</button> | |
<input type="text" id="custom" name="minutes" placeholder="Enter Minutes"> | |
<button class="timer__button" id='send'>Start timer</button> | |
</div> | |
<div id="display"> | |
<h1 id="display__time-left"></h1> | |
<p id="display__end-time"></p> | |
</div> | |
</div> |
This file contains 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
const displayTime = document.getElementById('display__time-left'); | |
const endTime = document.getElementById('display__end-time'); | |
const sound = document.getElementById("audio"); | |
let timermins, x, interval; | |
document.getElementById('20sec').addEventListener("click", () => { | |
clearInterval(interval); | |
time(20+2); | |
}) | |
document.getElementById('300sec').addEventListener("click", () => { | |
clearInterval(interval); | |
time(300+2); | |
}) | |
document.getElementById('900sec').addEventListener("click", () => { | |
clearInterval(interval); | |
time(900+2); | |
}) | |
document.getElementById('1200sec').addEventListener("click", () => { | |
clearInterval(interval); | |
time(1200+2); | |
}) | |
document.getElementById('3600sec').addEventListener("click", () => { | |
clearInterval(interval); | |
time(3600+2); | |
}) | |
document.getElementById('send').addEventListener("click", () => { | |
clearInterval(interval); | |
timermins = document.getElementById('custom').value; | |
let minstosec = timermins* 60 + 2; | |
time(minstosec); | |
return false; | |
}); | |
const time = sec => { | |
const now = Date.now(); | |
const then = now +sec*1000; | |
displayEndTime(then); | |
interval = setInterval(() => { | |
const timeLeft = (Math.floor(then-Date.now())) / 1000; | |
if (timeLeft<1) { | |
sound.play(); clearInterval(interval); | |
} | |
displayTimeLeft(timeLeft); | |
}, 1000) | |
}; | |
const displayTimeLeft = sec => { | |
const mins = Math.floor(sec / 60); | |
const remsec = Math.floor(sec % 60); | |
let toDisplay = `${mins}:${remsec<10 ? '0' + remsec : remsec}`; | |
displayTime.textContent = toDisplay; | |
//console.log(toDisplay); | |
//console.log(sec); | |
}; | |
const displayEndTime = timestamp => { | |
const end = new Date(timestamp); | |
const hour = end.getHours(); | |
//console.log(hour); | |
const min = end.getMinutes(); | |
endTime.textContent = `The timer will stop at ${hour}:${min< 10 ? '0' + min : min}` | |
} | |
//console.log(timermins) | |
x = timermins ? timermins*60 : 2; | |
time(x); | |
This file contains 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
html { | |
box-sizing: border-box; | |
font-size: 10px; | |
background: #8E24AA; | |
background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%); | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
body { | |
margin: 0; | |
text-align: center; | |
font-family: 'Inconsolata', monospace; | |
} | |
#display__time-left { | |
font-weight: 100; | |
font-size: 20rem; | |
margin: 0; | |
color: white; | |
text-shadow: 4px 4px 0 rgba(0,0,0,0.05); | |
} | |
.timer { | |
display: flex; | |
min-height: 100vh; | |
flex-direction: column; | |
} | |
.timer__controls { | |
display: flex; | |
} | |
.timer__controls > * { | |
flex: 1; | |
} | |
.timer__controls form { | |
flex: 1; | |
display: flex; | |
} | |
.timer__controls input { | |
flex: 1; | |
border: 0; | |
padding: 2rem; | |
} | |
.timer__button { | |
background: none; | |
border: 0; | |
cursor: pointer; | |
color: white; | |
font-size: 2rem; | |
text-transform: uppercase; | |
background: rgba(0,0,0,0.1); | |
border-bottom: 3px solid rgba(0,0,0,0.2); | |
border-right: 1px solid rgba(0,0,0,0.2); | |
padding: 1rem; | |
font-family: 'Inconsolata', monospace; | |
} | |
.timer__button:hover, | |
.timer__button:focus { | |
background: rgba(0,0,0,0.2); | |
outline: 0; | |
} | |
#display { | |
flex: 1; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
} | |
#display__end-time { | |
font-size: 4rem; | |
color: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment