feat(homepage): turn off homepage when a generator is clicked

closes #155

Author: Dun-sin

index.html

@@ -75,7 +75,6 @@
     <!-- Generator Card -->
     <!-- Now👇🏾 -->
     <!-- Side Bar -->
-    <header></header>
     <div class="menu">
       <iconify-icon
         id="menu-icon"
@@ -149,7 +148,7 @@ <h1 id="head">Code Magic</h1>
     </nav>
 
     <main>
-      <section>
+      <section id="home-page">
         <h1>
           All in one tool for <span>Developers</span>.
           <br />
@@ -164,7 +163,7 @@ <h2>
           Your browser does not support the video tag.
         </video>
       </section>
-      <section>
+      <section id="generator">
         <div class="generators">
           <!-- Pic Text -->
           <div data-content="pic-text">

src/main.ts

@@ -75,7 +75,10 @@ const navBarAnimationOptions = {
 // Elements
 const generators = document.querySelectorAll('[data-gen]');
 const sidebar = document.querySelector('.side-results') as HTMLElement;
+const getHeaderText = document.getElementById('head');
 const getResults = document.querySelectorAll('[data-button]');
+const getHomePage = document.getElementById('home-page');
+const getGeneratorSection = document.getElementById('generator');
 const results = document.querySelectorAll('[data-result]');
 const closeBar = document.getElementById('close-side-bar');
 const getImageEntryElement = document.getElementById(
@@ -266,13 +269,37 @@ function showResult(attribute: string | null) {
   generatorsFunction(attribute);
 }
 
+// display current gradient value for all range inputs
+const displayGradientValue = (gradientElement: HTMLInputElement) => {
+  gradientElement.addEventListener('input', (e) => {
+    const target = e.target as HTMLInputElement;
+    const degreeDisplayElement = <HTMLElement>(
+      target.parentElement?.querySelector('#degree-display')
+    );
+    degreeDisplayElement.innerText = `${target.value}deg`;
+  });
+};
+
+getHeaderText?.addEventListener('click', () => {
+  if (getHomePage === null || getGeneratorSection === null) return;
+  getHomePage.style.display = 'flex';
+  getGeneratorSection.style.display = 'none';
+});
+
 generators.forEach((generator) => {
   generator?.addEventListener('click', (): void => {
     const checking = generator.getAttribute('data-gen');
 
-    if (checking === null) return;
+    if (
+      checking === null ||
+      getHomePage === null ||
+      getGeneratorSection === null
+    )
+      return;
     sidebar.style.display = 'none';
     attributeValue = checking;
+    getHomePage.style.display = 'none';
+    getGeneratorSection.style.display = 'flex';
     showContent(attributeValue, 'flex');
   });
 });
@@ -296,17 +323,6 @@ closeBar?.addEventListener('click', () => {
   }, 600);
 });
 
-// display current gradient value for all range inputs
-const displayGradientValue = (gradientElement: HTMLInputElement) => {
-  gradientElement.addEventListener('input', (e) => {
-    const target = e.target as HTMLInputElement;
-    const degreeDisplayElement = <HTMLElement>(
-      target.parentElement?.querySelector('#degree-display')
-    );
-    degreeDisplayElement.innerText = `${target.value}deg`;
-  });
-};
-
 gradientRangeInputs.forEach((gradientRangeInput: HTMLInputElement) => {
   displayGradientValue(gradientRangeInput);
 });

src/style.css

@@ -117,7 +117,7 @@ main {
   outline: 2px solid red;
 }
 
-main > section:first-of-type {
+main > section {
   min-height: var(--content-container);
   min-width: var(--content-container);
   display: flex;
@@ -151,6 +151,10 @@ main > section:first-of-type video {
   border: 2px solid var(--text-color);
 }
 
+main > section:last-of-type {
+  display: none;
+}
+
 .generators {
   min-height: var(--content-container);
   min-width: var(--content-container);