diff --git a/script/image-enlarger.js b/script/image-enlarger.js index 81dfb1f..19f9aca 100644 --- a/script/image-enlarger.js +++ b/script/image-enlarger.js @@ -7,16 +7,32 @@ const header = document.querySelector("header"); // after script tag. defer makes sure the script is loaded after // everything else on the page has loaded const footer = document.querySelector("footer"); + enlargeImg.forEach((img) => { img.style.cursor = "pointer"; img.addEventListener("click", () => { // make background for image let div = document.createElement("div"); + div.style.display = "flex"; + div.style.flexDirection = "column"; + div.style.alignItems = "center"; + div.style.justifyContent = "center"; div.style.height = "100vh"; div.style.width = "auto"; div.style.backgroundColor = "#000000"; + // image element + let image = document.createElement("img"); + image.src = img.src; + image.style.height = "80%"; + image.style.width = "auto"; + div.append(image); + + let paragraph = document.createElement("p"); + paragraph.textContent = "Click anywhere on the image or the black background to close. You can also press the x key on your keyboard."; + paragraph.style.color = "#FFFFFF"; + div.append(paragraph); // hide current page contents main.style.display = "none"; nav.style.display = "none"; @@ -26,16 +42,22 @@ enlargeImg.forEach((img) => { // remove display: grid from body and append div with enlarged image body.style.display = "block"; body.append(div); - - div.addEventListener("click", () => { - // remove div and restore elements contained in body - // to their original display properties + + const removeDiv = () => { div.remove(); body.style.display = "grid"; main.style.display = "block"; nav.style.display = "block"; header.style.display = "flex"; - footer.style.display = "flex"; - }); + footer.style.display = "flex"; + }; + + div.addEventListener("click", removeDiv); + + body.addEventListener("keydown", (e) => { + if (e.key === "x") { + removeDiv(); + } + }); }); });