Pomodoro Clock

Developer
Yas
Size
3,328 Kb
Views
10,120
  1. Pomodoro Clock Previews
  2. Pomodoro Clock HTML Codes
  3. Pomodoro Clock CSS Codes
  4. Pomodoro Clock JS Codes

How do I make an pomodoro clock?

What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Yas on 05 January 2023, Thursday.

Pomodoro Clock Previews
IQ Test

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Abel|Lato|Orbitron|Droid+Sans+Mono|'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="top-bar"> <div id="session"> <span class="timer-text" id="sess">SESSION</span> <span class="timer-incrementor" id="sessAdd" onclick="addTime('session-time')">+</span> <span class="timer" id="session-time">15</span> <span class="timer-incrementor" id="sessSub" onclick="subtractTime('session-time')">-</span> </div> <div id="break"> <span class="timer-incrementor" id="breakAdd" onclick="addTime('break-time')">+</span> <span class="timer" id="break-time">2</span> <span class="timer-incrementor" id="breakSub" onclick="subtractTime('break-time')">-</span> <span class="timer-text" id="bre">BREAK</span> </div> </div> <div id="body1" onclick="timerSwitch()"> <div id="clock"> <span id="hours"></span><span id="minutes">mm</span><span id="seconds"></span> </div> <div class="instruc">click on the screen to start or stop the timer</div> <div id="color-back"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

#container { display: block; width: 100%; height: 100vh; min-height: 480px; background-color: #666;
}
#top-bar { width: 100%; height: 50px; min-width: 640px; background-color: #333;
}
#session { float: left;
}
#break { float: right;
}
.timer-text { font-size: 36px; padding: 1px 24px; font-family: 'Abel', sans-serif; float: left;
}
#sess { color: #3AB22B;
}
#bre { color: #CC5C14;
}
.timer-incrementor { color: #fff; font-size: 40px; padding: 0px 12px; font-family: 'Abel', sans-serif; float: left; margin-top: 0px;
}
.timer-incrementor:hover { cursor: pointer;
}
#body1 { display: block; top: 0px; left: 0px; height: 100%; width: 100%;
}
.timer { display: block; color: #fff; font-size: 42px; padding: 0px 8px; font-family: 'Abel', sans-serif; float: left; margin-top: -4px;
}
#clock { display:inline-block; width: 100%; font-family: 'Droid Sans Mono', monospace; Text-align: center; color: #fff; font-size: 160px; position: relative; z-index: 999; margin-top: 4%; letter-spacing: -.1em;
}
.instruc { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; margin: 0 0 6px 60px; opacity: .25; color: #fff; font-size: 40px; font-family: 'Abel', sans-serif; font-weight: 700; z-index: 999;
}
#color-back { position: absolute; left: 0; height: 96%; width: 100%; background-color: #3AB22B; z-index: 1; top: 50px;
}

Pomodoro Clock - Script Codes JS Codes

var currentTimer = "sess";
var hrs = 0;
var mins = 0;
var secs = 0;
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var running = false;
var counter;
var heightCounter;
var totalSecs;
var decreasePercent;
var bgHeight = 100;
var audio = new Audio('https://www.acoustica.com/sounds/user_requests/alarm1.wav');
var count = 0;
document.body.onkeyup = function(e){ if(e.keyCode == 32){ timerSwitch(); }
}
function setTimer(time) { console.log("time is", time); if(time >= 60) { hrs = Math.floor(time/60); mins = time % 60; hours.innerHTML = hrs + ":"; } else { mins = time; } secs = 0; minutes.innerHTML = ("0" + mins).slice(-2); seconds.innerHTML = ""; console.log("set hours:", hrs); console.log("set mins:", mins); console.log("set secs:", secs);
}
function addTime(elem) { if(running === false) { var time = document.getElementById(elem).innerHTML; time++; document.getElementById(elem).innerHTML = time; if(elem === 'session-time') { setTimer(time); } }
}
function subtractTime(elem) { var time = document.getElementById(elem).innerHTML; if(time > 1) { if(running === false) { time--; document.getElementById(elem).innerHTML = time; if(elem === 'session-time') { setTimer(time); } } }
}
function setBackground() { totalMiliSecs = mins*60; decreasePercent = ((1/totalMiliSecs)*100)/4; bgHeight = 100; console.log("decease:", decreasePercent); if(currentTimer === "sess") { document.getElementById('body1').style.backgroundColor = '#CC5C14'; document.getElementById('color-back').style.backgroundColor = '#3AB22B'; } else { document.getElementById('body1').style.backgroundColor = '#3AB22B'; document.getElementById('color-back').style.backgroundColor = '#CC5C14'; }
}
function countDown() { console.log(hrs); console.log(mins); console.log(secs); console.log("paercent", bgHeight); if(hrs <= 0 && mins <= 0 && secs <= 0) { audio.play(); if(currentTimer === "sess") { setTimer(document.getElementById("break-time").innerHTML); currentTimer = "break"; console.log("mins is:", mins); } else { setTimer(document.getElementById("session-time").innerHTML); currentTimer = "sess"; console.log("mins is:", mins); } setBackground(); } running = true; if(secs === 0) { mins--; secs = 60; } if(hrs > 0) { if(mins === 0){ hrs--; mins = 60; } hours.innerHTML = hrs + ":"; minutes.innerHTML = ("0" + mins).slice(-2) + ":"; } else { minutes.innerHTML = mins + ":"; } seconds.innerHTML = ("0" + secs).slice(-2); bgHeight -= decreasePercent; document.getElementById('color-back').style.height = bgHeight + "%"; if(count >= 4) { secs--; count = 0; } count++; console.log(count); counter = setTimeout('countDown()', 250);
}
function timerSwitch() { if(running === false) { running = true; console.log("run"); setBackground(); countDown(); } else { clearInterval(counter); console.log("stop"); running = false; }
}
setTimer(document.getElementById("session-time").innerHTML);
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Yas
Username Yas46
Uploaded January 05, 2023
Rating 3
Size 3,328 Kb
Views 10,120
Do you need developer help for Pomodoro Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yas (Yas46) Script Codes
Name
TicTacToe
Tic-tac-toe
Browser Calculator
Weather
Wikipedia Search
Tic-tac-toe React
A Pen by Yas
Quote Machine
Twitch Streamers
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!