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";