JS can create window with image in it

Also styling changes and changes to index.html

index.html

@@ -12,7 +12,7 @@
         <div class="window">
             <div class="title-bar">
                 <button aria-label="Close" disabled class="hidden"></button>
-                <h1 class="title">Baxter Images</h1>
+                <h2 class="title">Baxter Images</h2>
                 <button aria-label="Resize" disabled class="hidden"></button>
             </div>
             <div class="separator"></div>
@@ -20,7 +20,7 @@
             <div class="window-pane">
                 <figure class="clickable-image">
                     <img class="img-icon" src="img/thumbnails/baxter-stare-thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
-                    <figcaption>baxter-stare.jpg</figcaption>
+                    <figcaption>baxter-stare.png</figcaption>
                 </figure>
             </div>
         </div>

js/script.js

@@ -1,10 +1,57 @@
-let icon = document.querySelector(".clickable-image");
+let icon = document.querySelectorAll(".clickable-image");
 
-icon.addEventListener("click", () => {
+icon.forEach((item) => {
-    // let desktop = document.querySelector("body");
+    item.addEventListener("click", () => {
-    // let imageWindow = document.createElement("div");
         
 
+        let desktop = document.querySelector("body");
     
-    // desktop.appendChild();
+        let imageWindow = document.createElement("div");
+        imageWindow.classList.add("window");
+        
+        let titleBar = document.createElement("div");
+        titleBar.classList.add("title-bar");
+        
+        let closeButton = document.createElement("button");
+        closeButton.ariaLabel = "Close";
+        closeButton.classList.add("close");
+    
+        titleBar.appendChild(closeButton);
+
+        let windowTilte = document.createElement("h2");
+        windowTilte.classList.add("title")
+        windowTilte.textContent = item.querySelector("figcaption").textContent;
+        titleBar.appendChild(windowTilte);
+
+        let separator = document.createElement("div");
+        separator.classList.add("separator")
+        imageWindow.appendChild(titleBar);
+        imageWindow.appendChild(separator);
+
+        let windowPane = document.createElement("div");
+        windowPane.classList.add("window-pane");
+        windowPane.style.display = "flex";
+        windowPane.style.justifyContent = "center";
+
+        let figure = document.createElement("figure");
+        let image = document.createElement("img");
+        image.src = `img/${item.querySelector("figcaption").textContent}`;
+        image.height = "700";
+        figure.style.marginTop = "1.5rem";
+        figure.appendChild(image);
+
+        let figureCaption = document.createElement("figcaption");
+        figureCaption.textContent = `${item.querySelector("figcaption").textContent}`;
+        figureCaption.style.textAlign = "center";
+        figure.appendChild(figureCaption);
+
+        windowPane.appendChild(figure);
+        imageWindow.appendChild(windowPane);
+        document.querySelector(".window").style.display = "none";
+        imageWindow.style.gridColumn = "1";
+        imageWindow.style.gridRow = "1";
+        let = aboutThisCat = document.querySelector(".site-info");
+        aboutThisCat.style.gridColumn = "2";
+        desktop.appendChild(imageWindow);
+    });
 });

style/style.css

@@ -30,6 +30,12 @@ h1 {
     margin: 1rem;
 }
 
+h2 {
+    margin: 1rem;
+    font-size: 1.5rem;
+    font-family: Chicago_12;
+}
+
 p {
     line-height: 1.5rem;
     margin-bottom: 1rem;