Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
3.)Declare variables a. The images variable containing an HTML collection of all elements with the tag name "img". b. The photoBucket variable referencing the element with the id “photo_bucket".c. The photoList variable referencing the element with the id "photo_list". 4.) Create a for loop that iterates through all of the items in the images collection.

3.)Declare variables a. The images variable containing an HTML collection of all elements with the tag name "img". b. The photoBucket variable referencing the element with the id “photo_bucket".c. The photoList variable referencing the element with the id "photo_list". 4.) Create a for loop that iterates through all of the items in the images collection.

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question
100%
3.)Declare variables a. The images variable containing an HTML collection of all elements with the tag name "img". b. The photoBucket variable referencing the element with the id "photo_bucket". c. The photoList variable referencing the element with the id "photo_list". 4.) Create a for loop that iterates through all of the items in the images collection. 5.) Within the for loop insert an onclick event handler that runs an anonymous function when an image is clicked. 6.) When an image is clicked it is either moved from the photo bucket to the photo list or from the photo list back to the photo bucket. To determine which action to perform, add the following if else statement to the anonymous function: a. If the parent element of the clicked image has an id equal to "photo_bucket" then do the following: (i) Create an element node named newltem for the li element, (ii) append newltem to the photoList object, and (i) append the image to the newltem object using the appendChild() method. Note: Use the this object to reference the image that was clicked by the user. b. Otherwise, do the following: (i) Declare a variable named oldltem equal to the parent element of the clicked image, (ii) append the clicked image to photoBucket object, and (i) remove oldltem from the parent element of oldltem using the removeChild() method.
Transcribed Image Text:3.)Declare variables a. The images variable containing an HTML collection of all elements with the tag name "img". b. The photoBucket variable referencing the element with the id "photo_bucket". c. The photoList variable referencing the element with the id "photo_list". 4.) Create a for loop that iterates through all of the items in the images collection. 5.) Within the for loop insert an onclick event handler that runs an anonymous function when an image is clicked. 6.) When an image is clicked it is either moved from the photo bucket to the photo list or from the photo list back to the photo bucket. To determine which action to perform, add the following if else statement to the anonymous function: a. If the parent element of the clicked image has an id equal to "photo_bucket" then do the following: (i) Create an element node named newltem for the li element, (ii) append newltem to the photoList object, and (i) append the image to the newltem object using the appendChild() method. Note: Use the this object to reference the image that was clicked by the user. b. Otherwise, do the following: (i) Declare a variable named oldltem equal to the parent element of the clicked image, (ii) append the clicked image to photoBucket object, and (i) remove oldltem from the parent element of oldltem using the removeChild() method.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 5-2</title> 6. 7 8 <link rel="stylesheet" href="styles.css" /> 9 <script src="project05-02_txt.js" defer></script> 10 </head> 11 12 <body> 13 <header> 14 <h1> 15 Hands-on Project 5-2 16 </h1> 17 </header> 18 19 <article> 20 <h2>Rank the Photos</h2> 21 22 <div id="container"> 23 <div id="instructions"> 24 <p>The following are the photo entries for this month's contest. 25 Click the images in the photo bucket below to add them to the list at the right. Click an image from the list to return it to the photo bucket. 26 </p> <p id="photo_bucket"> 27 28 29 <img src="photo01.jpg" alt="" /><img src="photo02.j pg" alt="" /><img src="photo03.jpg" alt="" /> <img src="photo04.jpg" alt="" /><img src="photo05.j pg" alt="" /><img src="photo06.jpg" alt="" /> 30 31 <img src="photo07.jpg" alt="" /><img src="photo08.jpg" alt="" /><img src="photo09.jpg" alt="" /> <img src="photo10.jpg" alt="" /><img src="photo11.jpg" alt="" /><img src="photo12.jpg" alt="" /> 32 33 </p> 34 </div> 35 36 <div id="photorank"> 37 <ol id="photo_list"> 38 </ol> 39 </div> 40 41 </div> 42 </article> 43 </body> 44 </html>
Transcribed Image Text:1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 5-2</title> 6. 7 8 <link rel="stylesheet" href="styles.css" /> 9 <script src="project05-02_txt.js" defer></script> 10 </head> 11 12 <body> 13 <header> 14 <h1> 15 Hands-on Project 5-2 16 </h1> 17 </header> 18 19 <article> 20 <h2>Rank the Photos</h2> 21 22 <div id="container"> 23 <div id="instructions"> 24 <p>The following are the photo entries for this month's contest. 25 Click the images in the photo bucket below to add them to the list at the right. Click an image from the list to return it to the photo bucket. 26 </p> <p id="photo_bucket"> 27 28 29 <img src="photo01.jpg" alt="" /><img src="photo02.j pg" alt="" /><img src="photo03.jpg" alt="" /> <img src="photo04.jpg" alt="" /><img src="photo05.j pg" alt="" /><img src="photo06.jpg" alt="" /> 30 31 <img src="photo07.jpg" alt="" /><img src="photo08.jpg" alt="" /><img src="photo09.jpg" alt="" /> <img src="photo10.jpg" alt="" /><img src="photo11.jpg" alt="" /><img src="photo12.jpg" alt="" /> 32 33 </p> 34 </div> 35 36 <div id="photorank"> 37 <ol id="photo_list"> 38 </ol> 39 </div> 40 41 </div> 42 </article> 43 </body> 44 </html>
Expert Solution
Step 1

In questions with many questions, we must answer 1.

trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS