zepp
/
emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

intial scripting and testing of image-enlarger.js

This commit is contained in:
emma 2024-12-18 21:44:14 -05:00
parent 2701f02bee
commit c56955d39f
1 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
script/image-enlarger.js
View File

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