From c3863bcf52af244722acd8b83f6a23d840ada25a Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 28 Oct 2024 08:24:57 -0400
Subject: [PATCH] Adding comments to JS code

---
 js/script.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/js/script.js b/js/script.js
index 3020135..16e38cc 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,14 +1,21 @@
 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) => {
     item.addEventListener("click", () => {
         
-
+        
         let desktop = document.querySelector("body");
-    
+        
+        // begin creation of window that will display image
         let imageWindow = document.createElement("div");
         imageWindow.classList.add("window");
         
+        // titlebar creation
         let titleBar = document.createElement("div");
         titleBar.classList.add("title-bar");
         
@@ -28,6 +35,7 @@ icon.forEach((item) => {
         imageWindow.appendChild(titleBar);
         imageWindow.appendChild(separator);
 
+        // image will reside in this part of the window
         let windowPane = document.createElement("div");
         windowPane.classList.add("window-pane");
         windowPane.style.display = "flex";
@@ -37,14 +45,24 @@ icon.forEach((item) => {
         let image = document.createElement("img");
         image.src = `img/${item.querySelector("figcaption").textContent}`;
         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);
 
         let figureCaption = document.createElement("figcaption");
-        figureCaption.textContent = `${item.querySelector("figcaption").textContent}`;
+        figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
         figureCaption.style.textAlign = "center";
+        figureCaption.style.marginTop = "1rem";
         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);
         imageWindow.appendChild(windowPane);
         document.querySelector(".window").style.display = "none";