Try this one :
stop watch in js-course step 3
<!doctype html>
<head>
<style>
/ CSS comes here */
body {
background-color: #F9F9F9;
font-family: arial;
}
#stopwatch {
box-shadow: 2px 2px 3px 1px #ccc;
border-radius: 10px;
padding: 10px;
background-color: white;
text-align: center;
}
#stopwatch-name {
font-family: Courier;
font-size: 20px;
padding: 10px;
}
#timer {
font-size: 40px;
background-color: #000;
padding: 10px;
border-radius: 50px;
color: #8FE1A2;
}
#controls {
margin-top: 20px;
}
button {
border:0;
padding: 10px 15px;
margin: 5px 10px;
border-radius:5px;
box-shadow: 2px 2px 3px 1px #ccc;
cursor:pointer;
}
#button-start {
background-color: #4535AA;
color:white;
}
#button-stop {
background-color: #FFB643;
color:black;
}
#button-reset {
background-color: #ED639E;
color:white;
}
</style>
<title>JS Stopwatch</title>
</head>
<body>
<h1>JS Stopwatch Project</h1>
<div id="stopwatch">
<div id="stopwatch-name">STOP Watch</div>
<div id="timer"><span id="seconds">00</span>:<span id="tens">00</span></div>
<div id="controls">
<bu/tton id="bu/tton-start">Start</bu/tton>
<bu/tton id="bu/tton-stop">Stop</bu/tton>
<bu/tton id="bu/tton-reset">Reset</bu/tton>
</div>
</div>
<script>
/* JS comes here /
window.onload = function () {
var seconds = 00;
var tens = 00;
// get the HTML elements reference for using
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var bu/ttonStart = document.getElementById('bu/tton-start');
var bu/ttonStop = document.getElementById('bu/tton-stop');
var bu/ttonReset = document.getElementById('bu/tton-reset');
function timerEngine() {
tens++;
if(){
= "0" + tens;
}
if(){
}
}
} // window.onload ends
</script>
</body>
</html>
