Finish the load-hide functions for the second tab

Add 'customer support' infodisplay on the second tab
amalyakubov · Jul 18, 2023 · a1f2bec · a1f2bec
1 parent 73e3b3b
commit a1f2bec
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 11 deletions.
diff --git a/dist/e462cf9c169c920f5351.jpg b/dist/e462cf9c169c920f5351.jpg
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/delivery.js b/src/delivery.js
@@ -1,3 +1,5 @@
+import { content } from "./append";
+
 export function loadDelivery() {
     const FOOTER = document.getElementById('footer');
     if (document.getElementById('delivery-text') === null) {
@@ -30,12 +32,48 @@ export function loadDelivery() {
         let label = document.createElement('label');
         label.htmlFor = 'adress';
         label.innerHTML = 'Delivery adress:';
-        label.style.fontSize = '35px';
+        label.style.fontSize = '60px';
         label.style.fontWeight = '600';
-        label.style.color = 'black';
+        label.style.color = 'white';
 
+        let infoContainer = document.createElement('div');
+        infoContainer.id = 'info-container';
+        let info = document.createElement('p');
+        info.style.color = 'white';
+        infoContainer.appendChild(info);
+        info.innerHTML = 'If you get the message \'unavailable adress, please contact our customer support team\', please choose one of the following methods of contacting our custom suppoprt.';
+
+        let contactContainer = document.createElement('div');
+        contactContainer.style.display = 'flex';
+
+        let email = document.createElement('p');
+        let phone = document.createElement('p');
+
+        email.innerHTML = 'lospollos@customer.com'
+        phone.innerHTML = '+ 1 505 999 999';
+
+        contactContainer.appendChild(email);
+        contactContainer.appendChild(phone);
+
+        contactContainer.style.color = 'white';
+        contactContainer.style.fontSize = '20px';
+        contactContainer.style.justifyContent = 'center';
+        contactContainer.style.gap = '80px';
+
+        infoContainer.style.paddingBottom = '100px';
+        infoContainer.style.margin = '20px';
+        infoContainer.style.backgroundColor = '#548042';
+        infoContainer.style.borderRadius = '10px';
+        infoContainer.style.paddingTop = '20px';
+
+        info.style.margin = '20px'
+        info.style.fontSize = '25px';
+
         inputContainer.appendChild(label);
         inputContainer.appendChild(input);
+        infoContainer.appendChild(contactContainer);
+        content.appendChild(infoContainer);
+        div.classList.add('hidden');
     }
     FOOTER.classList.remove('hidden');
 } 
diff --git a/src/img/hero-image.jpg b/src/img/hero-image.jpg
diff --git a/src/index.js b/src/index.js
@@ -10,12 +10,15 @@ const NAVIGATION = function() {
     const MENUCONTAINER = document.getElementById('menu-container');
     const FOOTER = document.getElementById('footer');
     const DELIVERYDIV = document.getElementById('delivery-div');
+    const 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 showContent() {
@@ -24,6 +27,7 @@ const NAVIGATION = function() {
         MENUCONTAINER.classList.remove('hidden');
         FOOTER.classList.remove('hidden');
         DELIVERYDIV.classList.add('hidden');
+        INFOCONTAINER.classList.add('hidden');
     }
 
     function addEventListeners() {
@@ -37,7 +41,6 @@ const NAVIGATION = function() {
 
         delivery.addEventListener('click', () => {
             hideContent();
-            loadDelivery();
         })
 
         about.addEventListener('click', () => {

diff --git a/src/pageload.js b/src/pageload.js
@@ -3,6 +3,7 @@
  import {content} from "./append";
  import { logoAppend } from "./append";
  import photo1 from './img/photo-1.jpg'
+ import { loadDelivery } from "./delivery";
 
  export function pageLoad() {
     createNavigationMenu();
@@ -12,6 +13,7 @@
     createMenu();
     createAppendFooter();
     createDeliveryDiv();
+    loadDelivery();
 }
 
 function displayWelcome() {

diff --git a/src/style.css b/src/style.css
@@ -181,7 +181,7 @@ ol {
     justify-content: center;
 }
 
-#welcome-container.hidden, #products-display.hidden, #menu-container.hidden, #footer.hidden {
+#welcome-container.hidden, #products-display.hidden, #menu-container.hidden, #footer.hidden, #delivery-div.hidden, #info-container.hidden {
     display: none;
 }