Skip to content

Instantly share code, notes, and snippets.

@tonyta

tonyta/index.html

Created December 8, 2014 17:27
Show Gist options
  • Save tonyta/fc4b58fe2b64fae7c5c9 to your computer and use it in GitHub Desktop.
Save tonyta/fc4b58fe2b64fae7c5c9 to your computer and use it in GitHub Desktop.
Download ZIP
Countdown
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="input-area"></div>
<h1 id="time">0:00.0</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
"use strict";
var msecRemaining;
var intervalHandle;
var intervalStep = 100; // milliseconds
var reset = true;
function flashBackground() {
var flashInterval = 100;
var flashTime = 700
var body = document.getElementsByTagName('body')[0];
var color = ["#D11", null];
var colorIndex = 0;
function toggleBackground() {
body.style.backgroundColor = color[colorIndex];
console.log(color[colorIndex]);
colorIndex++;
if (colorIndex == color.length) {
colorIndex = 0;
}
}
function resetBackground() {
clearInterval(flashHandle);
body.style.backgroundColor = null;
}
var flashHandle = setInterval(toggleBackground, flashInterval);
setTimeout(resetBackground, flashTime);
}
function tick() {
if (msecRemaining <= 0) {
flashBackground();
resetTimer();
} else {
console.log(msecRemaining);
var min = Math.floor(msecRemaining / 1000 / 60);
var sec = Math.floor(msecRemaining / 1000) - (min * 60);
var tenthSec = Math.floor(msecRemaining/100) - ((min * 60) + sec) * 10;
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("time").innerHTML = min + ":" + sec + "." + tenthSec;
msecRemaining -= intervalStep;
}
}
function startTimer() {
if (reset == true) {
var inputMinutes = document.getElementById("input-box").value;
if (isNaN(inputMinutes)) {
flashBackground();
document.getElementById("input-box").value = "";
return;
}
msecRemaining = inputMinutes * 60 * 1000;
reset = false;
}
document.getElementById("time").style.color = "white";
tick();
intervalHandle = setInterval(tick, intervalStep);
document.getElementById("input-box").style.display = "none";
document.getElementById("start-button").style.display = "none";
document.getElementById("stop-button").style.display = "inline";
document.getElementById("reset-button").style.display = "inline";
}
function resetTimer() {
reset = true;
stopTimer();
document.getElementById("time").innerHTML = "0:00.0";
document.getElementById("input-box").style.display = "inline";
document.getElementById("start-button").style.display = "inline";
document.getElementById("stop-button").style.display = "none";
document.getElementById("reset-button").style.display = "none";
}
function stopTimer() {
document.getElementById("time").style.color = "#AAA";
clearInterval(intervalHandle);
document.getElementById("input-box").style.display = "none";
document.getElementById("start-button").style.display = "inline";
document.getElementById("stop-button").style.display = "none";
document.getElementById("reset-button").style.display = "inline";
}
window.onload = function () {
var inputBox = document.createElement("input");
inputBox.setAttribute("id", "input-box");
inputBox.setAttribute("class", "input")
inputBox.setAttribute("type", "text");
inputBox.setAttribute("placeholder", "minutes");
var resetButton = document.createElement("button");
resetButton.setAttribute("id", "reset-button");
resetButton.setAttribute("class", "input");
resetButton.innerHTML = "reset";
resetButton.style.backgroundColor = "#222";
resetButton.style.color = "#AAA";
resetButton.onclick = function () {
resetTimer();
}
var startButton = document.createElement("button");
startButton.setAttribute("id", "start-button");
startButton.setAttribute("class", "input");
startButton.innerHTML = "start";
startButton.style.backgroundColor = "#1D1";
startButton.onclick = function () {
startTimer();
}
var stopButton = document.createElement("button");
stopButton.setAttribute("id", "stop-button");
stopButton.setAttribute("class", "input");
stopButton.innerHTML = "stop";
stopButton.style.backgroundColor = "#D11";
stopButton.style.color = "white";
stopButton.onclick = function () {
stopTimer();
}
document.getElementById("input-area").appendChild(inputBox);
document.getElementById("input-area").appendChild(resetButton);
document.getElementById("input-area").appendChild(startButton);
document.getElementById("input-area").appendChild(stopButton);
resetTimer();
}
Raw
style.css
body {
font-family: "helvetica";
text-align: center;
background-color: #333;
margin: 100px auto;
}
.input-area {
height: 200px;
}
.input {
text-align: center;
vertical-align: middle;
border-radius: 2px;
width: 210px;
margin: 10px;
padding: 0;
height: 60px;
border: 1px;
font-size: 1.5em;
transition: all 0.1s ease;
}
button:hover {
cursor: pointer;
}
.input:hover {
font-weight: bold;
font-size: 1.7em;
}
.input:active {
font-weight: none;
font-size: 1.4em;
}
h1 {
font-size: 10em;
color: #AAA;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment