zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Slight refactor of JS file

This commit is contained in:
emma 2024-10-29 00:34:54 -04:00
parent 011fa22e29
commit b57df70d56
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/script.js
View File

@ -1,6 +1,4 @@
let icon = document.querySelectorAll(".clickable-image"); const descriptions = {
let 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-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-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.", "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!", "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) => { let icons = document.querySelectorAll(".clickable-image");
item.addEventListener("click", () => {
icons.forEach((icon) => {
icon.addEventListener("click", () => {
let desktop = document.querySelector("body"); let desktop = document.querySelector("body");
@ -32,7 +32,7 @@ icon.forEach((item) => {
let windowTilte = document.createElement("h2"); let windowTilte = document.createElement("h2");
windowTilte.classList.add("title"); windowTilte.classList.add("title");
windowTilte.textContent = item.querySelector("figcaption").textContent; windowTilte.textContent = icon.querySelector("figcaption").textContent;
titleBar.appendChild(windowTilte); titleBar.appendChild(windowTilte);
let separator = document.createElement("div"); let separator = document.createElement("div");
@ -48,7 +48,7 @@ icon.forEach((item) => {
let figure = document.createElement("figure"); let figure = document.createElement("figure");
let image = document.createElement("img"); 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.height = "500px";
image.style.width = "auto"; image.style.width = "auto";
figure.style.marginTop = "0.75rem"; figure.style.marginTop = "0.75rem";
@ -58,7 +58,7 @@ icon.forEach((item) => {
figure.appendChild(image); figure.appendChild(image);
let figureCaption = document.createElement("figcaption"); 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.textAlign = "center";
figureCaption.style.marginTop = "1rem"; figureCaption.style.marginTop = "1rem";
figure.appendChild(figureCaption); figure.appendChild(figureCaption);