Added Search results tag

index.html

@@ -78,6 +78,7 @@ <h1>An <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open
                     <label>
                         <input type="text" name="search" placeholder="search for a company"> 
                     </label>
+                    <div class="results">All Results</div>
                 </div>
             </div>
         </div>

js/search.js

@@ -1,10 +1,11 @@
 const searchbar = document.querySelector('.search input');
 const select = document.querySelector('.select select');
+const results = document.querySelector('.results');
 
 searchbar.addEventListener('keyup', (e)=> {
     const typed = e.target.value.toLowerCase();
     const logos = document.querySelectorAll('main .logo');
-
+    let numberOfResults = 0;
     logos.forEach(logo => {
         const searchParagraph = logo.lastElementChild;
         const searchTitle = searchParagraph.firstElementChild.textContent;
@@ -16,7 +17,11 @@ searchbar.addEventListener('keyup', (e)=> {
         const shouldShow = isPresent && categoryMatch;
 
         logo.style.display = shouldShow ? 'block' : 'none';
-    });   
+        logo.style.display = shouldShow ? numberOfResults++ : numberOfResults+=0;
+    });
+    console.log(numberOfResults);
+
+    results.innerHTML = `<span>${numberOfResults}</span> results`
 })
 
 function selectReload() {

scss/layout/_header.scss

@@ -30,6 +30,7 @@ header {
 
         .search {
             width: 65%;
+            position: relative;
 
             & input {
                 -moz-appearance: none;
@@ -54,6 +55,22 @@ header {
                 padding-left: 1em;
                 margin-left: 5px;
             }
+
+            .results {
+                background-color: $col-green-2;
+                position: absolute;
+                bottom: -100%;
+                right: -1%;
+                border: 1px solid $col-green-1;
+                border-radius: 4px;
+                padding: .3rem .5rem;
+                color: $col-green-1;
+
+                & span {
+                    font-weight: $fw-medium;
+                    color: $col-grey-1;
+                }
+            }
         }
         .select{
             width: calc(35% - 5px); // account for the margin on the input

scss/responsive/_header.scss

@@ -18,7 +18,6 @@
             right: 50%;
             transform: translateX(50%);
             bottom: 3vw;
-            // overflow: hidden;
 
             .search {
                 width: 100%;
@@ -52,7 +51,6 @@
 
 @media screen and (max-width: 600px) {
     header{
-        overflow-x: hidden;
         .heading {
             height: 80vw;
         }
@@ -66,6 +64,10 @@
                     font-size: 16px;
                     padding: .45em 0 .3em 1em;
                 }
+                .results {
+                    right: 50%;
+                    transform: translateX(60%);
+                }
             }
             .select {
                 & select {