Add the third tab to the website inside a separate module

Add the logic for the resetting of navbar style when swtiching to other tabs using a navigation bar
amalyakubov · Jul 18, 2023 · beec786 · beec786
1 parent a1f2bec
commit beec786
Show file tree

Hide file tree

Showing 7 changed files with 304 additions and 68 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/delivery.js b/src/delivery.js
@@ -73,7 +73,5 @@ export function loadDelivery() {
         inputContainer.appendChild(input);
         infoContainer.appendChild(contactContainer);
         content.appendChild(infoContainer);
-        div.classList.add('hidden');
     }
-    FOOTER.classList.remove('hidden');
 } 
diff --git a/src/index.js b/src/index.js
@@ -1,33 +1,53 @@
 import './style.css'
-import { pageLoad } from './pageload';
+import { createAppendFooter, loadDel, pageLoad, pageReload } from './pageload';
 import { logoAppend } from './append';
-import { loadDelivery } from './delivery';
+import { loadAboutPage } from './truth';
 
-const NAVIGATION = function() {
+let WELCOMECONTAINER = document.getElementById('welcome-container');
+let PRODUCTSCONTAINER = document.getElementById('products-display');
+let MENUCONTAINER = document.getElementById('menu-container');
+let FOOTER = document.getElementById('footer');
+let DELIVERYDIV = document.getElementById('delivery-div');
+let INFOCONTAINER = document.getElementById('info-container');
 
-    const WELCOMECONTAINER = document.getElementById('welcome-container');
-    const PRODUCTSCONTAINER = document.getElementById('products-display');
-    const MENUCONTAINER = document.getElementById('menu-container');
-    const FOOTER = document.getElementById('footer');
-    const DELIVERYDIV = document.getElementById('delivery-div');
-    const INFOCONTAINER = document.getElementById('info-container');
+    function refreshVariables() {
+     WELCOMECONTAINER = document.getElementById('welcome-container');
+     PRODUCTSCONTAINER = document.getElementById('products-display');
+     MENUCONTAINER = document.getElementById('menu-container');
+     FOOTER = document.getElementById('footer');
+     DELIVERYDIV = document.getElementById('delivery-div');
+     INFOCONTAINER = document.getElementById('info-container');
+    }
 
-    function hideContent() {
-        WELCOMECONTAINER.classList.add('hidden');
-        PRODUCTSCONTAINER.classList.add('hidden');
-        MENUCONTAINER.classList.add('hidden');
-        FOOTER.classList.add('hidden');
-        DELIVERYDIV.classList.remove('hidden');
-        INFOCONTAINER.classList.remove('hidden');
+    function deleteDelivery() {
+        if (document.getElementById('delivery-div') && document.getElementById('info-container')) {
+        document.getElementById('delivery-div').remove();
+        document.getElementById('info-container').remove();
+        }
     }
-
-    function showContent() {
-        WELCOMECONTAINER.classList.remove('hidden');
-        PRODUCTSCONTAINER.classList.remove('hidden');
-        MENUCONTAINER.classList.remove('hidden');
-        FOOTER.classList.remove('hidden');
-        DELIVERYDIV.classList.add('hidden');
-        INFOCONTAINER.classList.add('hidden');
+
+    function deleteContent() {
+        WELCOMECONTAINER.remove();
+        PRODUCTSCONTAINER.remove();
+        MENUCONTAINER.remove();
+    }
+
+    function deleteFooter() {
+        FOOTER.remove();
+    }
+
+    function resetNavBarStyle () {
+    const NAIVGATION = document.getElementById('navigation-container');
+    NAIVGATION.style.backgroundColor = 'white';
+    NAIVGATION.style.color = 'black';
+    NAIVGATION.style.margin = '20px';
+    }
+
+    function wipeTruth() {
+        const TRUTH = document.getElementById('truth-container');
+        if (TRUTH) {
+        TRUTH.remove();
+        }
     }
 
     function addEventListeners() {
@@ -36,20 +56,69 @@ const NAVIGATION = function() {
         let about = document.getElementById('about');
 
         home.addEventListener('click', () => {
-            showContent();
+            wipeTruth();
+            deleteDelivery();
+            deleteContent();
+            pageReload();
+
+            if (document.getElementById('footer') === null) {
+                createAppendFooter();
+            }
+
+            refreshVariables();
+            deleteEventListeners();
+            resetNavBarStyle();
         })
 
         delivery.addEventListener('click', () => {
-            hideContent();
+            wipeTruth();
+            deleteContent();
+            loadDel();
+            resetNavBarStyle();
         })
 
         about.addEventListener('click', () => {
-            hideContent();
+            deleteContent();
+            deleteDelivery();
+            deleteFooter();
+            loadAboutPage();
         })
+    }
+    function deleteEventListeners() {
+        let home = document.getElementById('home');
+        let delivery = document.getElementById('delivery');
+        let about = document.getElementById('about');
+
+        home.removeEventListener('click', () => {
+            wipeTruth();
+            deleteDelivery();
+            deleteContent();
+            pageReload();
+
+            if (document.getElementById('footer') === null) {
+                createAppendFooter();
+            }
 
+            refreshVariables();
+            deleteEventListeners();
+            resetNavBarStyle();
+        })
+
+        delivery.removeEventListener('click', () => {
+            wipeTruth();
+            deleteContent();
+            loadDel();
+            resetNavBarStyle();
+        })
+
+        about.removeEventListener('click', () => {
+            deleteContent();
+            deleteDelivery();
+            deleteFooter();
+            loadAboutPage();
+        })
     }
-    addEventListeners();
- };
 
 pageLoad();
-NAVIGATION();
+refreshVariables();
+addEventListeners();
diff --git a/src/pageload.js b/src/pageload.js
@@ -12,10 +12,20 @@
     createStory();
     createMenu();
     createAppendFooter();
+}
+
+export function loadDel() {
     createDeliveryDiv();
     loadDelivery();
 }
 
+export function pageReload() {
+    displayWelcome();
+    addPhotoOverlay();
+    createStory();
+    createMenu();
+}
+
 function displayWelcome() {
     let welcomeContainer = document.createElement('div');
     welcomeContainer.id = 'welcome-container';
@@ -127,7 +137,7 @@ function createMenu() {
     createMenuItemInSecondList('8. The Continental Burger - 14.5$');
 }
 
-function createAppendFooter() {
+export function createAppendFooter() {
     let footer = document.createElement('div');
     footer.id = 'footer';
     let footerElementsContanier = document.createElement('div');

diff --git a/src/style.css b/src/style.css
@@ -190,4 +190,12 @@ ol {
     background-image: url(img/hero-image.jpg);
     background-size: cover;
     background-repeat: no-repeat;
+}
+
+.truth {
+
+}
+
+.truth span {
+    filter: blur(6px);
 }
diff --git a/src/truth.js b/src/truth.js
@@ -0,0 +1,24 @@
+import { content } from "./append";
+
+export function loadAboutPage() {
+    if (document.getElementById('truth-container') === null) {
+    let truthContainer = document.createElement('div');
+    truthContainer.id = 'truth-container';
+    let truth = document.createElement('p');
+    truth.classList.add('truth');
+
+    const NAIVGATION = document.getElementById('navigation-container');
+    NAIVGATION.style.backgroundColor = 'black';
+    NAIVGATION.style.color = 'white';
+    NAIVGATION.style.margin = '0';
+
+    truth.innerHTML = 'The truth this is that <span>the Los Pollos Hermanos is not a </span> chicken <span>restaurant. It is the coverup for the </span>massive<span> criminal syndicate operating on the terrtory of the </span> southern United States of America <span>and Mexico. The law enforcement agencies such as the</span> Department of Homeland Security are <span> not only aware of their existence, but they are actively sponsoring them as a method to exert their</span> influence. The Gustav Fring, is <span> actually a criminal with ties to the Chilean Military and the CIA. The Los Pollos Hermanos is a cover up for the </span> Operation Backwaters <span>, which has played a large role in the CIA\'s </span> Overlord Program. <span> Los Pollos Hermanos shall continue to operate under the guidance of the CIA! </span> God save us all';
+    truthContainer.style.height = '100vh';
+    truthContainer.style.padding = '35vh';
+    truthContainer.style.backgroundColor = 'black';
+    truth.style.fontSize = '25px';
+    truth.style.color = 'white';
+    truthContainer.appendChild(truth);  
+    content.appendChild(truthContainer);
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const URL = require('url').URL;
 
 module.exports = {
   mode: 'development',