Make a productivity timer using HTML, CSS and JavaScript
Today we are gonna make a productivity timer like the Forest App.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Timer</title>
<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=Indie+Flower&display=swap"
rel="stylesheet">
<style>
.select{
display: block;
}
#start, #stop{
display: none;
}
body{
background-color: rgb(0, 0, 0);
background-image: url(https://cdn.pixabay.com/photo/2020/12/12/13/15/leaves-
5825458_960_720.jpg);
}
h3{
color:rgb(255, 0, 0);
font-size: 100px;
font-family: 'Indie Flower', 'Orbiton', 'Calibri', 'Times New Roman', Times,
serif;
text-align: center;
margin: auto;
/* border: 7px solid gray; */
border-top: none;
border-radius: 30px;
}
p{
border-left: 10px solid rgb(0, 255, 0);
border-right: 10px solid rgb(0, 255, 0);
color:rgb(0, 255, 0);
font-size: 40px;
text-align: center;
font-family: 'Indie Flower', 'Orbiton', 'Calibri', 'Times New Roman', Times,
serif;
}
.select{
color: rgb(255, 0, 157);
background-color: black;
font-family: monospace;
font-size: 25px;
border: none;
border-left: 7px solid rgb(255, 0, 157);
}
.select:hover{
color: rgb(0, 255, 0);
border: none;
border-left: 7px solid rgb(0, 255, 0);
}
#minute{
margin-top: 20px;
}
#start{
color: rgb(255, 0, 157);
background-color: black;
font-family: monospace;
font-size: 25px;
border: none;
border-left: 7px solid rgb(255, 0, 157);
}
#start:hover{
color: rgb(0, 255, 0);
border: none;
border-left: 7px solid rgb(0, 255, 0);
}
#stop{
color: rgb(255, 0, 157);
background-color: black;
font-family: monospace;
font-size: 25px;
border: none;
border-left: 7px solid rgb(255, 0, 157);
}
#stop:hover{
color: rgb(0, 255, 0);
border: none;
border-left: 7px solid rgb(0, 255, 0);
}
#countdown{
color: rgb(255, 0, 157);
border-left: 10px solid rgb(255, 0, 157);
border-right: 10px solid rgb(255, 0, 157);
}
</style>
</head>
<body>
<h3>Welcome to Focus app!</h3>
<p>Press one of the button to enter your value in either hour or minute</p>
<button id="hour" class="select" onclick="selection(), hour()">Hour</button>
<button id="minute" class="select" onclick="selection(), minute()">Minute</button>
<button id="start" onclick="start()">Start Timer</button>
<button id="stop">Stop</button>
<p id="countdown"></p>
<script>
function selection(){
document.getElementById('hour').style.display="none";
document.getElementById('minute').style.display="none";
document.getElementById('start').style.display="block";
}
function hour(){
hours = prompt("Enter the number of hours you want to focus", "");
format = "hour";
}
function minute(){
minutes = prompt("Enter the number of minutes you want to focus", "");
format = "minute";
}
function start(){
document.getElementById('countdown').innerHTML="";
document.getElementById('countdown').style.display="none";
document.getElementById('countdown').style.color="rgb(255, 0, 157)";
document.getElementById('countdown').style.borderColor="rgb(255, 0, 157)";
document.getElementById('start').style.display="none";
document.getElementById('stop').style.display="block";
if (format=="minute"){
startDate = new Date();
min_to_mili = minutes*60000;
endDate = new Date().getTime() + min_to_mili;
var countdown = setInterval(() => {
nowDate = new Date().getTime();
timeGap = endDate - nowDate;
var cnthour = Math.floor(timeGap / (60*60*1000));
var cntminute = Math.floor((timeGap % (1000 * 60 * 60)) / (1000 * 60));
var cntsecond = Math.floor((timeGap % (1000 * 60)) / 1000);
if (cnthour<10) {
cnthour="0"+cnthour;
}
if (cntminute<10) {
cntminute="0"+cntminute;
}
if (cntsecond<10) {
cntsecond="0"+cntsecond;
}
document.getElementById('countdown').innerHTML=cnthour+":"+cntminute+":"
+cntsecond;
document.getElementById('countdown').style.display="block";
if (timeGap<0){
clearInterval(countdown);
document.getElementById('countdown').innerHTML="Congratulations,
you have focused for "+minutes+" minutes today!";
document.getElementById('countdown').style.color="rgb(0, 255, 0)";
document.getElementById('countdown').style.borderColor=
"rgb(0, 255, 0)";
window.restart = document.getElementById('stop');
restart.innerHTML="Restart";
restart.onclick = function restart() {
window.restart.style.display="none";
document.getElementById('hour').style.display="block";
document.getElementById('minute').style.display="block";
}
}
}, 1000);
}
else {
startDate = new Date();
hr_to_mili = hours*(60*60000);
endDate = new Date().getTime() + hr_to_mili;
var countdown = setInterval(() => {
nowDate = new Date().getTime();
timeGap = endDate - nowDate;
var cnthour = Math.floor(timeGap / (60*60*1000));
var cntminute = Math.floor((timeGap % (1000 * 60 * 60)) / (1000 * 60));
var cntsecond = Math.floor((timeGap % (1000 * 60)) / 1000);
if (cnthour<10) {
cnthour="0"+cnthour;
}
if (cntminute<10) {
cntminute="0"+cntminute;
}
if (cntsecond<10) {
cntsecond="0"+cntsecond;
}
document.getElementById('countdown').innerHTML=cnthour+":"+cntminute+":"
+cntsecond;
document.getElementById('countdown').style.display="block";
if (timeGap<0){
clearInterval(countdown);
document.getElementById('countdown').innerHTML="Congratulations,
you have focused for "+hours+" hours today";
document.getElementById('countdown').style.color="rgb(0, 255, 0)";
document.getElementById('countdown').style.borderColor=
"rgb(0, 255, 0)";
window.restart = document.getElementById('stop');
restart.innerHTML="Restart";
restart.onclick = function restart() {
window.restart.style.display="none";
document.getElementById('hour').style.display="block";
document.getElementById('minute').style.display="block";
}
}
}, 1000);
}
var stop = document.getElementById('stop');
stop.innerHTML="Stop";
stop.onclick = function abort() {
stop.style.display="none";
document.getElementById('hour').style.display="block";
document.getElementById('minute').style.display="block";
clearInterval(countdown);
document.getElementById('countdown').style.color="red";
document.getElementById('countdown').style.borderColor="red";
document.getElementById('countdown').innerHTML="Oops, you got distracted!";
}
}
</script>
</body>
</html>
So, here are some screenshots of the app that we made.
Comments
Post a Comment