Question

I have trouble in my code with - Create and append the fancySheet link element to...

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());

}

Homework Answers

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;
(541) 555-6002
</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.

Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
I have created images that I would like to have placed where the message is revealed?...
I have created images that I would like to have placed where the message is revealed? What is the best way to make it work. I tried to make it work and have not had much success. My images are saved as png's. Here is my original code. <!Doctype html> <html> <head> <meta charset="UTF-8"> <title>Dice Game</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div class="row" align="center"> <div class="col-4"> <h3>Your Dice</h3> <img src="images/d1.png" width="100" height="100" alt="roll: 1" id="mydice1"> <img src="images/d1.png" width="100" height="100"...
[5 pts] An element with no closing tag is called which of the following? an attribute...
[5 pts] An element with no closing tag is called which of the following? an attribute an empty element a Socratic element a hermit element [5 pts] <a href="#info">Click Here</a> The above HTML is an example of which of the following? An external link An internal link An anonymous function A source attribute [5 pts] Which of the following should be primarily responsible for the design and formatting of a Web page? CSS HTML JavaScript XML [5 pts]   The following:...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
Java Script I need the code to produce these 3 output. I can only get it...
Java Script I need the code to produce these 3 output. I can only get it to produce input #3 I need it to produce the following: // Input #1: // http://www.example.com // Output // http://www.example.com // Input #2: // http://www.example.com?name=r2d2 // Output // http://www.example.com // name: r2d2 // Input #3: // http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no // Output // http://www.example.com // name: r2d2 // email: [email protected] // human: no THIS IS WHAT I HAVE SO FAR: HTML <!DOCTYPE html> <html lang="en"> <head> <meta...
6.12 LAB: Grade distribution In this lab, you will write a JavaScript program that generates a...
6.12 LAB: Grade distribution In this lab, you will write a JavaScript program that generates a bar graph of letter grades from a distributions of scores. Implement the parseScores function (1 point) Implement the parseScores function to take a space-separated string of scores as an argument and return an array of score strings. Each score is a number in the range [0, 100]. Ex: "45 78 98 83 86 99 90 59" → ["45","78","98","83","86","99","59"] Hint: JavaScript's string split() function can...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT