You have been provided with the necessary styling and markup already. Examine chapter

$09$

$-$

project

$02$

$.$

html in the editor of your choice. You will be programmatically adding elements based

on user actions and data in the supplied JSON file.

$2$

$.$

$$Examine paintings

$.$

json. This data file

consists of an array of paintings. The id of each painting element corresponds to the image file

name

$($

there is a smaller version and a larger version in two different subfolders inside of the

images folder

$)$

$.$

$$Each painting also has an array of features. You will be displaying rectangles

based on the xy coordinates of the features. When the user mouses over a feature rectangle, your

page will display the feature description below the painting.

$3$

$.$

$$Begin by modifying ch

$09$

$-$

proj

$02$

$.$

js and add a DQMContentLoaded event handler. All of your code will be inside that

handler. Your handler will need to use the JSQN parse

$()$

$$method to transform the JSON data into

a JavaScript object. You will also need to loop through the data array and generate a list of

thmbnail images of the paintings inside the supplied

element. To make click processing easier, you will also want to add the id value of the

painting using the dataset property

$($

see Section

$9\mathrm{.}3\mathrm{.}6)$

$.$

$4$

$.$

$$You must use event delegation

$($

i

$.$

e

$.$

$,$

$$a single event handler

$)$

$$to process all clicks in the painting list. When a painting is

clicked, first empty the element

$($

simply by assigning empty string to the innerHTML.

property

$)$

$.$

$$This is necessary to remove the previously displayed image features. After

emptying the, display a larger version of the painting

$($

inside the supplied element

$)$

$$and

display its title and artist in the supplied

and

elements. This will require you to find the painting in your painting array that

matches the id value of the clicked thumbnail; you can do this via a simple loop or

make use of the find

$()$

$$function

$($

covered in the next chapter

$)$

$.$

$$You will also need to

perform the next two steps as well.

$5$

$.$

$$When a new painting is clicked, you will also

need to loop through the features array for that painting and display rectangles on

top of the painting. Each feature has the upper

$-$

left and lower

$-$

right coordinates for

the feature. Each rectangle will be a

$\backslash$Delta

$$element that you programmatically construct and append to the. You will need to

assign it the class box

$($

the CSS for this class has been provided

$)$

$$and set the position,

left, top, width, and height properties. The respective values for these properties will

be absolute

$,$

$$the upper

$-$

left

x

$$value from features array element, the upper

$-$

left

y

value from features array element, while the width and height are calculated by

subtracting the lower

$-$

right

x

$.$

y

$$from upper

$-$

left

xy

$.$

$$Note: the left, top, width, and

height properties must include the

px

$$unit when assigning the value.

$9\mathrm{.}7$

$$Chapter

Summary

$4776$

$.$

$$For each rectangle, you will also need to set up mouseover and

mouseout event handlers. For the mouseover, you will need to set the textContent

property of the provided description

with the description property of the feature data for that rectangle. For mouseout, simply empty the

content of the textContent. Need help with HTML

JS

document.addEventListener$("$DOMContentLoaded$",$ function $()\{$

const paintingList $=$ document.querySelector$("$#painting$-$list"$)$;

const figure $=$ document.querySelector$("$figure$")$;

const h$2=$ document.querySelector$("$h$2")$;

const h$3=$ document.querySelector$("$h$3")$;

const description $=$ document.querySelector$("$#description"$)$;

fetch$("$paintings$.$json"$)$

$.$then$(($response$)=>$ response.json$())$

$.$then$(($data$)=>\{$

data.forEach$(($painting$)=>\{$

const listItem $=$ document.createElement$("$li$")$;

const thumbnail $=$ document.createElement$("$img$")$;

thumbnail.src $=`$images$/$thumbnails$/$$$\{$painting$.$id$\}\_$small.jpg$`$;

thumbnail.alt $=$ painting.title;

thumbnail.dataset.paintingId $=$ painting.id;

listItem.appendChild$($thumbnail$)$;

paintingList.appendChild$($listItem$)$;

$\})$;

paintingList.addEventListener$("$clic

NEED HELP WITH HTML $-$