emmas.place/script/image-enlarger.js

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");
// script tag needs defer attribute as footer is included by php
// 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";
		footer.style.display = "none";
		header.style.display = "none";

		// remove display: grid from body and append div with enlarged image
		body.style.display = "block";
		body.append(div);
		
		const removeDiv = () => {
			div.remove();
			body.style.display = "grid";
			main.style.display = "block";
			nav.style.display = "block";
			header.style.display = "flex";
			footer.style.display = "flex";		
		};

		div.addEventListener("click", removeDiv);

		body.addEventListener("keydown", (e) => {
			if (e.key === "x") {
				removeDiv();
			} 
		});	
	});
});