Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Steve Pierce
Courses Plus Student 1,091 PointsUsing Javascript how do I get the image to show up?
Instructions as follow: Using JavaScript 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
<img src='sd_skyMap.png' />
where Map is the value of the mapNum variable. Use the + operator to combine text strings together and be sure to include the single quote character within the text strings.
HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Star Dust Stories: Using a Planisphere</title> <link href="sd_base.css" rel="stylesheet" /> <link href="sd_layout.css" rel="stylesheet" /> <script src="sd_mapper.js" defer></script> </head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Astronomers</a></li>
<li><a href="#">Moons</a></li>
<li><a href="#">Planets</a></li>
<li><a href="#">Stars</a></li>
<li><a href="#">Physics</a></li>
</ul>
</nav>
<img src="sd_logo.png" alt="SkyWeb" />
</header>
<section id="left">
<article>
<h1>The Planisphere</h1>
<p>A <strong>planisphere</strong> 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.
</p>
<p>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<sup>°</sup> North. To use a planisphere, hold directly overhead with
the arrow facing north as indicated on the viewing disk.</p>
</article>
</section>
<section id="right">
<div id="planisphere">
<img id="mask" src="sd_mask.png" alt="" />
<div id="timeStamp">March 1, 2018 4:53 PM</div>
</div>
</section>
<footer>
Star Dust Stories © 2018 English (US) <span><a href="#">About</a>
<a href="#">Developers</a> <a href="#">Privacy</a>
<a href="#">Terms</a> <a href="#">Help</a></span>
</footer>
</body>
</html>
CSS Stylesheet - sd_base
@charset "utf-8";
/* 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; }
CSS Stylesheet - sd_layout
@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; }
JavaScript
"use strict";
var thisTime = new Date();
var timeStr = thisTime.toLocaleString();
document.getElementById("timeStamp").innerHTML = timeStr;
var thisHour = thisTime.getHours();
var thisMonth = thisTime.getMonth();
var month = thisMonth;
var hour = thisHour;
var mapNum = ((2*thisMonth + thisHour) % 24);
var imgStr = ("<img src='sd_skyMap.png' />");
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
1 Answer
Steven Parker
243,318 PointsIt seems like you overlooked the part of the instructions that said "...where Map is the value of the mapNum variable. Use the + operator to combine text strings together and be sure to include the single quote character within the text strings."
So that assignment should probably look more like this:
var imgStr = "<img src='sd_sky" + mapNum + ".png' />";
For a more accurate analysis in future questions, always provide a link the the course page you are working with.
Steven Parker
243,318 PointsSteven Parker
243,318 PointsWhen posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.
Or watch this video on code formatting.