emmas.place/script/image-enlarger.js

39 lines
1.0 KiB
JavaScript
Raw Normal View History

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";
});
});
});