From ddfae4d737ee5ec0ccc9d40932205ae356b2bcfc Mon Sep 17 00:00:00 2001
From: Demilad <demileye06@yahoo.co.uk>
Date: Fri, 8 Feb 2019 17:51:24 +0100
Subject: [PATCH] Added Search results tag

---
 index.html                   |  1 +
 js/search.js                 |  9 +++++++--
 scss/layout/_header.scss     | 17 +++++++++++++++++
 scss/responsive/_header.scss |  6 ++++--
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 8b16344..0e4716f 100644
--- a/index.html
+++ b/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>
diff --git a/js/search.js b/js/search.js
index 3b632ab..6d66aa7 100644
--- a/js/search.js
+++ b/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() {
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index 7c91cd2..0933429 100644
--- a/scss/layout/_header.scss
+++ b/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
diff --git a/scss/responsive/_header.scss b/scss/responsive/_header.scss
index 9d0e6f5..413c8cd 100644
--- a/scss/responsive/_header.scss
+++ b/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 {