Question

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 linkelement 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 altattribute 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 hrefattribute of the link element with the ID“fancySheet” to the value of the altattribute 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.

na_style.js///

"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.

*/

function randInt(size) {

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

}

Answer 1

Script file

filename: na_styler.js

"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.
*/

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

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


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

  
//Style sheet element assignments
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);
}

Hope this helps!

Please let me know if any changes needed.

Thank you!

Hope you're safe during the pandemic.