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 @@
A thumbnail of an image of baxter looking at the camera. -
baxter-stare.jpg
+
baxter-stare.png
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;