Html And Xhtml Tutorial 2 Review Assignment

Sheet1 Page 1 <html> <head> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case Problem 3 Diamond Health Club Class List Author: Date: Filename: classes.htm Supporting files: diamond.jpg --> <title>Classes at Diamond Health Club</title> </head> <body> <div><img src="diamond.jpg" alt="Diamond Health Club" usemap="#diamondmap" style="border-width:0"/> <map id="diamondmap" name="diamondmap"> <area shape="rect" coords="225,7,333,40" href="classes.htm" title="View our classes" alt="Classes"/> <area shape="rect" coords="258,44,437,82" href="members.htm" title="View our membership options" alt="Memberships"/> <area shape="default" coords="0,0,548,150" href="index.htm" title="Return to the Home Page" alt="Home Page"/> </map> </div> <hr/> <div> Home Page Facilities Classes Memberships Staff Hours </div> <hr /> <h1>Diamond Health Club Classes</h1> <p>Diamond Health Club offers several different classes for varying interests and abilities. To receive our current schedule, <h2><b>Facilities</b></h2> <ul style="list-style-type:circle">

  • 11-01-2010, 01:41 AM#1

    New to the CF scene

    Need help with homework assignment (Countdown Timer)

    Hey,

    I'm taking a javascript class and have to do an assignment in which I'm supposed to show countdowns to various events. I have 2 files, an external js file and a html file.

    But I can't get it to work I've searched the forum and googled it but all the solutions I've found do not work.

    Here's the code.

    .js file:

    Code:

    /* New Perspectives on JavaScript, 2nd Edition Tutorial 2 Review Assignment Author: Date: Function List: showDateTime(time) Returns the date in a text string formatted as: mm/dd/yyyy at hh:mm:ss am changeYear(today, holiday) Changes the year value of the holiday object to point to the next year if it has already occurred in the present year countdown(stop, start) Displays the time between the stop and start date objects in the text format: dd days, hh hrs, mm mins, ss secs */ function showDateTime(time) { var date = time.getDate(); var month = time.getMonth()+1; var year = time.getFullYear(); var second = time.getSeconds(); var minute = time.getMinutes(); var hour = time.getHours(); ampm = (hour < 12) ? " a.m." : " p.m."; hour = (hour > 12) ? hour - 12 : hour; hour = (hour == 0) ? 12 : hour; minute = minute < 10 ? "0"+minute : minute; second = second < 10 ? "0"+second : second; return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm; } function changeYear (today, holiday) { var year = changeYear.getFullYear(); holiday.setFullYear(year); year = (today > holiday) ? year + 1 : year; year = holiday.setFullYear(year); } function countdown(start, stop) { time = stop - start; seconds = Math.floor(time/1000); minutes = Math.floor(seconds/60); hours = Math.floor(minutes/60); days = Math.floor(hours/24); return days + " days," + hours + " hours," + minutes + " mins," + seconds + " secs"; }
    And here's the HTML file:

    Code:

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- New Perspectives on JavaScript, 2nd Edition Tutorial 2 Review Assignment Events in Tulsa Author: Date: Filename: events.htm Supporting files: dates.js, logo.jpg, tulsa.css --> <title>Upcoming Events at Tulsa</title> <link href="tulsa.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="dates.js"></script> <script type="text/javascript"> showCountdown(){ var today = new Date("October 31, 2010 10:00:00"); var Date1 = new Date("January 14, 2011 10:00:00"); var Date2 = new Date("May 21, 2011 12:00:00"); var Date3 = new Date("July 4, 2011 9:00:00"); var Date4 = new Date("September 1, 2011 12:00:00"); var Date5 = new Date("December 1, 2011 11:30:00"); var Date6 = new Date("December 31, 2011 3:30:00"); document.eventform.thisDay.value = showDateTime(today); changeYear(today, Date1); changeYear(today, Date2); changeYear(today, Date3); changeYear(today, Date4); changeYear(today, Date5); changeYear(today, Date6); document.eventform.count1.value = countdown(today, Date1); document.eventform.count2.value = countdown(today, Date2); document.eventform.count3.value = countdown(today, Date3); document.eventform.count4.value = countdown(today, Date4); document.eventform.count5.value = countdown(today, Date5); document.eventform.count6.value = countdown(today, Date6); } </script> </head> <body onload="setInterval('showCountdown()', 100)"> <form name="eventform" id="eventform" action=""> <div id="logo"> <img src="logo.jpg" alt="Tulsa Events" /> </div> <div id="links"> <a href="#">Home</a> <a href="#">City Services</a> <a href="#">City Agencies</a> <a href="#">Mayor's Office</a> <a href="#">News Today</a> <a href="#">Upcoming Events</a> <a href="#">Site Map</a> <a href="#">Search Engine</a> <a href="#">Public Notices</a> <a href="#">Survey Form</a> <a href="#">Contact Us</a> <a href="#">E-Government</a> </div> <div id="main"> <h3>Countdown to Upcoming Events</h3> <table> <tr> <th colspan="2" style="text-align: right">Current Date and Time</th> <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td> </tr> <tr> <th>Event</th> <th>Starting Time</th> <th>Countdown to Event</th> </tr> <tr> <td><input value="Heritage Day" readonly="readonly" size="20" /></td> <td><input value="Jan 14 at 10:00 a.m." readonly="readonly" size="20" /></td> <td><input name="count1" id="count1" size="40" /></td> </tr> <tr> <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td> <td><input value="May 21 at 12:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count2" id="count2" size="40" /></td> </tr> <tr> <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td> <td><input value="Jul 4 at 9:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count3" id="count3" size="40" /></td> </tr> <tr> <td><input value="Summer Bash" readonly="readonly" size="20" /></td> <td><input value="Sep 1 at 12:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count4" id="count4" size="40" /></td> </tr><tr> <td><input value="Holiday Party" readonly="readonly" size="20" /></td> <td><input value="Dec 1 at 11:30 a.m." readonly="readonly" size="20" /></td> <td><input name="count5" id="count5" size="40" /></td> </tr> <tr> <td><input value="New Year's Bash" readonly="readonly" size="20" /></td> <td><input value="Dec 31 at 3:30 p.m." readonly="readonly" size="20" /></td> <td><input name="count6" id="count6" size="40" /></td> </tr> </table> </div> </form> </body> </html>
    Thanks for your help, I appreciate it

  • 11-01-2010, 04:07 AM#2


  • 11-01-2010, 05:50 AM#3

    New to the CF scene

    Got it to work using % operator.

    Thanks.


  • 03-05-2011, 02:59 AM#4

    New to the CF scene

    mrt209, I am working on the same coding right now for a JS class. I am having the same troubles you seemed to be having. Where did you insert the % operator in order to get your code to work? Any help would be greateful!!

    Thanks


  • 03-05-2011, 04:15 AM#5


  • 03-05-2011, 05:02 AM#6

    New to the CF scene

    I did in fact recognize that but was resorting to any resources that might be available. Worst case, I wouldn't hear from him but worth a shot either way. I'm not getting any numbers in my showCountdown function. Only error I am recieving now is a "missing ; before statement" and I cannot seem to figure out the issue at hand from here after trying other multiple attempts.


  • 03-05-2011, 08:48 AM#7


  • 03-05-2011, 09:38 AM#8

    Banned
    Here's one from a few years ago you might like to use as a guide.

    Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Timer</title> <script type="text/javascript"> var timeLeft = 0; var begin function startTimer() { //check for null input hours, minutes, seconds if(document.getElementById("txtHours").value == ""){ document.getElementById("txtHours").value = "0"; } if(document.getElementById("txtMinutes").value == ""){ document.getElementById("txtMinutes").value = "0"; } if(document.getElementById("txtSeconds").value == ""){ document.getElementById("txtSeconds").value = "0"; } //get input hours, minutes, seconds var hours = parseInt(document.getElementById("txtHours").value); var minutes = parseInt(document.getElementById("txtMinutes").value); var seconds = parseInt(document.getElementById("txtSeconds").value); //calculate time left in seconds timeLeft = (hours * 3600) + (minutes * 60) + seconds; //start count down timer begin=setInterval("countDown()",1000); } function countDown() { var hoursLeft = 0; var minutesLeft = 0; var secondsLeft = 0; var remainder = 0; timeLeft = timeLeft-1; if(timeLeft >= 0){ //break down time left into hours, minutes, seconds hoursLeft = Math.floor(timeLeft/3600); remainder = timeLeft%3600; minutesLeft = Math.floor(remainder/60); remainder = remainder%60; secondsLeft = remainder; document.getElementById('cellHours').innerHTML = hoursLeft; document.getElementById('cellMinutes').innerHTML = minutesLeft; document.getElementById('cellSeconds').innerHTML = secondsLeft; } else { clearInterval(begin); } } </script> </head> <body> <form> <!-- Table to input total time --> <table> <caption style="font-weight: bold">Total Time</caption> <th>Hours</th> <th>Minutes</th> <th>Seconds</th> <tr> <td><input type="text" id="txtHours" value="0" size="5" /></td> <td><input type="text" id="txtMinutes" value="0" size="5" /></td> <td><input type="text" id="txtSeconds" value="0" size="5" /></td> </tr> </table> <!-- Table to output time left --> <table name="tblTimer" id="tblTimer" width="500px" style="margin: 70 0 0 0" border="1"> <caption style="font-weight: bold">Time Left</caption> <th>Hours Left</th> <th>Minutes Left</th> <th>Seconds Left</th> <tr> <td id="cellHours" align="center">0</td> <td id="cellMinutes" align="center">0</td> <td id="cellSeconds" align="center">0</td> </tr> </table> <!-- Display control buttons --> <table style="margin: 50 0 0 0"> <tr> <td> <input type="button" value="Start Timer" onclick="startTimer();" /> </td> <td> <input type="button" value="Stop Timer" onclick="clearInterval(begin);" /> </td> </tr> </table> </form> </body> </html>

  • 03-05-2011, 07:13 PM#9

    New to the CF scene

    You need a semicolon after var begin.


  • 03-05-2011, 08:43 PM#10


  • 03-05-2011, 11:28 PM#11

    Banned
    Hi CAS,

    Semi colons as line delimeters are optional in javascript as long as you don't start a new code statement on the same line.

    Personally I think they should be mandatory, but that is a whole different issue.

    The code I posted is an example timer I put together from somewhere (can't rememeber where) quite a few years ago and could use some "tidying up", but it works as is so I post it where appropriate as a guide only.
    Originally Posted by CAS

    You need a semicolon after var begin.


  • 0 thoughts on “Html And Xhtml Tutorial 2 Review Assignment

    Leave a Reply

    Your email address will not be published. Required fields are marked *