I’ve read various solutions here on the Image gallery task. Most seem to leave out implementing the addition of ALT text, those that do address it tend to alter the format of the original code provided(Not that this is bad (-:).
How do I make some sort of loop that handles the inclusion of src and alt text without modifying the existing code logic?
Here’s my current implementation without alt text
/* Declaring the array of image filenames */
const imgArr = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg"];
/* Declaring the alternative text for each image file */
const imgAlt = {
alt: "Image of pic1",
alt: "Image of pic2",
alt: "Image of pic3",
alt: "Image of pic4",
alt: "Image of pic5",
};
/* Looping through images */
for (const img of imgArr) {
const newImage = document.createElement("img");
newImage.setAttribute("src", `./images/${img}`);
// newImage.setAttribute("alt", xxx);
thumbBar.appendChild(newImage);
thumbBar.addEventListener("click", (e) => {
console.log("clicked");
// e.stopPropagation();
const currentSrc = e.target.getAttribute("src");
displayedImage.setAttribute("src", currentSrc);
});
}