How to create timer in HTML ?
How to create timer in HTML ?
<html>
/******** CSS code*******/
<style>
html, body {
width: 100vw;
height: 100%;
margin: 0;
background: #27ae60;
}
h1, h2 {
text-align: center;
color: #2c3e50;
font-family: "Fredericka the Great";
}
#digits {
margin-top: 40%;
margin-bottom: 5%;
text-align: center;
color: #1abc9c;
font-family: 'Orbitron';
}
.wrapper {
min-height: 100%;
}
#start > i {
margin: auto;
margin-top: -2%;
color: #3498db;
}
#reset > i {
margin:auto;
color: #e74c3c;
}
#fcc-logo {
position: relative;
color: #2c3e50;
}
/**
* Mobile styles
*/
@media screen and (max-device-width: 600px) {
.clock {
max-width: 200px;
min-height: 200px;
margin: auto;
margin-top: 12%;
margin-bottom:10%;
border: solid #bdc3c7 10px;
border-radius: 50%;
background-color: #2c3e50;
}
#digits {
font-size: 2em;
}
button {
cursor: pointer;
text-align: center;
text-decoration: none;
border: none;
background-color: #2c3e50;
font-size: 16px;
}
#fcc-logo {
left: 46%;
}
#start {
position: relative;
left: 6px;
margin-left: 20%;
}
#reset {
position:relative;
bottom:-1px;
left: 50px;
font-size:1.3rem;
}
#reset > i {
margin-top:14%;
}
}
/**
* Large displays
*/
@media screen and (min-device-width: 600px) {
.clock {
max-width: 270px;
min-height: 270px;
margin: auto;
margin-top: 5%;
border: solid #bdc3c7 10px;
border-radius: 50%;
background-color: #2c3e50;
}
#digits {
font-size: 3em;
}
button {
cursor: pointer;
text-align: center;
text-decoration: none;
border: none;
background-color: #2c3e50;
font-size: 22px;
}
#start {
position: relative;
left: 6px;
margin-left: 20%;
}
#reset {
position:relative;
bottom:-3px;
left: 70px;
font-size:1.8rem;
}
#fcc-logo {
left:49%;
}
}
/**
* Form styles
*/
.group {
position:relative;
max-width: 247px;
margin: auto;
margin-bottom:45px;
}
input {
display:block;
padding:10px 10px 10px 5px;
border:none;
border-bottom:1px solid #ecf0f1;
background-color: inherit;
font-size:18px;
}
input:focus {
border-bottom: none;
outline:none;
}
/* LABEL ======================================= */
label {
position:absolute;
top:10px;
left:5px;
-webkit-transition:0.2s ease all;
-moz-transition:0.2s ease all;
transition:0.2s ease all;
pointer-events:none;
color:#ecf0f1;
font-size:18px;
font-weight:normal;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
color:#34495e;
font-size:14px;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
position:absolute;
bottom:1px;
width:0;
height:2px;
content:'';
-webkit-transition:0.2s ease all;
-moz-transition:0.2s ease all;
transition:0.2s ease all;
background:#34495e;
}
.bar:before {
left:32%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
top:25%;
left:0;
width:100px;
height:60%;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#34495e; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#34495e; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#34495e; }
to { width:0; background:transparent; }
}
</style>
<div class="wrapper">
<h1>FreeCodeCamp</h1>
<h2>Pomodoro Clock</h2>
<div class="group">
<input id="setTimer" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label style="font-family:Quicksand">Set clock:</label>
</div>
/*HTML===============/
<div class="group">
<input id="setReset" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label style="font-family:Quicksand">Reset on:</label>
</div>
<div class="clock">
<p id="digits">00:00</p>
<button id="start"><i class="fa fa-power-off fa-lg" aria-hidden="true"></i></button>
<button id="reset"><i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
<p style="font-family:Sacramento; text-align:center">By: J.Salazar</p>
<i id="fcc-logo" class="fa fa-free-code-camp fa-lg" aria-hidden="true"></i>
</div>
/*JAVASCRIPT CODE========================/
<script>
* jshint esversion: 6 */
var resetCountdown = false,
isOn = false,
timerValue = 0,
resetValue = 0,
timer,
reset,
countdown;
window.onload = function() {
const startButton = document.getElementById('start');
const resetButton = document.getElementById('reset');
const instructions = "Instructions:\n-Valid format: mm:ss.\n-Clock must have at least 1 (00:01) second.\n-If reset timer hasn't been set clock will not run again.\n-Use refresh button to restart and be able to set different values.";
var htmlTimer = document.getElementById('digits').innerHTML;
alert(instructions);
startButton.addEventListener('click', function() {
//Get input
timer = document.getElementById('setTimer').value;
reset = document.getElementById('setReset').value;
//Clock must not be empty
if(timer.length === 0) {
alert(instructions);
//Clock and reset has input
} else if(reset.length > 0) {
//Validate
if(validateInput(timer) && validateInput(reset)) {
//Set timer and reset
setTimer(timer, reset);
clockCountdown(timerValue, resetValue);
} else {
alert(instructions);
}
} else if(reset.length === 0) {
//Validate
if(validateInput(timer)) {
//Set timer
setTimer(timer);
clockCountdown(timerValue);
} else {
alert(instructions);
}
}
});
resetButton.addEventListener('click', function() {
resetCountdown = false;
isOn = false;
timerValue = 0;
resetValue = 0;
timer = 0;
reset = 0;
clearInterval(countdown);
document.getElementById('digits').innerHTML = '00:00';
document.getElementById('digits').style.color = '#1abc9c';
});
};
//Validate input
function validateInput(input) {
let length = input.length;
let regEx = /[\D]/g;
if(input.search(regEx) === 2 && length == 5 && onlyOneColon(input, regEx)) {
return true;
} else {
return false;
}
}
//Make sure there is only one colon
//and that it is in the correct place
function onlyOneColon(input, re) {
if(input.search(re) >= 0) {
if(input[input.search(re)] !== ":") {
return false;
} else if (input.indexOf(":") !== input.lastIndexOf(":")) {
return false;
} else {
return true;
}
}
}
//Sets timers
function setTimer(timerInput, resetInput = 0) {
//Can't set values again if it's already on
if(!isOn) {
//Stores in timer global
timerValue = timerInput.split(':');
//Sets clock timer in html
document.getElementById('digits').innerHTML = timerInput;
htmlTimer = timerValue[0] + ':' + timerValue[1];
//Set reset values in global
resetValue = resetInput === 0 ? resetInput : resetInput.split(':');
isOn = true;
}
}
//Clock countdown
function clockCountdown(t, r = undefined) {
if(!r) {
countdown = setInterval(function() {
countdownLogic(t);
if(t.join('') == '0000') clearInterval(countdown);
},1000);
} else {
//If we are running reset countdown now
if(resetCountdown) {
countdown = setInterval(function() {
countdownLogic(r);
if(r.join('') == '0000') {
clearInterval(countdown);
resetCountdown = false;
setTimeout(function() {
document.getElementById('digits').innerHTML = t.join(':');
document.getElementById('digits').style.color = '#1abc9c';
clockCountdown(timer.split(':'), reset.split(':'));
}, 1000);
}
},1000);
//Else running clock timer
} else {
countdown = setInterval(function() {
countdownLogic(t);
if(t.join('') == '0000') {
clearInterval(countdown);
resetCountdown = true;
setTimeout(function() {
document.getElementById('digits').innerHTML = r.join(':');
document.getElementById('digits').style.color = '#e74c3c';
clockCountdown(timer.split(':'), reset.split(':'));
}, 1000);
}
},1000);
}
}
}
function countdownLogic(t) {
if(t[1] == '00') {
t[1] = '59';
t[0] -= 1;
if(t[0] < 10) t[0] = '0' + t[0];
} else {
t[1] -= 1;
if(t[1] < 10) t[1] = '0' + t[1];
}
document.getElementById('digits').innerHTML = t.join(':');
console.log(t.join(''));
}
</script>
</html>
Comments
Post a Comment