Do the following: 1. Use your code editor to open the project03-02_txt.html and project03-02_txt.js files from the js03 ► project02 folder. Enter your name and the date in the comment section of each file and save them as project03-02.html and project03-02.js, respectively. 2. Go to the project03-02.html file in your code editor and in the head section add a script element to load the project03-02.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes. 3. Go to the project03-02.js file in your code editor. Below the code that creates and populates the captions array, declare the htmlCode variable, setting its initial value to an empty text string. 4. Create a for loop with a counter that goes from 0 to less the length of the captions array in increments of 1. With each iteration, add the following text to the value of the htmlCode variable: caption [1] where / is the value of the counter for that iteration and captions[] is the corresponding element from the captions array. 5. After the for loop, change the inner HTML of the document element by the id "gallery" to the value of the htmlCode variable. 6. Save your changes to the file and then load project03-02.html your browser. Verify that the page displays the 14 images in the slide gallery along with their captions.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

need help with the instruction in the attached images aslo atached is a copy of the js code and i will paste html code below as i can only upload 2 images.

html code

<!DOCTYPE html>
<html>
<head>
   <!--
      JavaScript 7th Edition
      Chapter 3
      Hands-on Project 3-2

      Author: 
      Date:   

      Filename: project03-02.html
   -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Hands-on Project 3-2</title>
   <link rel="stylesheet" href="styles.css" />
</head>

<body>
   <header>
      <h1>
         Hands-on Project 3-2
      </h1>
   </header>

   <article>
      <h2>International Space Station Images</h2>
      <div id="gallery"></div>
   </article>
</body>
</html>

ject03-02 bxt html project03-02_bxtjs
A/*
JavaScript 7th Edition.
Chapter 3
Project 03-02
Application to generate a slide gallery
Author:
Date:
Filename: project03-02.js
let captions = new Array (14);
captions [0]="International Space Station fourth expansion [2009]";
captions [1]="Assembling the International Space Station [1998]";
captions [2] "The Atlantis docks with the ISS [2001]";
captions [3]="The Atlantis approaches the ISS [2000]";
captions [4]="The Atlantis approaches the ISS [2000]";
captions [5]="International Space Station over Earth [2002]";
captions [6]="The International Space Station first expansion [2002]";
captions [7]="Hurricane Ivan from the ISS [2008]";
captions [8] "The Soyuz spacecraft approaches the ISS [2005]";
captions [9]="The International Space Station from above [2006]";
captions [10]="Maneuvering in space with the Canadarm2 [2006]";
captions [11]="The International Space Station second expansion [2006]";
captions [12]="The International Space Station third expansion [2007]";
captions [13]="The ISS over the Ionian Sea [2007]";
Transcribed Image Text:ject03-02 bxt html project03-02_bxtjs A/* JavaScript 7th Edition. Chapter 3 Project 03-02 Application to generate a slide gallery Author: Date: Filename: project03-02.js let captions = new Array (14); captions [0]="International Space Station fourth expansion [2009]"; captions [1]="Assembling the International Space Station [1998]"; captions [2] "The Atlantis docks with the ISS [2001]"; captions [3]="The Atlantis approaches the ISS [2000]"; captions [4]="The Atlantis approaches the ISS [2000]"; captions [5]="International Space Station over Earth [2002]"; captions [6]="The International Space Station first expansion [2002]"; captions [7]="Hurricane Ivan from the ISS [2008]"; captions [8] "The Soyuz spacecraft approaches the ISS [2005]"; captions [9]="The International Space Station from above [2006]"; captions [10]="Maneuvering in space with the Canadarm2 [2006]"; captions [11]="The International Space Station second expansion [2006]"; captions [12]="The International Space Station third expansion [2007]"; captions [13]="The ISS over the Ionian Sea [2007]";
三
Ebooks - Cengage eReader
8 https://ebooks.cenreader.com/#!/reader/e039acf5-566c-47ed-bad2-b922f3f5056b/page/79c33f70c5e1f298bbbc409eeb5903d7
Go to the project03-02.html file X
Do the following:
Search results for 'use your codex +
eTextbook: JavaScript for Web Warriors
Maneuvering in space with the
NASA
The International Space Station The International Space Station third
second expansion 200
expansion (2007
NASA
Completed Project 3-2
The 155 over the lone (2007)
1. Use your code editor to open the project03-02_txt.html and project03-02_txt.js files from the js03 ► project02 folder. Enter your name and the date in the comment section of each file and save them as project03-02.html and
project03-02.js, respectively.
3. Go to the project03-02.js file in your code editor. Below the code that creates and populates the captions array, declare the htmlCode variable, setting its initial value to an empty text string.
</figure>
2. Go to the project03-02.html file in your code editor and in the head section add a script element to load the project03-02.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML
file and save your changes.
4. Create a for loop with a counter that goes from 0 to less the length of the captions array in increments of 1. With each iteration, add the following text to the value of the htmlCode variable:
<figure>
<img alt="" src='slide1.jpg' />
<figcaption>caption [1]</figcaption>
where / is the value of the counter for that iteration and captions[/] is the corresponding element from the captions array.
90% ☆☆
TT
♬ a '
Quick Tour Print
Print Search
Search Annotations Accessibility Bookmark
□
5. After the for loop, change the inner HTML of the document element by the id "gallery" to the value of the htmlCode variable.
6. Save your changes to the file and then load project03-02.html in your browser. Verify that the page displays the 14 images in the slide gallery along with their captions.
O
x
Transcribed Image Text:三 Ebooks - Cengage eReader 8 https://ebooks.cenreader.com/#!/reader/e039acf5-566c-47ed-bad2-b922f3f5056b/page/79c33f70c5e1f298bbbc409eeb5903d7 Go to the project03-02.html file X Do the following: Search results for 'use your codex + eTextbook: JavaScript for Web Warriors Maneuvering in space with the NASA The International Space Station The International Space Station third second expansion 200 expansion (2007 NASA Completed Project 3-2 The 155 over the lone (2007) 1. Use your code editor to open the project03-02_txt.html and project03-02_txt.js files from the js03 ► project02 folder. Enter your name and the date in the comment section of each file and save them as project03-02.html and project03-02.js, respectively. 3. Go to the project03-02.js file in your code editor. Below the code that creates and populates the captions array, declare the htmlCode variable, setting its initial value to an empty text string. </figure> 2. Go to the project03-02.html file in your code editor and in the head section add a script element to load the project03-02.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes. 4. Create a for loop with a counter that goes from 0 to less the length of the captions array in increments of 1. With each iteration, add the following text to the value of the htmlCode variable: <figure> <img alt="" src='slide1.jpg' /> <figcaption>caption [1]</figcaption> where / is the value of the counter for that iteration and captions[/] is the corresponding element from the captions array. 90% ☆☆ TT ♬ a ' Quick Tour Print Print Search Search Annotations Accessibility Bookmark □ 5. After the for loop, change the inner HTML of the document element by the id "gallery" to the value of the htmlCode variable. 6. Save your changes to the file and then load project03-02.html in your browser. Verify that the page displays the 14 images in the slide gallery along with their captions. O x
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
JQuery and Javascript
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education