Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
iClicks++
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>iClicks++</title>
</head>
<style>
*{padding:0;margin:0;font-size:inherit;}
body {
font: 16px/22px sans-serif;
margin: 30px 20px;
background: #222;
color: #eee;
}
p { margin:0 0 18px; }
ul { padding-left: 20px; color: #666; font-size: 14px; }
small { font-size: 11px; }
</style>
<body>
<p>
<strong id="clicks">0</strong>
times w/in
<strong id="duration">00:00:00</strong>.
</p>
<p>
<strong>Average</strong>: <span id="average">...</span>
</p>
<p>
<input type="button" value="Start" id="btnStart" /> &nbsp;
<input type="button" value="Finish" id="btnFinish" disabled />
</p>
<ul id="archive"></ul>
<script>
// I suppose this is a variation of a lap timer. Not smart enough to know what exactly to call it.
// Tried to keep the JS sparse. Pardon the brevity, nested functions, and lack of legacy support.
var iClicks = 0,
iStartTimestamp = 0,
iTotalSeconds = 0,
sAverage = "...";
var btnStart = document.getElementById("btnStart"),
btnFinish = document.getElementById("btnFinish"),
clicks = document.getElementById("clicks"),
duration = document.getElementById("duration"),
average = document.getElementById("average");
function friendlyTime(iSeconds) {
var iMinutes = 0, iHours = 0;
function pad(i) { return ("0"+i).slice(-2); }
if (iSeconds >= 60) {
iMinutes = Math.floor(iSeconds / 60);
if (iMinutes >= 60) {
iHours = Math.floor(iMinutes / 60);
iMinutes = iMinutes - (iHours * 60);
iSeconds = iSeconds - (iHours * 60 * 60);
}
iSeconds = iSeconds - (iMinutes * 60);
}
return pad(iHours) + ":" + pad(iMinutes) + ":" + pad(iSeconds);
}
function update(bUpdateSeconds) {
if (bUpdateSeconds !== false) {
iTotalSeconds = Math.floor(+new Date() / 1000) - iStartTimestamp;
}
clicks.innerHTML = iClicks;
duration.innerHTML = friendlyTime(iTotalSeconds);
sAverage = (iTotalSeconds === 0) ? "..." : "Once every " + Math.round(iTotalSeconds / iClicks) + " seconds";
average.innerHTML = sAverage;
}
var cycle;
btnStart.addEventListener("click", function(e) {
if (iClicks === 0) {
btnStart.setAttribute("value", "Increment");
btnFinish.removeAttribute("disabled");
iStartTimestamp = Math.floor(+new Date() / 1000);
cycle = setInterval(update, 1000);
}
iClicks++;
console.log(iClicks + " in " + friendlyTime(iTotalSeconds));
update(false);
});
btnFinish.addEventListener("click", function(e) {
document.getElementById("archive").innerHTML = (function(){
var sHtml = document.getElementById("archive").innerHTML;
sHtml = "<li>" + iClicks + " times w/in " + friendlyTime(iTotalSeconds) + "<br />" + sAverage + "<br /><small>on " + new Date() + "</small></li>" + sHtml;
return sHtml;
}());
iClicks = 0;
iTotalSeconds = 0;
btnStart.setAttribute("value", "Start");
btnFinish.setAttribute("disabled", "disabled");
clearInterval(cycle);
update(false);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment