Question

I have trouble in my code with

- Create and append the fancySheet link element to the document head

- Create and append figBox element to element with id box

- Populate the figure box with preview images of the five fancy style sheets

I don't understand what went wrong.

New Perspectives HMTL5, CSS3, and JavaScript

T12 Case Problem 1: New Accents Photography

JavaScript File

Event Listener

Go to the na_styler.js file in your editor. Add an event listener that runs the setStyles() function when the page loads.

JavaScript Function

Create the setStyles() function using the commands listed in the steps below.

Christine wants one of five fancy style sheets to be randomly used when the page is opened. Declare the styleNum variable equal to the value returned by the randInt() function, using 5 as the parameter value.

Create an element node for the link element and set its rel attribute to “stylesheet”, its id attribute to “fancySheet”, and its href attribute to “na_style_num.css” where num is the value of the styleNum variable. Append the fancySheet style element to the document head, adding it to the document’s style sheets collection.

Christine wants users to be able to choose between the five fancy style sheet themes she has created by clicking thumbnail images from a figure box. Create an element node named figBox for the figure element. Set its id attribute to “styleThumbs” and append it to the div element with the ID “box”.

Next, populate the figure box with preview images of the five fancy style sheets. Insert a for loop with an index that goes from 0 up through 4 and each time through the loop do the following:

1. Create an img element node named sheetImg with a src attribute of “na_small_num.png” and an alt attribute value of “na_style_num.css” where num is the value of the index in the for loop.
2. Have the browser load a different style sheet when the user clicks one of the thumbnail images by adding an event handler to sheetImg that runs an anonymous function changing the href attribute of the link element with the ID “fancySheet” to the value of the alt attribute of the event target.
3. Append sheetImg to the figBox element node.

Next, design the appearance of the thumbnail figure box. Create an embedded style sheet named thumbStyles and append it to the document head.

Add the following style rules to the thumbStyles style sheet:

figure#styleThumbs {
        position: absolute;
        left: 0px;
        bottom: 0px;
}
figure#styleThumbs img {
        outline: 1px solid black;
        cursor: pointer;
        opacity: 0.75;
}
figure#styleThumbs img:hover {
        outline: 1px solid red;
        opacity: 1.0;
}

Document your work with informative comments and proceed to the next step.

"use strict";

/*

   New Perspectives on HTML5, CSS3 and JavaScript 6th Edition

   Tutorial 12

   Case Problem 1

   Author:

   Date:   

   Filename: na_styler.js

   Functions

   =========

   

   setStyles()

      Sets up the style sheets and the style sheet switcher.

      

   randInt(size)

      Returns a random integer from 0 up to size-1.

*/

window.addEventListener("load", setStyles);

function setStyles() {

  var styleNum = randInt(5);

  var link = document.createElement("link");    

  link.setAttribute("href","na_style_num.css");

  link.setAttribute("rel", "stylesheet");

  link.setAttribute("id", "fancysheet");

  

var figBox = document.createElement("figure");

figBox.setAttribute("id", "styleThumbs");

document.getElementById("box").appendChild(figBox);

for (var i = 0; i < 5; i++) {

  var sheetImg = document.createElement("img");

  sheetImg.setAttribute("src", "na_small_" + i + ".png");

  sheetImg.setAttribute("alt", "na_style_" + i + ".css");

  

  figBox.appendChild(sheetImg);

}

       

    

var thumbStyles = document.createElement("style");

  document.head.appendChild(thumbStyles);

document.styleSheets[document.styleSheets.length-1].insertRule(

"figure#styleThumbs { \

position: absolute; \

left: 0px;; \

bottom: 0px; \

}", 0);

document.styleSheets[document.styleSheets.length-1].insertRule(

"figure#styleThumbs img { \

outline: 1px solid black; \

cursor: pointer; \

opacity: 0.75; \

}", 1);

document.styleSheets[document.styleSheets.length-1].insertRule(

"figure#styleThumbs img:hover { \

outline: 1px solid red; \

opacity: 1.0; \

}", 2);

}

function randInt(size) {

   return Math.floor(size*Math.random());

}

Answer 1

Working code implemented in HTML, CSS & JS and appropriate comments provided for better understanding:

Here I am attaching code for these files:

• na_home.html
• na_styler.js
• na_base.css
• na_layout.css
• na_style_0.css
• na_style_1.css
• na_style_2.css
• na_style_3.css
• na_style_4.css

Source code for na_home.html:

<!DOCTYPE html>
<html>
<head>

<title>New Accents Photography</title>
<meta charset="utf-8" />

<link href="na_base.css" rel="stylesheet" />
<link href="na_layout.css" rel="stylesheet" />

<script src="na_styler.js" async></script>

</head>

<body>
<section id="main">
<div id="header">
<a href="#">Enter Site</a>
</div>
<nav class="links">
<ul>
<li><a href="#">Galleries</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Albums</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Wedding Planner</a></li>
<li><a href="#">Shopping Cart</a></li>
</ul>
</nav>
<address>
New Accents Photography &#9830;
14 Mountain View Road &#9830;
Ashland, OR 97521 &#9830;
[phone]
</address>
<div id="box">
<article>
<p>New Accents is a photography studio specializing
in wedding portraiture; serving the
needs of Southern Oregon and Northern California.
</p>
<p>We'll capture your wedding in whatever fashion you wish:
from romantic to zany and all the styles in between.
</p>
</article>
</div>
<footer>
<span class="left">New Accents Photography &copy; 2018 (US)</span>
<span class="right">
<a href="#">About</a>
<a href="#">Terms</a>
<a href="#">Help</a>
</span>
</footer>
</section>
</body>
</html>

Source code for na_styler.js:

"use strict";

window.addEventListener("load", setStyles);

function setStyles() {

var styleNum = randInt(5);
var newStyle = document.createElement("link");
newStyle.setAttribute("rel", "stylesheet");   
newStyle.setAttribute("id", "fancySheet");   
newStyle.setAttribute("href", "na_style_" + styleNum + ".css");
document.head.appendChild(newStyle);


var figBox = document.createElement("figure");
figBox.setAttribute("id", "styleThumbs");
document.getElementById("box").appendChild(figBox);

// Create thumbnails for each style sheet
  
for (var i = 0; i < 5; i++) {
var sheetImg = document.createElement("img");
sheetImg.setAttribute("src", "na_small_" + i + ".png");
sheetImg.setAttribute("alt", "na_style_" + i + ".css");
sheetImg.onclick = function(e) {
document.getElementById("fancySheet").href = e.target.alt;
};
figBox.appendChild(sheetImg);
}

var thumbStyles = document.createElement("style");
document.head.appendChild(thumbStyles);

document.styleSheets[document.styleSheets.length-1].insertRule(
"figure#styleThumbs { \
position: absolute; \
left: 0px; \
bottom: 0px; \
}", 0);

document.styleSheets[document.styleSheets.length-1].insertRule(
"figure#styleThumbs img { \
outline: 1px solid black; \
cursor: pointer; \
opacity: 0.75; \
}", 1);
document.styleSheets[document.styleSheets.length-1].insertRule(
"figure#styleThumbs img:hover { \
outline: 1px solid red; \
opacity: 1.0; \
}", 2);
}

function randInt(size) {
return Math.floor(size*Math.random());
}

Source code for na_base.css:

@charset "utf-8";

article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}

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 {
line-height: 1.2em;
}

ul, ol {
list-style: none;
}

nav ul {
list-style: none;
list-style-image: none;
}

nav a {
text-decoration: none;
}

Source code for na_layout.css:

@charset "utf-8";

/* Body Styles */
body {
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
outline: 1px solid black;
margin: 0px auto;
width: 900px;
margin: 60px auto;
position: relative;
background: rgba(0, 0, 0, 0.8);
}

/* Header styles */

#main > div#header {
width: 100%;
height: 131px;
text-align: right;
}

#main > div#header > img {
float: left;
}

#main > div#header {
background: url(na_logo.png) no-repeat left top;
}

#main > div#header > a {
color: white;
display: inline-block;
margin: 10px;
font-size: 1em;
}

#main > div#header > a:hover {
color: black;
}

/* Box Styles */

div#box {
width: 100%;
height: 590px;
position: relative;
}

/* Navigation lists */

nav.links {
clear: left;
width: 800px;
position: relative;
top: -35px;
margin-left: 100px;
}

nav.links ul {
margin: 0px;
list-style-type: none;
}

nav.links ul li {
float: left;
font-size: 16px;
height: 20px;
line-height: 20px;
margin-right: 20px;
padding-right: 5px;
border-right: 1px solid white;
}

nav.links ul li:first-of-type {
margin-left: 15px;
}

nav.links ul li:last-of-type {
border-right: none;
}

nav.links ul li a {
font-family: 'Comic Sans MS', cursive;
letter-spacing: 1px;
color: rgb(241, 241, 241);
color: rgba(255, 255, 255, 0.8);
text-shadow: black 2px 1px 0px;
}

nav.links ul li a:hover {
background-color: rgb(188, 221, 255);
background-color: rgba(255, 255, 255, 0.2);

}

/* Article Styles */

article {
position: absolute;
color: rgb(101, 101, 101);
top: 200px;
left: 280px;
width: 440px;
font-size: 1.2em;
}

article p {
margin: 0px 0px 10px 0px;
background-color: transparent;
}

div#box {
background: white;
position: relative;
}

address {
position: absolute;
top: 5px;
left: 0px;
font-size: 0.7em;
font-style: normal;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}

/* Page footer styles */

footer {
height: 40px;
width: 100%;
color: white;
font-size: 0.8em;
}

footer span a {
color: white;
}

footer span.left {
float: left;
margin-left: 20px;
}

footer span.right {
float: right;
margin-right: 20px;
}

Source code for na_style_0.css:

@charset "utf-8";

/* Set the default page element styles */

body {
background: url(na_back_0.png) repeat top left / 450px 450px;
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
background: rgb(121, 39, 32);
box-shadow: rgb(121, 39, 32) 0px 0px 50px;
}

div#box {
background: url(na_wall_0.png) no-repeat;
background-size: cover;
}

/* Article Styles */

article {
top: 0px;
left: 0px;
}

article p {
color: rgb(238, 105, 90);
font-size: 1em;
font-family: 'Comic Sans MS', cursive;
letter-spacing: 1px;
text-shadow: black 0px 0px 15px,
black 0px 0px 1px;
background-color: rgba(0, 0, 0, 0.09);
padding: 10px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}

article p:first-of-type {
position: absolute;
top: 5px;
left: 0px;
width: 240px;
}

article p:last-of-type {
position: absolute;
top: 5px;
left: 650px;
width: 240px;
}

address {
color: yellow;
color: rgba(249, 247, 121, 0.9);
}

/* Page footer styles */

footer span a:hover {
color: rgba(249, 247, 121, 0.9);
}

Source code for na_style_1.css:

@charset "utf-8";

/* Set the default page element styles */

body {
background: url(na_back_1.png) repeat top left / 530px 300px;
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
background: rgb(59, 136, 197);
box-shadow: rgb(43, 87, 129) 0px 0px 50px;
}

div#box {
background: url(na_wall_1.png) no-repeat;
background-size: cover;
}
/* Article Styles */

article {
position: absolute;
color: rgb(102, 115, 126);
top: 15px;
left: 620px;
width: 240px;
font-size: 1.4em;
font-family: 'Times New Roman', Times, serif;
}

article p {
margin: 0px 0px 10px 0px;
text-shadow: rgb(255, 255, 255) 3px 3px 8px;
}

address {
color: rgb(227, 227, 163);
}

/* Page footer styles */

footer span a:hover {
color: rgb(227, 227, 163);
}

Source code for na_style_2.css:

@charset "utf-8";

/* Set the default page element styles */

body {
background: url(na_back_2.png) repeat top left / 450px 450px;
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
background: rgb(72, 91, 13);
box-shadow: rgb(72, 91, 13) 0px 0px 50px;
}

