How To Create Workout Timer in Javascript | Workout Timer in Javascript Using HTML CSS Javascript
How To Create Workout Timer in Javascript | Workout Timer in Javascript Using HTML CSS Javascript
- Look this is the project with the basic functionality of a stopwatch.
- If you are looking at the project then there is a work and break section even you can increase and decrease or set it accordingly.
- In the end, it has similar functionality to a stopwatch as a start, stop and pause.
HTML SECTION
- First, we have a container that will enclose all other parts of the timer project.
- First, we have two breaks and work displays with increments and decrements.
- Then we have a display screen as a set timer and with a message.
- In the end, we have step watch functionality.
<div class="container">
<div class="main-title">Workout timer</div>
<div class="timer-settings-container">
<div class="pomodoro-title">Work</div>
<div class="break-title">Break</div>
<div class="pomodoro-container">
<button aria-label="Decrease Pomodoro timer length" class="decrementPomodoroTimer" onclick="decrementPomodoroTimer()"><i class="fa fa-minus"></i></button>
<div class="pomodoro-timer"></div>
<button aria-label="Increase Pomodoro timer length" class="incrementPomodoroTimer" onclick="incrementPomodoroTimer()"><i class="fa fa-plus"></i></button>
</div>
<div class="break-container">
<button aria-label="Decrease break timer length" class="decrementBreakTimer" onclick="decrementBreakTimer()"><i class="fa fa-minus"></i></button>
<div class="break-timer"></div>
<button aria-label="Increase break timer length" class="incrementBreakTimer" onclick="incrementBreakTimer()"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="timer-main-container">
</div>
<div class="timer-description">Ready to work?</div>
<div class="controls-container">
<button class="button-start" onclick="startTimer()">Start <i class="fa fa-play"></i></button>
<button class="button-pause" onclick="pauseTimer()">Pause <i class="fa fa-pause"></i></button>
<button class="button-reset" onclick="resetTimer()">Reset <i class="fa fa-refresh"></i></button>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
font-family: 'Lato', Arial, sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
}
/* Layout */
.container {
}
.main-title {
padding-bottom: 40px;
text-align: center;
font-size: 2.5em;
}
.timer-settings-container {
display: flex;
flex-wrap: wrap;
padding-bottom: 30px;
}
.timer-main-container {
text-align: center;
padding-bottom: 10px;
font-size: 3em;
}
.timer-description {
text-align: center;
padding-bottom: 40px
}
.pomodoro-title, .break-title, .pomodoro-container, .break-container {
width: 50%;
}
.pomodoro-title, .break-title {
font-size: 1em;
text-transform: uppercase;
letter-spacing: calc(1em / 10);
text-align: center;
}
.pomodoro-container, .break-container {
display: flex;
align-items: center;
padding-top: 10px;
font-size: 1.5em;
justify-content: center;
}
.break-timer, .pomodoro-timer {
padding: 0 20px;
}
.controls-container {
text-align: center;
button {
margin: 0 10px;
font-size: 1.125em;
}
button:first-child {
margin-left: 0;
}
button:last-child {
margin-right: 0;
}
}
/* Button styling */
button {
background-color: lighten(lightslategray, 30%);
border: none;
padding: 20px;
font-size: 1em;
&:hover {
background-color: lighten(lightslategray, 40%);
cursor: pointer;
}
}
button:disabled {
background-color: #ccc;
}
button:disabled:hover {
background-color: #ccc;
cursor: not-allowed;
}
.button-start {
background-color: mediumseagreen;
&:hover {
background-color: lighten(mediumseagreen, 20%);
}
}
.button-pause {
background-color: lighten(firebrick, 20%);
&:hover {
background-color: lighten(firebrick, 40%);
}
}
.button-reset {
background-color: cornflowerblue;
&:hover {
background-color: lighten(cornflowerblue, 20%);
}
}
/* Icon styling */
.controls-container .fa {
padding-left: 5px;
}
Javascript section
// set up
var pomodoroLengthMins = 25; // initial pomodoro length in mins
var origPomodoroLengthMins = pomodoroLengthMins; // copy to a new variable for later use
var pomodoroLengthSecs = (pomodoroLengthMins * 60) % 60; // initial pomodoro secs value
var pomodoroTotal = pomodoroLengthMins * 60; // total pomodoro length in secs
if (pomodoroLengthSecs < 10) {
pomodoroLengthSecs = "0" + pomodoroLengthSecs; // output 0 secs as 00
}
var breakLengthMins = 5; // initial break length in mins
var origBreakLengthMins = breakLengthMins; // copy to a new variable for later use
var breakLengthSecs = (breakLengthMins * 60) % 60; // initial break secs value
var breakTotal = breakLengthMins * 60; // total break length in secs
if (breakLengthSecs < 10) {
breakLengthSecs = "0" + breakLengthSecs; // output 0 secs as 00
}
var interval; // declare variable for use in the setInterval function
// display initial values of the timers on the page
document.querySelector('.pomodoro-timer').innerHTML = pomodoroLengthMins;
document.querySelector('.break-timer').innerHTML = breakLengthMins;
document.querySelector('.timer-main-container').innerHTML = pomodoroLengthMins + ":" + pomodoroLengthSecs;
// decrement break timer
function decrementBreakTimer() {
if (breakLengthMins > 1) {
breakLengthMins = breakLengthMins - 1;
origBreakLengthMins = breakLengthMins;
breakTotal = breakLengthMins * 60;
document.querySelector('.break-timer').innerHTML = breakLengthMins;
}
}
// increment break timer
function incrementBreakTimer() {
breakLengthMins = breakLengthMins + 1;
origBreakLengthMins = breakLengthMins;
breakTotal = breakLengthMins * 60;
document.querySelector('.break-timer').innerHTML = breakLengthMins;
}
// decrement Pomodoro timer
function decrementPomodoroTimer() {
if (pomodoroLengthMins > 1) {
pomodoroLengthMins = pomodoroLengthMins - 1;
origPomodoroLengthMins = pomodoroLengthMins;
pomodoroTotal = pomodoroLengthMins * 60;
document.querySelector('.pomodoro-timer').innerHTML = pomodoroLengthMins;
document.querySelector('.timer-main-container').innerHTML = pomodoroLengthMins + ":" + pomodoroLengthSecs;
}
}
// increment Pomodoro timer
function incrementPomodoroTimer() {
pomodoroLengthMins = pomodoroLengthMins + 1;
origPomodoroLengthMins = pomodoroLengthMins;
pomodoroTotal = pomodoroLengthMins * 60;
document.querySelector('.pomodoro-timer').innerHTML = pomodoroLengthMins;
document.querySelector('.timer-main-container').innerHTML = pomodoroLengthMins + ":" + pomodoroLengthSecs;
}
// start button: disable changing timer settings, and start the setInterval
function startTimer() {
document.querySelector('.decrementBreakTimer').disabled = 'disabled';
document.querySelector('.incrementBreakTimer').disabled = 'disabled';
document.querySelector('.decrementPomodoroTimer').disabled = 'disabled';
document.querySelector('.incrementPomodoroTimer').disabled = 'disabled';
document.querySelector('.button-start').disabled = 'disabled';
document.querySelector('.button-pause').disabled = '';
interval = setInterval(runPomodoroTimer, 1000);
}
function runPomodoroTimer() {
pomodoroTotal--; // decrement total pomodoro timer length
pomodoroLengthMins = pomodoroTotal / 60 | 0; // calculate mins
pomodoroLengthSecs = pomodoroTotal % 60; // calculate secs
if (pomodoroLengthSecs < 10) { // output secs as two figures
pomodoroLengthSecs = "0" + (pomodoroTotal % 60);
}
document.querySelector('.timer-main-container').innerHTML = pomodoroLengthMins + ":" + pomodoroLengthSecs;
document.querySelector('.timer-description').innerHTML = "until your break";
if (pomodoroTotal == -1) {
clearInterval(interval);
breakTotal = origBreakLengthMins * 60;
document.querySelector('.timer-main-container').innerHTML = origBreakLengthMins + ":00";
document.querySelector('.timer-description').innerHTML = "It's break time!";
interval = setInterval(runBreakTimer, 1000);
}
}
function runBreakTimer() {
breakTotal--; // decrement counter
breakLengthMins = breakTotal / 60 | 0; // calculate mins
breakLengthSecs = breakTotal % 60; // calculate secs
if (breakLengthSecs < 10) { // output secs as two figures
breakLengthSecs = "0" + (breakTotal % 60);
}
document.querySelector('.timer-main-container').innerHTML = breakLengthMins + ":" + breakLengthSecs;
if (breakTotal == -1) {
breakTotal--;
clearInterval(interval);
pomodoroTotal = origPomodoroLengthMins * 60;
document.querySelector('.timer-main-container').innerHTML = origPomodoroLengthMins + ":00";
document.querySelector('.timer-description').innerHTML = "until your break";
interval = setInterval(runPomodoroTimer, 1000);
}
}
function pauseTimer() {
clearInterval(interval);
document.querySelector('.button-pause').disabled = 'disabled';
document.querySelector('.button-start').disabled = '';
}
function resetTimer() {
document.querySelector('.decrementBreakTimer').disabled = '';
document.querySelector('.incrementBreakTimer').disabled = '';
document.querySelector('.decrementPomodoroTimer').disabled = '';
document.querySelector('.incrementPomodoroTimer').disabled = '';
document.querySelector('.button-start').disabled = '';
document.querySelector('.button-pause').disabled = '';
clearInterval(interval);
pomodoroLengthMins = 25;
pomodoroLengthSecs = "0" + 0;
pomodoroTotal = pomodoroLengthMins * 60;
breakLengthMins = 5;
breakLengthSecs = "0" + 0;
breakTotal = breakLengthMins * 60;
document.querySelector('.pomodoro-timer').innerHTML = pomodoroLengthMins;
document.querySelector('.break-timer').innerHTML = breakLengthMins;
document.querySelector('.timer-main-container').innerHTML = pomodoroLengthMins + ":" + pomodoroLengthSecs;
document.querySelector('.timer-description').innerHTML = "Ready to work?";
}

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
See the Pen Pomodoro timer in JS (freeCodeCamp project) by Ankit kumar (@Kumar-Ankit56) on CodePen.
By this blog… We have learned how we can design a Simple weather API Project HTML CSS JAVASCRIPT.