Data Files needed for this Case Problem: sd$\_$map$\_$txt$.$html$,$ sd$\_$mapper$\_$txt$.$js$,2$ CSS

files, $28$ PNG files

Star Dust Stories Dr$.$ Andrew Weiss of Thomas & Lee College maintains an astronomy page

called Star Dusk Stories. One of the tools of the amateur stargazer is a planisphere, which

is a handheld device composed of two flat disks: one disk shows a map of the

constellations, and the other disk contains a window corresponding to the part of the sky

that is visible at a given time and date. When a user rotates the second disk to the current

date and time, the constellations that appear in the window correspond to the constellations

currently visible in the nighttime sky$.$

Dr$.$ Weiss has asked for your help in writing a JavaScript program to display a planisphere

showing the constellations visible at the current date and time. He has created $24$ different

sky chart image files, named sd$\_$sky$0.$png through sd$\_$sky$23.$png$,$ that represent $24$ different

rotations of the nighttime sky$.$ He has also created an image containing a transparent

window through which a user can view a selected sky chart. A preview of the completed web

page is shown in Figure $9-41.$

Figure $9-41$

Star Dust Stories planisphere

Patrick Carey

Complete the following:

$1$

Use your editor to open the sd$\_$map$\_$txt$.$html and sd$\_$mapper$\_$txt$.$js files

from the html$09$ case$1$ folder. Enter your name and the date in the

comment section of each file, and save them as sd$\_$map.html and

sd$\_$mapper.js respectively.

$2$

Go to the sd$\_$map.html file in your editor. Directly above the closing

tag, insert a script element that links the page to the sd$\_$mapper.js file.

Defer the loading of the script file until after the rest of the web page is loaded

by the browser.

$3$

Study the contents of the file and then save your changes.

$4$

Go to the sd$\_$mapper.js file in your editor. At the top of the file, insert a

statement to apply your JavaScript code with strict usage.

$5$

Declare a variable named thisTime containing a Date object for February $3,$

$2018$ at $3$:$15$:$28$ a$.$m$.$

$6$

Use the toLocaleString$()$ method to save the text of the thisTime variable

in the timeStr variable.

$7$

Change the inner HTML code of the page element with the ID timestamp to

the value of the timeStr variable.

$8$

Next, you will determine which sky map to show in the web page. First, create

a variable named thisHour, using the getHours$()$ method to extract the hour

value from the thisTime variable.

$9$

Create a variable named thisMonth using the getMonth$()$ method to extract

the month number from the thisTime variable.

$10$

The number of the map to use with the given hour and month is calculated

with the formula

$(2\backslash$times month $+$ hour$)\%24$

where month is the value of the thisMonth variable and hour is the value of

the thisHour variable. Store the value of this formula in the mapNum variable.

$11$

You will use JavaScript to write the HTML code for the inline element showing

the sky image to use in the web page. Create a variable named imgStr that

stores the following text string

where Map is the value of the mapNum variable. $($Hint: Use the $+$ operator to

combine text strings together and be sure to include the single quote

character within the text strings.$)$

$12$

For the page element with the ID planisphere, use the

insertAdjancentHTML$()$ to insert the value of the imgStr variable directly

after the element$$s opening tag.

$13$

Add descriptive comments to the file, documenting your work.

$14$

Save your changes to the file and then open sd$\_$map.html in your browser.

Verify that your planisphere map and date and time resemble that shown in

Figure $9-41.$

$15$

Return to the sd$\_$mapper.js file in your editor. Modify the command that

creates the thisTime variable so that it uses the current date and time,

whatever that may be$.$

$16$

Reload sd$\_$map.html in your browser and verify that it shows the current date

and time along with the star map for the sky at that moment.