div#box {
background: url(na_wall_2.png) no-repeat;
background-size: cover;
}
/* Article Styles */

article {
position: absolute;
top: 370px;
left: 0px;
color: rgba(255, 201, 255, 0.5);
width: 240px;
font-size: 1em;
text-shadow: rgb(0,0,0) 3px 3px 8px;
}

article p:first-of-type {
position: absolute;
top: 0px;
left: 0px;
width: 240px;
color: white;
color: rgba(255, 255, 255, 0.8);
background-color: rgba(155, 51, 0, 0.6);
font-size: 1em;
text-shadow: rgb(0,0,0) 3px 3px 8px;
padding: 10px;
-moz-border-bottom-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
border-bottom-left-radius: 25px;
}

article p:last-of-type {
position: absolute;
color: white;
color: rgba(255, 255, 255, 0.8);
top: 100px;
left: 660px;
width: 240px;
font-size: 1em;
text-shadow: rgb(0,0,0) 3px 3px 8px;
text-shadow: rgb(0,0,0) 3px 3px 8px;
padding: 10px;
background-color: rgba(155, 51, 0, 0.6);
-moz-border-top-right-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-right-radius: 25px;

}

address {
color: rgba(255, 170, 89, 0.7);
}

/* Page footer styles */

footer span a:hover {
color: rgba(255, 170, 89, 0.7);

}

Source code for na_style_3.css:

@charset "utf-8";

/* Set the default page element styles */

body {
background: url(na_back_3.png) repeat top left / 448px 336px;
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
background: rgb(101, 101, 101);
box-shadow: rgb(0,0,0) 0px 0px 50px;
}

div#box {
background: url(na_wall_3.png) no-repeat;
background-size: cover;
}

/* Article Styles */

article {
position: absolute;
color: rgba(255, 201, 255, 0.5);
top: 45px;
left: 20px;
width: 240px;
font-size: 1.1em;
}

article p {
margin: 0px 0px 10px 0px;
text-shadow: rgb(0,0,0) 3px 3px 8px;
}

address {
color: rgba(255, 201, 255, 0.7);
}

/* Page footer styles */

footer span a:hover {
color: rgba(255, 201, 255, 0.7);
}

Source code for na_style_4.css:

@charset "utf-8";

/* Set the default page element styles */

body {
background: url(na_back_4.png) repeat top left/ 450px 450px;
font-family: Verdana, Geneva, sans-serif;
}

/* Main Section Styles */
section#main {
background: rgb(211, 109, 0);
box-shadow: rgb(211, 109, 0) 0px 0px 50px;
}

div#box {
background: url(na_wall_4.png) no-repeat;
background-size: cover;
}
/* Article Styles */

article {
position: absolute;
top: 15px;
left: 15px;
width: 230px;
font-size: 0.9em;
}

article p {
font-family: 'Comic Sans MS', cursive;
letter-spacing: 1px;
margin: 0px 0px 10px 0px;
width: 220px;
}

article p:first-of-type {
position: absolute;
top: 30px;
left: 20px;
-o-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
transform: rotate(-25deg);
border: 3px solid rgb(211, 109, 0);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 10px;
color: rgb(211, 109, 0);
background-color: rgb(249, 249, 165);

-moz-box-shadow: black 7px 7px 0px;
webkit-box-shadow: black 7px 7px 0px;
box-shadow: black 7px 7px 0px;
}

article p:last-of-type {
position: absolute;
top: 160px;
left: 145px;
width: 150px;
-o-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);
border: 3px solid rgb(211, 109, 0);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 10px;
color: rgb(211, 109, 0);
background-color: rgb(199, 242, 242);

-moz-box-shadow: black 7px -7px 0px;
webkit-box-shadow: black 7px -7px 0px;
box-shadow: black 7px -7px 0px;
}

address {
color: black;
}

/* Page footer styles */

footer span a:hover {
color: black;
}

Sample Output Screenshots:

Hope it helps, if you like the answer give it a thumbs up. Thank you.