JSFiddle - React, Tailwind, and code Playground
HTML
<div class="timer"></div>I am going to spend
<input id="input"></input>minutes working
<button>Go!</button>
CSS
.wrapper {
margin: 0 auto;
font-family:"Open Sans";
margin-top: 30%;
font-size: 12pt;
color: tomato;
text-align: center;
}
input {
width: 30px;
height: 35px;
border: 1px solid tomato;
border-radius: 4px;
font-family:"Open Sans";
color: white;
letter-spacing: 1px;
font-size: 10pt;
margin: 20px 0.5em;
padding: 0 5px;
}
.timer {
font-size: 20pt;
text-align: center;
margin:40px 0;
}
button {
width: 50px;
height: 35px;
border: 1px solid tomato;
border-radius: 4px;
background-color: tomato;
font-family:"Open Sans";
color: white;
letter-spacing: 1px;
font-size: 10pt;
margin: 20px 0.5em;
}
button:hover {
background-color:red;
cursor: hand;
cursor: pointer;
}
input:focus {
background-color: tomato;
outline-color: tomato;
}
input:active {
color: none;
border: none;
}
.in_minutes {
padding: 0;
margin: 0 0 0 10px;
display: inline;
}
::-webkit-input-placeholder {
color: tomato;
text-decoration: center;
padding-right:20px;
}
:-moz-placeholder {
/* Firefox 18- */
color: tomato;
text-decoration: center;
padding-right:20px;
}
::-moz-placeholder {
/* Firefox 19+ */
color: tomato;
text-decoration: center;
padding-right:20px;
}
:-ms-input-placeholder {
color: tomato;
text-decoration: center;
padding-right:20px;
}
JavaScript
var doc = document,
timer = doc.getElementsByClassName('timer')[0],
button = doc.getElementsByTagName('button')[0];
button.onclick = function () {
debugger;
var input = doc.getElementById('input').value;
var remaining = (input * 1000) * 60;
function updateTimer() {
debugger;
console.log((remaining/1000) + " seconds remaining");
remaining += 1000;
if(remaining > 0) setTimeout(updateTimer, 1000);
}
updateTimer();
}