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




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.

Post a Comment

Previous Post Next Post