How To Create Workout Timer in Javascript | Workout Timer in Javascript Using HTML CSS Javascript
.png "How To Create Workout Timer in Javascript | Workout Timer in Javascript Using HTML CSS Javascript")
Learners, In this article we are going to design a very important and impressive project which is a Workout Timer in Javascript with detailed functionality.
Learner, who doesn’t want to stay organized in your life, like if you are a student then you should have a fixed schedule like when you have to go for study and when you will go to the gym and other stuff. Similarly, we can observe professional people as well they are so organized in their life as they can’t tolerate any misbehavior. It is so because they have spent or experienced more in their life.
Those professional people who have scheduled their life so smoothly that now at that moment they do not need any timer watch before doing any work there is the reason that their body has accepted their daily active now they are in a loop, for us as developers or student we require a timer clock so that we can also schedule our life as them
Like if we will start programming then how long will we sit and after a fixed time there will be also a fixed time for a break as well this will make our body in the loop for this activity and soon we will be organized ourselves. 😉.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a Workout Timer in Javascript Project Using HTML CSS JAVASCRIPT.
I hope you must have got an idea about the project.
Let’s have a look at our project.
As you are looking in the project preview how the thing is organized in the single container.
Following is the feature of our project:-
- 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
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the 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.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<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>
CSS SECTION
By CSS we will design our container and will bring in the center and then we will set the width for all three part of the container and will bring it after the heading and we will design both buttons and will make it interactive.
The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
@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
In the Javascript part, we will add magic logic as initially when our page will be loaded then our project will load with static behavior. we will set all the functionality as increment decrement counter preview etc.
For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.
// 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?";
}
A live preview of our project is attached below refer to this codepen
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.
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram
Written by @Ankit kumar
Code by Freecodecamp and edited by me.
