Here's some of the Javascript I'm working on. This is an exercise from lynda.com. It's a timer that counts down from the amount of minutes you enter in a text box. This is mostly for my own education purposes.
I'll go through the code bit by bit to explain what it does. This is a bit hard to explain but I'll try. Here's all the Javascript code:
// JavaScript Document
var secondsRemaining;
var intervalHandle;
function resetPage() {
document.getElementById("inputArea").style.display = "block";
};
function tick() {
//grab the h1
var timeDisplay = document.getElementById("time");
//turn seconds into MM:SS
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10
if (sec < 10){
sec = "0" + sec;
};
// concatenate with colon
var message = min + ":" + sec;
// now change the display
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0){
alert("Done!");
clearInterval(intervalHandle);
resetPage();
};
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
//get contents of the "minutes" text box
var minutes = document.getElementById("minutes").value;
//
if (isNaN(minutes) ) {
alert("Please enter a number!");
return;
};
// how many seconds?
secondsRemaining = minutes * 60;
intervalHandle = setInterval(tick, 1000);
//hide the form
document.getElementById("inputArea").style.display = "none";
};
window.onload = function () {
// create an input text box and give it an id of "minutes"
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute("id","minutes");
inputMinutes.setAttribute("type", "text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type", "button");
startButton.setAttribute("value", "Start Countdown!");
startButton.onclick = function(){
startCountdown();
};
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>countdown</title>
<style type="text/css">
body{
font-family:sans-serif;
color:#333
}
#container {
width:400px;
margin:auto;
}
h1{ font-size: 5em;}
</style>
</head>
<body>
<div id="container">
<div id="inputArea">
</div>
<h1 id="time">0:00</h1>
</div>
<script src="script.js"></script>
</body>
</html>
When the window loads, the JavaScript will execute the code inside
window.load:
window.onload = function () {
// create an input text box and give it an id of "minutes"
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute("id","minutes");
inputMinutes.setAttribute("type", "text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type", "button");
startButton.setAttribute("value", "Start Countdown!");
startButton.onclick = function(){
startCountdown();
};
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
In here I create two input elements. One text input and one button input. Then I grab a hold of a
div element in the HTML with the
inputArea id (look in the HTML), and insert the elements inside.
After a user clicks on the button we created, the code will execute the
startCountdown() function:
function startCountdown() {
//get contents of the "minutes" text box
var minutes = document.getElementById("minutes").value;
//
if (isNaN(minutes) ) {
alert("Please enter a number!");
return;
};
// how many seconds?
secondsRemaining = minutes * 60;
intervalHandle = setInterval(tick, 1000);
//hide the form
document.getElementById("inputArea").style.display = "none";
};
I grab a hold of the text box I created. There is an if statement which says: if the value of what is entered in the text in not a number, alert the user to enter a number. If it is a number: I multiply the value entered by 60 (60 seconds in a minute) and name it "secondsRemaining". I create a variable called "intervalHandle" and set it to a setInterval method which will execute the "tick" function ever 1s (1000 milliseconds). The last bit hides the form by grabbing the div element, and creating CSS to set the display to "none".
Now to the "tick" function:
function tick() {
//grab the h1
var timeDisplay = document.getElementById("time");
//turn seconds into MM:SS
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10
if (sec < 10){
sec = "0" + sec;
};
// concatenate with colon
var message = min + ":" + sec;
// now change the display
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0){
alert("Done!");
clearInterval(intervalHandle);
resetPage();
};
// subtract from seconds remaining
secondsRemaining--;
}
Here I grab the h1 element (which contains 00:00). I turn the minutes to the seconds remaining and divide it by 60. I want to use
Math.floor so that it doesn't round up or down. Second will be set to the seconds remaining minus min time 60. The if statement makes sure that there is a zero after the colon if there is less than 10 seconds. You wouldn't want the timer to look like this:
00:9
When there is 9 seconds left.
I set
timeDisplay to equal
min + ":" + sec. The text in the timer will equal whatever min and sec are, with the colon. The if statement tells the page what to do when the timer reaches zero. It will make the text box and button appear again. It will also clear the
setInterval method.
The
secondsRemaining part is what tells the seconds to subtract 1 from seconds, every time the tick code block is run.
OK, this was a very poor explanation of how the code works, but like I said, this is for my own educational purposes. I promise I will be more clear in the future!
