Skip to content

Instantly share code, notes, and snippets.

@yubrajpokharel
Created July 23, 2016 16:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yubrajpokharel/ccfb4a8508b1a9e12364c7ed3e20d1d6 to your computer and use it in GitHub Desktop.
Save yubrajpokharel/ccfb4a8508b1a9e12364c7ed3e20d1d6 to your computer and use it in GitHub Desktop.
Stop watch with JavaScript
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Chitru.iml" filepath="$PROJECT_DIR$/.idea/Chitru.iml" />
</modules>
</component>
</project>
<html>
<head>
<title>Stop Watch</title>
<link href="../../src/css/stopWatch/style.css" rel="stylesheet">
<script src="../../src/js/stopWatch/app.js"></script>
</head>
<body>
<h1>Timer Clock</h1>
<div>
<input type="number" id="min"> Min
</div>
<div>
<input type="number" id="sec"> Sec
</div>
<div>
<button id="btn">Start</button>
<button id="btn-stop">Stop</button>
</div>
</body>
</html>
body {
margin-left: 20%;
margin-right: 20%;
}
body, input, button {
font-family: "Century Gothic",sans-serif;
font-size: 20pt;
}
div {
margin: 0.5em;
}
"use strict";
var timer = null;
var min = null;
var sec = null;
window.onload = function() {
document.getElementById('btn').onclick = countdown;
document.getElementById('btn-stop').onclick = stopped;
}
function stopped() {
alert("Watch Stopped at : " + min + "min " + sec +" sec" );
clearInterval(timer);
timer = null;
}
function countdown() {
if (timer == null) {
timer = setInterval(decrement, 1000);
}
}
function decrement() {
min = document.getElementById('min').value;
sec = document.getElementById('sec').value;
if (sec > 0) {
sec--;
}
else if (min > 0) {
min--;
sec = 59;
}
else {
clearInterval(timer);
timer = null;
document.body.style.backgroundColor = "#ccc";
}
document.getElementById('min').value = min;
document.getElementById('sec').value = sec;
}
@chitru
Copy link

chitru commented Jul 24, 2016

thank you bro, works like a charm ^^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment