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

Adding comments to JS code

This commit is contained in:
emma 2024-10-28 08:24:57 -04:00
parent 96db2bf458
commit c3863bcf52
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/script.js
View File

@ -1,14 +1,21 @@
let icon = document.querySelectorAll(".clickable-image"); let icon = document.querySelectorAll(".clickable-image");
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 of been 6 or 7 around this time.",
};
icon.forEach((item) => { icon.forEach((item) => {
item.addEventListener("click", () => { item.addEventListener("click", () => {
let desktop = document.querySelector("body"); let desktop = document.querySelector("body");
// begin creation of window that will display image
let imageWindow = document.createElement("div"); let imageWindow = document.createElement("div");
imageWindow.classList.add("window"); imageWindow.classList.add("window");
// titlebar creation
let titleBar = document.createElement("div"); let titleBar = document.createElement("div");
titleBar.classList.add("title-bar"); titleBar.classList.add("title-bar");
@ -28,6 +35,7 @@ icon.forEach((item) => {
imageWindow.appendChild(titleBar); imageWindow.appendChild(titleBar);
imageWindow.appendChild(separator); imageWindow.appendChild(separator);
// image will reside in this part of the window
let windowPane = document.createElement("div"); let windowPane = document.createElement("div");
windowPane.classList.add("window-pane"); windowPane.classList.add("window-pane");
windowPane.style.display = "flex"; windowPane.style.display = "flex";
@ -37,14 +45,24 @@ icon.forEach((item) => {
let image = document.createElement("img"); let image = document.createElement("img");
image.src = `img/${item.querySelector("figcaption").textContent}`; image.src = `img/${item.querySelector("figcaption").textContent}`;
image.height = "700"; image.height = "700";
figure.style.marginTop = "1.5rem"; figure.style.marginTop = "0.75rem";
figure.style.display = "flex";
figure.style.flexDirection = "column";
figure.style.alignItems = "center";
figure.appendChild(image); figure.appendChild(image);
let figureCaption = document.createElement("figcaption"); let figureCaption = document.createElement("figcaption");
figureCaption.textContent = `${item.querySelector("figcaption").textContent}`; figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
figureCaption.style.textAlign = "center"; figureCaption.style.textAlign = "center";
figureCaption.style.marginTop = "1rem";
figure.appendChild(figureCaption); figure.appendChild(figureCaption);
// add everything together backwards and hide the window
// with the image icons in it, then set the gird properties
// for the image viewing window so it is in the right place
// the dialog on the right needs set otherwise it will
// move itself over
// append image window to body to show image at larger size
windowPane.appendChild(figure); windowPane.appendChild(figure);
imageWindow.appendChild(windowPane); imageWindow.appendChild(windowPane);
document.querySelector(".window").style.display = "none"; document.querySelector(".window").style.display = "none";