diff --git a/life/pets.php b/life/pets.php
index 60571ff..f77fe79 100644
--- a/life/pets.php
+++ b/life/pets.php
@@ -86,7 +86,7 @@
 				</figure>
 			</section>
 		</main>
-		<script src="../script/image-enlarger.js"></script>
+		<script src="../script/image-enlarger.js" defer></script>
 		<?php include "../includes/footer.php" ?>
 	</body>
 </html>
diff --git a/script/image-enlarger.js b/script/image-enlarger.js
index feea663..81dfb1f 100644
--- a/script/image-enlarger.js
+++ b/script/image-enlarger.js
@@ -3,35 +3,39 @@ 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.height = "100vh";
 		div.style.width = "auto";
 		div.style.backgroundColor = "#000000";
 
+		// hide current page contents
 		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";
+		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);
 
 		div.addEventListener("click", () => {
+			// remove div and restore elements contained in body
+			// to their original display properties
 			div.remove();
 			body.style.display = "grid";
 			main.style.display = "block";
 			nav.style.display = "block";
 			header.style.display = "flex";
-			document.querySelector("footer").style.display = "flex";
+			footer.style.display = "flex";
 		});
 	});
 });