diff --git a/index.html b/index.html
index b471dd7..1e31935 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
-
Baxter Images
+ Baxter Images
@@ -20,7 +20,7 @@
diff --git a/js/script.js b/js/script.js
index 6ed6578..3020135 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,10 +1,57 @@
-let icon = document.querySelector(".clickable-image");
+let icon = document.querySelectorAll(".clickable-image");
-icon.addEventListener("click", () => {
- // let desktop = document.querySelector("body");
- // let imageWindow = document.createElement("div");
+icon.forEach((item) => {
+ item.addEventListener("click", () => {
+
+
+ let desktop = document.querySelector("body");
+ 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");
-
- // desktop.appendChild();
+ 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);
+ });
});
\ No newline at end of file
diff --git a/style/style.css b/style/style.css
index 249e97b..77036e6 100644
--- a/style/style.css
+++ b/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;