Adding the :00 is just a matter of tacking this text on like this: hours + ":00"
Adding the am/pm information in the result is also pretty straightforward. We just need to find out whether the user has chosen am or pm and add it to the new time that we've calculated.
1. Write a line in your function that finds out whether the user has chosen am or pm and put it in a variable called "ampm". (Hint: it's just like the line that finds out what time the user has entered and puts it in a variable called "hours")
Now that you know whether the user has chosen am/pm, you'll want to add that to the the calculated time that you will print on the page.
2. Go to the line where you're replacing the old "innerHTML" with newTime + ":00", and add "+ ampm"
3. Open the page in your browser to be sure this works (you should now see something like "1:00 pm" in bold rather than just "1:00"..
Now we need to make sure that we don't end up with a time greater than 12 or less than 1.
First, we need to be sure we understand the problem.
If the user enters 11:00 am, and clicks on "Central" time zone, the calculated time will be 13:00 am. To get to the correct time (1:00 pm), we need to subtract 12 and switch "am" to "pm". So, here's the general statement:
if the calculated time is greater than 12, subtract 12 and switch "am" to "pm" or "pm" to "am"
If the user enters 1:00 pm and clicks on "Hawaii" time zone, the calculated time will be -1:00 pm. To get the correct time (11:00 am), we need to add 12 and switch "pm" to "am".
if the calculated time is less than 1, add 12 and switch "am" to "pm" or "pm" to "am"
Now the question is, how do we do that in Javascript?
Well, we already have the calculated time stored in a variable newTime.
To check whether that calculated time is greater than 12, we use something called a conditional statement. The basic structure looks like this:
if()
{
}
This says "If whatever is inside the parentheses is true, then do whatever is inside the curly brackets."
Here is a simple example:
if(1<2)
{
alert("1 is less than 2");
}
This will create a popup box that says "1 is less than 2"
But if we have this:
if(1>2)
{
alert("1 is less than 2");
}
We wont' see anything because "1>2" is false, so the instructions inside the curly bracket won't be carried out.
Now lets apply this to our situation.
We want to find out if the calculated time, newTime is greater than 12. So we write this:
if(newTime>12)
{
alert(newTime + " is greater than 12");
}
4. Go ahead and type this inside your function (after the line where which created the variable newTime, since you need that variable to exist before you can test it), and before the line where you update the page using innerHTML.
5. Save your page and open it in a browser. Type in different numbers. If you type in a number greater than 12, you should see the popup box. Otherwise, you shouldn't.
6. Now type the same code again (those same 4 lines), after the code you just typed, but this time put this in the parentheses:
newTime<1
and put this between the parentheses after 'alert' :
newTime + " is less than 1"
7. Again, save your page and open it in a browser. Type in numbers less than 1 or greater than 12 to see if you get the correct popup box.
Now, look back to the statements we're trying to write in Javascript:
if the calculated time is greater than 12, subtract 12 and switch "am" to "pm" or "pm" to "am"
and
if the calculated time is less than 1, add 12 and switch "am" to "pm" or "pm" to "am"
We now have the first part (the part that says "if the calculated time is..."). Now we need to write the instructions that subtract or add and switch am/pm.
Subtracting and adding is simple. For example, if we wanted to add 3 to our number, we would write it like this:
newTime + 3;
To update newTime with the result of this calculation, we write this:
newTime = newTime + 3;
This line says "update the value of the variable newTime so that it now contains the value we get when we add 3 to newTime."
8. Now do this yourself: go to each "if statement" that you wrote previously. Inside that if statement's curly brackets, add a line that updates newTime (by adding or subracting 12).
9. Change the alert statement so that it reads:
alert("The new calculated time is " + newTime);
10. Save your file, open it in your browser, type in a number, click on a radio button and check to be sure the result is correct.
Let's look at those statements again:
if the calculated time is greater than 12, subtract 12 and switch "am" to "pm" or "pm" to "am"
and
if the calculated time is less than 1, add 12 and switch "am" to "pm" or "pm" to "am"
We've now checked the calculated time and subtracted or added 12. The last thing we need to do is to switch am to pm or vice versa.
We've already found out whether the user entered "am" or "pm" and stored this in a variable (called ampm). We can use two more conditional ("if") statements to check the value of ampm and switch it to the other, like this:
if(ampm == "am")
{
ampm = "pm";
}
if(ampm == "pm")
{
ampm = "am";
}
The double equal sign: == means "is equal to" (in contrast to the single equal sign: = which means "set equal to")
So the code above says:
'if the value of the variable ampm is equal to "am", make it equal to "pm"'
'if the value of the variable ampm is equal to "pm", make it equal to "am"'
We could also write this code using an "else" clause, like this:
if(ampm == "am")
{
ampm = "pm";
}
else
{
ampm = "am";
}
This code says:
'if the value of the variable ampm is equal to "am", make it equal to "pm" otherwise (if it's not equal to "pm"), make it equal to "am"'
11. Write this version inside each of your if statements, at the end, just before the closing curly bracket: {. You will now have if statements inside of your if statements, which is fine. To help make your code easy to read, indent all of these lines so that it's clear that one if statement is inside the other.
12. Save your file and open it in a browser. Try typing in different times and clicking on different time zones to see if you get the correct results.
13. Go to the Catalyst quiz and answer questions #7 & #8
Next, we'll try to accomodate errors the user may make