HTML and CSS Reference
In-Depth Information
Complete the following:
1. Use your text editor to open the
malltxt.htm
file from the tutorial.11\case4 folder,
enter
your name
and
the date
in the head section, and then save the file as
mall.htm
in the same folder.
2. Insert a Web form named
mallclock
that has the following fields:
a. A
dayNow
field, which will display the current date in the format
month/day/year
b. A
timeNow
field, which will display the time in 12-hour format
c. A
days
field, which will display the number of days until the mall opens
d. An
hours
field, which will display the number of hours left in the current day
e. A
minutes
field, which will display the number of minutes left in the current
hour; round this value to the nearest minute
3. Add the remaining content to the Web page. Refer to the
mall.txt
text file in the
tutorial.11\case4 folder for the content that Alice wants you to include. Insert any
styles for the Web page in an external file named
mall.css
. Link the
mall.htm
file to
this style sheet.
4. Use your text editor to open the
timetxt.js
file from the tutorial.11\case4 folder,
enter
your name
and
the date
in the comment section, and then save the file as
time.js
in the same folder.
5. In the file, add the following functions (refer to the functions and codes from the
tutorial case for help in writing these functions):
a. A
daysDiff()
function that calculates the number of days, rounded down to the
next lowest integer, between a starting date and a stopping date
b. An
hoursDiff()
function that calculates the number of hours left in the current
day rounded down to the next lowest integer
c. A
minutesDiff()
function that calculates the number of minutes left in the cur-
rent hour rounded down to the next lowest integer
d. A
showDate()
function that displays the value of a
Date
object in the format
month
/
day
/
year
e. A
showtime()
function that displays the value of a
Date
object in the format
hour
:
minute
a.m./p.m.
6. Insert a
script
element in the
mall.htm
file to link it to the functions in the
time.js
script file.
7. Add an embedded script to the
mall.htm
file. Use the functions from the
time.js
ile
to create a function named
countDownClock()
that displays the current date and
time in the document as well as the days, hours, and minutes remaining until the
mall opens. Assume an opening date of March 23 and an opening time of 9:00 a.m.
For the year, use a starting year value of the current year; but if the current date falls
after March 23 of the current year, change the year value for the opening date to the
next year. (Hint: Apply conditional operators along with the
getFullYear()
and
setFullYear()
functions to set the year value of the opening date.)
8. Have the
countDownClock()
function run when the page initially opens, and then
every 60 seconds thereafter.
9. Submit your completed files to your instructor, in either printed or electronic form,
as requested.