From ea7e533e012c40e7e4eda694a55a633aaf440af6 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Thu, 19 Dec 2024 15:36:50 -0500
Subject: [PATCH] image enlarging javascript complete

---
 script/image-enlarger.js | 34 ++++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

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();
+			} 
+		});	
 	});
 });