header-hero

package.json

@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://github.com/MatacheAlexandru/Project-TeamWork.git",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /Project-TeamWork/"
   },
   "repository": {
     "type": "git",

src/about-modal.js

@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const openModalBtn = document.querySelector(".read-more-btn");
+    const closeModalBtn = document.querySelector(".close-btn");
+    const modal = document.querySelector("[data-modal-target]");
+
+    openModalBtn.addEventListener("click", function() {
+        modal.classList.remove("hidden-modal");
+    });
+
+    closeModalBtn.addEventListener("click", function() {
+        modal.classList.add("hidden-modal");
+    });
+});

src/header-hero.js

@@ -0,0 +1,54 @@
+// (() => {
+//   const mobileMenu = document.querySelector('.js-menu-container');
+//   const openMenuBtn = document.querySelector('.js-open-menu');
+//   const closeMenuBtn = document.querySelector('.js-close-menu');
+
+//   const toggleMenu = () => {
+//     const isMenuOpen =
+//       openMenuBtn.getAttribute('aria-expanded') === 'true' || false;
+//     openMenuBtn.setAttribute('aria-expanded', !isMenuOpen);
+//     mobileMenu.classList.toggle('is-open');
+
+//     const scrollLockMethod = !isMenuOpen
+//       ? 'disableBodyScroll'
+//       : 'enableBodyScroll';
+//     bodyScrollLock[scrollLockMethod](document.body);
+//   };
+
+
+//   openMenuBtn.addEventListener('click', toggleMenu);
+//   closeMenuBtn.addEventListener('click', toggleMenu);
+
+//   // Close the mobile menu on wider screens if the device orientation changes
+//   window.matchMedia('(min-width: 768px)').addEventListener('change', e => {
+//     if (!e.matches) return;
+//     mobileMenu.classList.remove('is-open');
+//     openMenuBtn.setAttribute('aria-expanded', false);
+//     bodyScrollLock.enableBodyScroll(document.body);
+//   });
+// })();
+
+document.addEventListener("DOMContentLoaded", function() {
+    const mobileMenu = document.querySelector('.js-menu-container');
+    const openMenuBtn = document.querySelector('.js-open-menu');
+    const closeMenuBtn = document.querySelector('.js-close-menu');
+
+    const toggleMenu = () => {
+        const isMenuOpen = openMenuBtn.getAttribute('aria-expanded') === 'true' || false;
+        openMenuBtn.setAttribute('aria-expanded', !isMenuOpen);
+        mobileMenu.classList.toggle('is-open');
+
+        const scrollLockMethod = !isMenuOpen ? 'disableBodyScroll' : 'enableBodyScroll';
+        bodyScrollLock[scrollLockMethod](document.body);
+    };
+
+    openMenuBtn.addEventListener('click', toggleMenu);
+    closeMenuBtn.addEventListener('click', toggleMenu);
+
+
+    window.matchMedia('(min-width: 768px)').addEventListener('change', () => {
+        mobileMenu.classList.remove('is-open');
+        openMenuBtn.setAttribute('aria-expanded', false);
+        bodyScrollLock.enableBodyScroll(document.body);
+    });
+});