Question

In: Computer Science

For this assignment, you are going to build upon several skills that you've learned: Create an...

For this assignment, you are going to build upon several skills that you've learned:

  • Create an object that contains objects.
  • Using querySelectorAll to read a nodeList from the DOM.
  • Looping through the nodeList then updating the HTML page.

Set up

Create the assignment in a "week6" folder with the typical files:

  • index.html
  • css/styles.css
  • js/scripts.js

This is the standard structure that we'll use in all assignments.

Here is the HTML to use for this assignment. Change the meta author tag to include your name!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Working with Objects and NodeLists</title>
    <meta name="description" content="We want to update an HTML page with information from a data object.">
    <meta name="author" content="C SCI 212 Student">

    <!-- link to external CSS file -->
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <!-- Content of the page goes here. -->
    <h1>Introduction</h1>
    <section class="intro">
        <h2>Introduction</h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>

    <section class="student-info">
        <h2>Student Information</h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>
    
    
    <!-- link to external JS file -->
    <script src="js/scripts.js"></script>
</body>
</html>

The Problem

We have a JavaScript object that contains student information.

We want to update the HTML page with information from the JavaScript object.

Instructions

  1. Use window.onload to set up your program to run after the page has been loaded.
  2. Create a JavaScript object that contains the 5 JavaScript objects

Solutions

Expert Solution

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Working with Objects and NodeLists</title>
    <meta name="description" content="We want to update an HTML page with information from a data object.">
    <meta name="author" content="C SCI 212 Student">

    <!-- link to external CSS file -->
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <!-- Content of the page goes here. -->
    <h1>Introduction</h1>
    <section class="intro">
        <h2>Introduction</h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>

    <section class="student-info">
        <h2>Student Information</h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>
  
  
    <!-- link to external JS file -->
    <script src="js/scripts.js"></script>
</body>
</html>

style.css

body {/*for body of html*/
background-color: lightblue;
}

h1 {/*for h1 tag of html*/
color: white;
text-align: center;
}

p {/*for paragraph tah of html*/
font-family: verdana;
font-size: 20px;
}

scripts.js
function studentInfo(){
   var myNodelist = document.querySelectorAll("p");//get total nodelist of <p> tag in html
   var length=myNodelist.length;//get total length of <p> tag in html

   for(let i = 7; i < length; i++){//run for loop for last 7 <p> tags in studentInfo section
       myNodelist[i].innerHTML="Student paragraph with index "+i;//set data inside <p> tag

   }
}
function intro(){
   var myNodelist = document.querySelectorAll("p");//get total nodelist of <p> tag in html
   var length=myNodelist.length;//get total length of <p> tag in html

   for(let i = 0; i < 7; i++){//run for loop for first 7 <p> tags in intro section
       myNodelist[i].innerHTML="Intro paragraph with index "+i;//set data inside <p> tag

   }
}
window.onload = function() {
       //intro();//call function intro
    studentInfo();//call function studentInfo
}

Output

venereology answered 1 year ago
Next > < Previous

Related Solutions

In this assignment, you will be practicing the Java OOP skills we've learned this week in...
In this assignment, you will be practicing the Java OOP skills we've learned this week in implementing a customized mutable Array class. Please read the following requirements carefully and then implement your own customized Array class: === 1) Basic (100' pts total) === Your Array class must provide the following features: --1.1) (20' pts) Two constructors. One takes the input of the initialized capacity (int) and create the underlying array with that capacity; the other takes no input and creates...
In this assignment, you will be practicing the Java OOP skills we've learned this week in...
In this assignment, you will be practicing the Java OOP skills we've learned this week in implementing a customized mutable Array class. Please read the following requirements carefully and then implement your own customized Array class: === 1) Basic (100' pts total) === Your Array class must provide the following features: --1.1) (20' pts) Two constructors. One takes the input of the initialized capacity (int) and create the underlying array with that capacity; the other takes no input and creates...
Please use the skills you learned in section 9.2 for this assignment. For this activity, you...
Please use the skills you learned in section 9.2 for this assignment. For this activity, you will be creating a confidence interval for the average number of hours of TV watched. Last semester, my MAT 152 online students asked the question, “How many hours of screen time do you have in a typical week?” Please use the data they collected to answer the following questions. Data: 21, 2, 28, 30, 18, 21, 25, 20, 25, 14, 21, 25, 50, 39,...
Please use the skills you learned in section 9.2 for this assignment. For this activity, you...
Please use the skills you learned in section 9.2 for this assignment. For this activity, you will be creating a confidence interval for the average number of hours of TV watched. Last semester, my MAT 152 online students asked the question, “How many hours of screen time do you have in a typical week?” Please use the data they collected to answer the following questions. Data: 21, 2, 28, 30, 18, 21, 25, 20, 25, 14, 21, 25, 50, 39,...
CS 400 Assignment 2: applying ArrayList In this assignment, you are going to build a program...
CS 400 Assignment 2: applying ArrayList In this assignment, you are going to build a program that can help rental car companies to manage their rental fleet. Requirement: - build ArrayList class as container. - build Car class/structure to represent car objects. - An ArrayList object is to hold Car objects. Car class should have following fields: - id (int) - make (string) - model (string) - color (string) Instructions: - make up 15 cars and save them into a...
In this assignment, which continues to build on last week's assignment, you will create a mind...
In this assignment, which continues to build on last week's assignment, you will create a mind map identifying the steps in the training process for a CRM program to help you understand the important role training plays in an organization. It further helps you understand the importance of training as you explore how training is designed, delivered, and measured for success I need more info on what a CRM is and Which training evaluation methods would you recommend to assess...
Based upon a bit of research, what you've learned in your prior coursework, or any observations...
Based upon a bit of research, what you've learned in your prior coursework, or any observations from your industry experiences, what are some of the key strategic functions of the CFO in the current world of business? How does the role of the CFO differ from that of a company controller? Does every company require a full-time CFO? Be sure to include support or examples in your comments.
MBA 5010 Week 4 Integrative Assignment This week, you’re going to build on the knowledge you...
MBA 5010 Week 4 Integrative Assignment This week, you’re going to build on the knowledge you gained. Your assignment is to deconstruct the economics underlying Airbnb. Specifically, I want you to answer the following questions: • Does Airbnb capture a sufficient amount of any value generated to remain a viable business? The purpose of this question is to provide you an opportunity to demonstrate your understanding of the economics of value creation. So, emphasize this aspect of your answer. Try...
Requirements: In this assignment, you are going to create two switch functions. The first function is...
Requirements: In this assignment, you are going to create two switch functions. The first function is going to be called switchVal and the second is going to be called switchRef. The goal of this assignment is to demonstrate the understanding of what pass-by-reference (Links to an external site.) and pass-by-value (Links to an external site.) do when working with functions that you create. The two functions that you will modify need to accept two parameters and inside them they need...
Using what you have learned in Assignment#1, you are going to further develop your own fast...
Using what you have learned in Assignment#1, you are going to further develop your own fast casual restaurant brand in Burnaby, B.C that will target a particular segment or segments of the fast casual restaurant market in Burnaby, B.C. This means that you will need to think of who your target consumer is. In this part of the assignment we are going to focus on the personality of a brand, i.e., the brand persona. When we are developing our brand’s...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT