The second assignment consisted of the two exercises from Lab 1. That second assignment is due this Wednesday, February 4. You can put your completed work in the cs271 directory inside your www directory, and add a link (or links) to your home page for cs271. I will take it as a matter of honor that you will not look at the source code for other people's work before the due date.
For your first exercise, you should make a web page that displays a "countdown timer" that displays the number of days, hours, minutes, and seconds to some particular date in the future (presumably within the next year; otherwise, you should display years as well). You can use any date you like, such as the start of Spring break, graduation day, or your 21-st birthday. You can display the time as a simple string such as "Time to Spring break: 39 days, 4 hours, 27 minutes, and 23 seconds", or you can make the display fancier if you want.
You should write a function that sets the display to the correct value at the time the function is called. Any HTML element whose content you want to change should have an id attribute, so that you can change the content by assigning the new content to document.getElementById(theID).innerHTML. If the value of specialDay is the Date object representing the time to which you are counting down, you can get the number of milliseconds until that time with
var millis = specialDay - (new Date());
Once you have your update function, you need to make sure that that function is called once per second. You can do this using the setInterval function:
setInterval( func, millis );
In the body of your page, you should include a one-line script that calls your function to display a calendar for the current day. (That is, pass "new Date()" as the parameter when you call the function.)Here is what my calendar looked like when run with a date of December 25, 2009:
And below this paragraph is the HTML code that produces this calendar. Your function will have to write this sort of code to the document. Note that the entity " " represents a "non-breaking space." It is used here in empty cells of the calendar since without it, the cell might not have a border. Note the use of "<th>" and "<td>". These are mostly equivalent. ("TH" stands for "table heading" and "TD" for table data, but they both just stand for items in the table.) I use them here to apply different styles to different parts of the table. And note that "colspan=7" in the first row of the table makes that cell extend across 7 table columns. If you look at the <td> for the 25-th, you'll note that it has class='today'. This is used to apply the pink background to that cell of the table.
<table cellspacing=0 cellpadding=2 border=2> <tr><th colspan=7>Dec, 2009</th></tr> <tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr> <tr><td> </td><td> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td> <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td class='today'>25</td><td>26</td> <tr><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td> </td><td> </td> </table>