STEP 1: Initialize and declare variables

const displayedImage = document.querySelector('.displayed-img');

const thumbBar = document.querySelector('.thumb-bar');

/* STEP 2: Loop 5 times to create the elements */

for (let i = 1; i

const newImage = document.createElement('img');

newImage.src = 'images/pic' + i + '.jpg';

thumbBar.appendChild(newImage);

/* STEP 3: Build event handler for each */

// newImage.onclick = function(event) {

// const imgSrc = event.target.src;

newImage.onclick = function(event) {

const imgSrc = event.target.src;

displayedImage.src = imgSrc;

};

//displayImage(imgSrc);

// };

}

Function to change the src of the main */

function displayImage(src) {

displayedImage.src = src;

}

Event Delegation

Instead of adding event handlers for each image, how about event delegation? Build a click handler on the parent element, and capture each target (and its attributes) from the event object */

thumbBar.onclick = function (event) {

// event.target is the element that was clicked

if (event.target && event.target.nodeName === 'IMG') {

displayImage(event.target.src);

STEP G: Call the clearWayfinding() function that you built below - and enjoy the result!

STEP A: Inside the thumbBar.onclick event handler function, and also inside the if statement, change the event.target CSS outline property to "5px solid red"

STEP B: Next, change the event.target CSS position property to "relative"

STEP C: And then set the CSS z-index property to "10" so that the thumbnail clicked is on top of all the others

}

}

// Lab 6 STEP D: Initialize and declare a var called 'thumbImgs' using the querySelectorAll method to grab all the IMG elements inside the .thumb-bar

STEP E: Build a function called 'clearWayfinding()' that loops through the thumbImgs array with a FOR loop

STEP F: For each thumbImgs IMG element, set the CSS outline-width property to "0", and the z-index property also to "0"