Initial Build

assets/main.js

@@ -0,0 +1,52 @@
+import './stimulus_bootstrap.js';
+import './styles/main.css';
+
+const mobileMenu = () => {
+    const icon = document.querySelector('.icon-menu');
+    const menu = document.querySelector('.menu');
+    const header = document.querySelector('header');
+    const body = document.querySelector('body');
+
+    icon.addEventListener('click', (event) => {
+        icon.classList.toggle('open');
+        menu.classList.toggle('open');
+        header.classList.toggle('open');
+        body.classList.toggle('menu-open');
+    });
+}
+
+const album = () => {
+    const album = document.querySelector('#album');
+
+    if (album) {
+        const photos = album.querySelectorAll('.photo');
+        const openImageContainer = document.querySelector('#open-image');
+        const close = openImageContainer.querySelector('.close');
+
+        photos.forEach((photo) => {
+            photo.addEventListener('click', (event) => {
+                const dataset = photo.dataset;
+                openImageContainer.querySelector('#image').setAttribute('src', dataset.url);
+                openImageContainer.querySelector('#image').setAttribute('alt', dataset.alt);
+                openImageContainer.querySelector('#caption').innerHTML = dataset.caption;
+                openImageContainer.querySelector('#date').innerHTML = `Date Taken: ${dataset.date}`;
+                openImageContainer.querySelector('#location').innerHTML = `Location: ${dataset.location}`;
+                openImageContainer.querySelector('#equipment').innerHTML = `Camera Used: ${dataset.equipment}`;
+                openImageContainer.classList.toggle('open');
+                document.querySelector('body').classList.toggle('photo-open');
+            });
+        });
+
+        close.addEventListener('click', (event) => {
+            if (openImageContainer.classList.contains('open')) {
+                openImageContainer.classList.remove('open');
+                document.querySelector('body').classList.remove('photo-open');
+            }
+        })
+    }
+
+    
+}
+
+mobileMenu();
+album();