I am doing a project in which I created a countdown timer using JavaScript. It has a stop, start and reset buttons.
I want to create a fill effect animation starting from the bottom, based on a countdown timer. I want the fill effect to fill a certain percentage of the circle, so that when the countdown reaches 0, the whole circle will be filled.
I want to use vanilla JavaScript. No jQuery or SVG.
Here is my code for the main timer starting with HTML, then CSS and my Javascript code.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <h1>Pomodoro Clock</h1> <div class="container"> <div class="row"> <h3>Session Length</h3> <div class="row button1"> <button type="button" onclick="decreaseTime()">-</button> <span id="SessionLength">25</span> <button type="button" onclick="increaseTime()">+</button> </div> </div> <!--My Start/Stop/Reset buttons--> <div class="row"> <div class="myButtons"> <button type="button" onclick="startTime()">Start</button> <button type="button" onclick="stopTime()">Stop</button> <button type="button" onclick="resetTime()">Reset</button> </div> </div> <!--My Circle--> <div class="row"> <div class="circleDraw"> <h2 class="text-center">Session</h2> <h1 id="output">25:00</h1> </div> </div> </div> h1{ text-align: center; } h3{ text-align: right; padding-right: 30%; } .myButtons{ text-align: center; padding-top: 10%; } .circleDraw{ border-radius: 50%; border: 2px solid; width: 300px; height: 300px; margin: 50px auto; } .text-center{ text-align: center; padding: 30px; } .txt-center{ text-align: center; } .button1{ text-align: right; padding-right: 35% } var time = 1500; var running = 0; var myStopID; var startTime = function(){ running = 1; if(running == 1){ timer(); } } var stopTime = function(){ clearTimeout(myStopID); running = 0; } var resetTime = function(){ if(running == 0){ time = 1500; } var min = Math.floor(time / 60); var sec = time % 60; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; document.getElementById('output').innerHTML= min; document.getElementById('SessionLength').innerHTML= min; } var timer = function(){ if(running == 1){ myStopID = setTimeout(function(){ time--; var min = Math.floor(time / 60); var sec = time % 60; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; document.getElementById("output").innerHTML= min + ":" + sec; timer(); }, 1000); } } function decreaseTime(){ if(time <= 0){ return 0; } time = time - 60; var min = Math.floor(time/60); document.getElementById('SessionLength').innerHTML= min; document.getElementById('output').innerHTML= min; } function increaseTime(){ if(time >= 5940){ return 5940; } time = time + 60; var min = Math.floor(time/60); document.getElementById('SessionLength').innerHTML= min; document.getElementById('output').innerHTML= min; }
source share