intial scripting and testing of image-enlarger.js

script/image-enlarger.js

@@ -0,0 +1,38 @@
+const enlargeImg = document.querySelectorAll(".enlarge");
+const body = document.querySelector("body");
+const main = document.querySelector("main");
+const nav = document.querySelector("nav");
+const header = document.querySelector("header");
+
+enlargeImg.forEach((img) => {
+	img.style.cursor = "pointer";
+
+	img.addEventListener("click", () => {
+		let div = document.createElement("div");
+		div.style.height = "100vh";
+		div.style.width = "auto";
+		div.style.backgroundColor = "#000000";
+
+		main.style.display = "none";
+		nav.style.display = "none";
+
+		// i do not know why i have to do footer this way
+		// if i declare it at the top as a const it is null
+		// will figure out later
+		document.querySelector("footer").style.display = "none";
+		header.style.display = "none";
+
+		body.style.display = "block";
+		body.append(div);
+
+		div.addEventListener("click", () => {
+			div.remove();
+			body.style.display = "grid";
+			main.style.display = "block";
+			nav.style.display = "block";
+			header.style.display = "flex";
+			footer.style.display = "flex";
+
+		});
+	});
+});