alternate.thiscat.rocks/js/script.js

const 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 have been 6 or 7 around this time.",
    "baxter-box.png": "Baxter loves his boxes, and can often be found relaxing or sleeping in one. We had quite a few at one point!",
    "baxter-flop.png": "Baxter shows ultimate comfiness by flopping upside down. A sign that he is very happy and very cozy.",
    "baxter-grumpy.png": "Baxter rarely gives this look and this photo was awhile ago. I'm not sure what he might've been upset about",
    "baxter-kitten.png": "Baxter as a kitten was a lot of fun and work. I do really get a kick out of how big his paws were though!",
    "baxter-looking.png": "Baxter is quite good at noticing the camera. Sometimes that means I miss good pictures, but sometimes you get great ones!",
    "baxter-sitting.png": "This is just overall a good photo. Seems like Baxter might be making a run for office with this one!",
    "baxter-wall.png": "In the apartment he often liked to stretch against this wall. I think he liked the sunlight on his stomach. Typical cat!",
    "baxter-hiding.png": "Baxter often likes to pretend people can't see him, and will try to get a look at what they are doing from very obvious places.",
    "baxter-thinking.png": "When I look at this photo I often wonder what is on Baxter's mind. It was a cool afternoon after a storm, he seems relaxed but with something on his mind.",
};

let icons = document.querySelectorAll(".clickable-image");

icons.forEach((icon) => {
    icon.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");
        
        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 = icon.querySelector("figcaption").textContent;
        titleBar.appendChild(windowTilte);

        let separator = document.createElement("div");
        separator.classList.add("separator");
        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";
        windowPane.style.justifyContent = "center";

        let figure = document.createElement("figure");
        let image = document.createElement("img");
        image.src = `img/${icon.querySelector("figcaption").textContent}`;
        image.style.height = "500px";
        image.style.width = "auto";
        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 = `${descriptions[icon.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";
        imageWindow.style.gridColumn = "1";
        imageWindow.style.gridRow = "1";
        let = aboutThisCat = document.querySelector(".site-info");
        aboutThisCat.style.gridColumn = "2";
        desktop.appendChild(imageWindow);

        closeButton.addEventListener("click", () => {
            imageWindow.remove();
            document.querySelector(".window").style.display = "block";
        });
    });
});