diff --git a/js/script.js b/js/script.js index e37679d..a2b0148 100644 --- a/js/script.js +++ b/js/script.js @@ -1,6 +1,4 @@ -let icon = document.querySelectorAll(".clickable-image"); - -let descriptions = { +const descriptions = { "baxter-stare.png": "Baxter lovingly staring at the camera on a sunny day in the apartment. One of my favorite photos of him. He would have been 6 or 7 around this time.", "baxter-box.png": "Baxter loves his boxes, and can often be found relaxing or sleeping in one. We had quite a few at one point!", "baxter-flop.png": "Baxter shows ultimate comfiness by flopping upside down. A sign that he is very happy and very cozy.", @@ -11,8 +9,10 @@ let descriptions = { "baxter-wall.png": "In the apartment he often liked to stretch against this wall. I think he liked the sunlight on his stomach. Typical cat!", }; -icon.forEach((item) => { - item.addEventListener("click", () => { +let icons = document.querySelectorAll(".clickable-image"); + +icons.forEach((icon) => { + icon.addEventListener("click", () => { let desktop = document.querySelector("body"); @@ -32,7 +32,7 @@ icon.forEach((item) => { let windowTilte = document.createElement("h2"); windowTilte.classList.add("title"); - windowTilte.textContent = item.querySelector("figcaption").textContent; + windowTilte.textContent = icon.querySelector("figcaption").textContent; titleBar.appendChild(windowTilte); let separator = document.createElement("div"); @@ -48,7 +48,7 @@ icon.forEach((item) => { let figure = document.createElement("figure"); let image = document.createElement("img"); - image.src = `img/${item.querySelector("figcaption").textContent}`; + image.src = `img/${icon.querySelector("figcaption").textContent}`; image.style.height = "500px"; image.style.width = "auto"; figure.style.marginTop = "0.75rem"; @@ -58,7 +58,7 @@ icon.forEach((item) => { figure.appendChild(image); let figureCaption = document.createElement("figcaption"); - figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`; + figureCaption.textContent = `${descriptions[icon.querySelector("figcaption").textContent]}`; figureCaption.style.textAlign = "center"; figureCaption.style.marginTop = "1rem"; figure.appendChild(figureCaption);