39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
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";
|
|
|
|
});
|
|
});
|
|
});
|