CSIS 310 Mindtap Star Dust Stories
$9.00
Description
Star Dust Stories | Dr. Andrew Weiss of Thomas & Lee College maintains an astronomy page called Star Dust 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 corresponding 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_sky0.png through sd_sky23.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 the figure below.
Instructions
This Case Problem contains interactive instructions that you can complete to ensure you’ve completed the instruction correctly.
After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.
After you’ve completed an instruction, click the corresponding check box in your list of instructions. This will trigger simulated tests of your website to ensure that you successfully completed the instruction.
HTML File:
Document Setup
Go to the sd_map.html and sd_mapper.js files and enter your name and the date in the comment section of each file.
Script Element
Go to the sd_map.html file. 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.
JavaScript File
Go to the sd_mapper.js file. At the top of the file insert a statement to apply your JavaScript code with strict usage.
Variable Declaration
Declare a variable named thisTime containing a Date object for February 3, 2018 at 3:15:28 AM.
Use the toLocaleString() method to save the text of the thisTime variable in the timeStr variable.
Change the inner HTML code of the page element with the ID “timestamp” to the value of the timeStr variable.
Sky Map Variable
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.
Create a variable named thisMonth using the getMonth() method to extract the month number from the thisTime variable.
The number of the map to use with the given hour and month is calculated with the formula (2×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.
Sky Map HTML
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.)
For the page element with the ID planisphere, use the insertAdjacentHTML() to insert the value of the imgStr variable directly after the element’s opening tag.
Add descriptive comments to the file, documenting your work.
Verify
Go to the sd_map.html file and click the “Build Website” button. Verify that your planisphere map and date and time resemble that shown in the figure below.
Final Modifications
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.
Build
Re-open the sd_map.html file and and click the “Build Website” button. Verify that it shows the current date and time along with the star map for the sky at that moment.
FILES:
sd_base.css:
@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 1
Star Dust Stories Base Style Sheet
Filename: sd_base.css
*/
/* Basic styles to be used with all devices and under all conditions */
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set the default page element styles */
body {
margin: 0px;
width: 100%;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
font-weight: inherit;
line-height: 1.2em;
margin: 0px;
padding: 0px;
text-decoration: none;
vertical-align: baseline;
}
ul, ol {
list-style: none;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
Sd_layout.css:
@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 1
Star Dust Stories Layout Styles
Filename: sd_layout.css
*/
html {
background: url(sd_back.png) 100%/cover fixed;
}
strong {
font-weight: bold;
}
p a {
text-decoration: underline;
}
body {
background: url(sd_stars.png) rgb(51, 51, 51);
color: rgb(231, 231, 231);
float: none;
margin: 0px auto;
width: 90%;
max-width: 1000px;
min-width: 640px;
margin-top: 30px;
}
header {
width: 100%;
}
header nav.horizontal {
width: 100%;
}
header nav.horizontal li {
background-color: rgb(41, 41, 41);
display: block;
font-family: Tahoma, Geneva, sans-serif;
float: left;
width: 16.66%;
}
header nav.horizontal li a {
color: white;
display: block;
font-size: 0.8em;
height: 50px;
letter-spacing: 0.1em;
line-height: 50px;
text-align: center;
width: 100%;
}
header nav.horizontal li a:visited, header nav.horizontal li a:link {
color: white;
}
/* Navigation List Styles */
body > header a {
background-color: rgb(51, 51, 51);
border: 5px outset rgb(211, 211, 255);
}
body > header:active, body > header a:hover {
background-color: rgb(51, 51, 151);
}
header img {
clear: left;
display: block;
margin: 5px auto;
}
/* section layout */
section#left {
float: left;
width: 50%;
}
section#right {
float: left;
width: 50%;
}
footer {
clear: left;
width: 100%;
}
/* left section */
section#left article {
width: 95%;
margin: 0px auto;
}
section#left article h1 {
font-size: 34px;
font-family: ‘Courier New’, courier, monospace;
font-weight: bold;
margin: 20px 0px 20px 20px;
}
section#left article p {
margin: 0px 0px 20px 20px;
font-family: Verdana, Geneva, sans-serif;
}
/* right section */
div#planisphere {
position: relative;
width: 100%;
}
div#planisphere img {
display: block;
position: absolute;
top: 40px;
left: 10%;
width: 75%;
}
div#timeStamp {
position: absolute;
top: 5px;
left: 30%;
}
/* footer styles */
footer {
border-top: 2px solid rgb(171, 171, 171);
clear: left;
margin-top: 15px;
background-color: rgb(71, 71, 71);
text-align: right;
}
footer, footer span a {
color: rgb(231, 231, 231);
font-size: 11px;
padding: 10px;
}
Sd_map.html:
The Planisphere
A planisphere is a visual aid to astronomers and stargazers.
It consists of two disks: One displays all of the visible
constellations in the night sky, and the other covers the first
and contains a window that indicates the portion of the sky currently
visible. The second disk is then rotated to match the current date and
time. Planispheres come in a variety of sizes and types. The important
thing to remember is that you must have a planisphere that matches
the longitude of your stargazing location.
On the right is an online planisphere. It consists of two images laid on
top of one another. The top image is the viewing disk of the planisphere. The
bottom image contains the sky map. This planisphere is
automatically rotated for you, displaying the current date and time
and visible constellations for observers at a longitude of
40° North. To use a planisphere, hold directly overhead with
the arrow facing north as indicated on the viewing disk.