From 182cb2751059b085751c2c70181a62ddcf9eb4c2 Mon Sep 17 00:00:00 2001
From: garimasingh22 <44470092+garimasingh22@users.noreply.github.com>
Date: Fri, 28 Aug 2020 12:04:52 +0530
Subject: [PATCH 1/2] #65 add searchbox in market

---
 views/market.ejs | 86 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 83 insertions(+), 3 deletions(-)

diff --git a/views/market.ejs b/views/market.ejs
index ee4c282..8ad93f0 100644
--- a/views/market.ejs
+++ b/views/market.ejs
@@ -1,9 +1,45 @@
 <section class="text-gray-700 body-font md:ml-56 lg:ml-64 md:mx-auto md:pr-14 w-screen inline">
     <div class="container px-5 py-10 mx-auto md:px-auto">
-        <div class="my-4 absolute-center">
-            <h2 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Favorite Stocks</h2>
+        <div class="my-4 absolute-center md:flex">
+            <div class="md:w-1/2">
+
+                <h2 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Favorite Stocks</h2>
+            </div>
+
+            <!-- search box -->
+            <div class="md:w-1/2">
+                <div>
+                    <div class="relative text-gray-600 mt-4 mr-12 shadow-md rounded-b-lg">
+                        <input id="searchbar" type="search" name="serch" placeholder="Search Stocks by Symbols" class="bg-transparent h-10 px-5 pl-10 rounded-full text-lg focus:outline-none" />
+                        <button type="submit" class="absolute left-0 top-0 mt-3 ml-4">
+                    <svg
+                      class="h-4 w-4 fill-current"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      version="1.1"
+                      id="Capa_1"
+                      x="0px"
+                      y="0px"
+                      viewBox="0 0 56.966 56.966"
+                      style="enable-background: new 0 0 56.966 56.966;"
+                      xml:space="preserve"
+                      width="512px"
+                      height="512px"
+                    >
+                      <path
+                        d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+                      />
+                    </svg>
+                  </button>
+                    </div>
+
+                    <ul id="search-result" style="height: 0px; overflow: hidden; white-space: pre;" class="text-lg p-5 ml-10 list-none mt-0 text-gray-700"></ul>
+
+                    <!-- end of search box -->
+                </div>
+            </div>
         </div>
-        <div class="container py-16 mx-auto">
+        <div class="container pb-16 pt-8 mx-auto">
 
             <div class="flex -m-4 inline-block overflow-x-auto whitespace-no-wrap">
                 <% for(var i=0; i < compactData.length; i++) { %>
@@ -141,3 +177,47 @@
         }
     }
 </script>
+
+<!-- script for search bar -->
+
+<script>
+    const inputField = document.getElementById('searchbar')
+    inputField.addEventListener('input', (event) => {
+        console.log(event.target.value)
+        const value = event.target.value
+            //sample data
+        const dataset = <%- JSON.stringify(totalData) %>;
+
+        // searching the symbol
+
+        let data = dataset.filter(function(el) {
+            return el.Symbol.includes(value.toUpperCase())
+        })
+
+        // when no symbol matched
+
+        if (data.length === 0) {
+
+            let data1 = dataset.filter(function(el) {
+                return (el["Company Name"].toLowerCase().includes(value.toLowerCase()))
+            })
+            data = data1;
+        }
+
+        let list = "";
+        if (value === "") {
+            list = "";
+            data = [];
+        }
+
+        let n = data.length
+
+        for (i = 0; i <= (n - 1); i++) {
+            let item = data[i];
+            list += `<li><a href='/view/${item.Symbol}'>${item.Symbol}</a></li>`
+        }
+        document.getElementById('search-result').innerHTML = list;
+
+        console.log(data)
+    })
+</script>
\ No newline at end of file

From 5bfc47fe855b0c4f6a694909502e84e6e521fd7e Mon Sep 17 00:00:00 2001
From: garimasingh22 <44470092+garimasingh22@users.noreply.github.com>
Date: Fri, 28 Aug 2020 12:27:05 +0530
Subject: [PATCH 2/2] portfolio search by company name

---
 views/portfolio.ejs | 77 ++++++++++++++++++++++++---------------------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/views/portfolio.ejs b/views/portfolio.ejs
index 8f79d21..a5069d0 100644
--- a/views/portfolio.ejs
+++ b/views/portfolio.ejs
@@ -1,13 +1,11 @@
 <main class="md:col-span-4 md:ml-56 lg:ml-64 md:pr-14 w-full">
-  <div class="container px-5 py-10 mx-auto md:px-auto">
-    <!-- <div class="absolute-center mx-auto"> -->
+    <div class="container px-5 py-10 mx-auto md:px-auto">
+        <!-- <div class="absolute-center mx-auto"> -->
 
-    <!-- header -->
+        <!-- header -->
 
-    <header class="my-4 absolute-center">
-      <span
-        class="text-gray-700 text-3xl font-semibold leading-none tracking-wider"
-        >Hello,</span
+        <header class="my-4 absolute-center">
+            <span class="text-gray-700 text-3xl font-semibold leading-none tracking-wider">Hello,</span
       >
       <h2 class="text-gray-800 text-5xl leading-none tracking-wider view-link">
         <%= user.displayName%>.
@@ -71,41 +69,37 @@
               $40,342.04
             </p>
             <span class="block text-gray-500 text-sm">Total Portfolio</span>
-          </div>
-        </div>
+    </div>
+    </div>
 
-        <!-- card 2 -->
+    <!-- card 2 -->
 
-        <div
-          class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl"
-        >
-          <div class="flex-shrink-0 w-10 h-10">
+    <div class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl">
+        <div class="flex-shrink-0 w-10 h-10">
             <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
-          </div>
-          <div class="font-bold text-xl xl:text-2xl ml-3 justify-center">
+        </div>
+        <div class="font-bold text-xl xl:text-2xl ml-3 justify-center">
             <p class="text-gray-900 whitespace-no-wrap">
-              $ 40,342.04
+                $ 40,342.04
             </p>
             <span class="block text-gray-500 text-sm">Profit / Loss</span>
-          </div>
         </div>
+    </div>
 
-        <!-- card 3 -->
+    <!-- card 3 -->
 
-        <div
-          class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl"
-        >
-          <div class="flex-shrink-0 w-10 h-10">
+    <div class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl">
+        <div class="flex-shrink-0 w-10 h-10">
             <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
-          </div>
-          <div class="font-bold text-xl xl:text-2xl ml-3">
+        </div>
+        <div class="font-bold text-xl xl:text-2xl ml-3">
             <p class="text-gray-900 whitespace-no-wrap">
-              $40,342.04
+                $40,342.04
             </p>
             <span class="block text-gray-500 text-sm">$ Balance</span>
-          </div>
         </div>
-      </div>
+    </div>
+    </div>
     </div>
 
     <!-- overview heading -->
@@ -117,14 +111,13 @@
     <!-- container for both tables -->
 
     <div class="lg:grid lg:grid-cols-2 -mx-8">
-      <!-- table component 1 -->
+        <!-- table component 1 -->
 
-      <div class="px-3 sm:px-6 py-4 overflow-hidden h-auto w-full">
-        <div class="flex justify-between">
-          <!-- heading of table -->
-          <h2 class="text-lg font-bold leading-tight py-3">Trade History</h2>
-          <a href="#" class="mt-3 font-bold text-tempc-400"
-            >View All <span class="font-extrabold">></span></a
+        <div class="px-3 sm:px-6 py-4 overflow-hidden h-auto w-full">
+            <div class="flex justify-between">
+                <!-- heading of table -->
+                <h2 class="text-lg font-bold leading-tight py-3">Trade History</h2>
+                <a href="#" class="mt-3 font-bold text-tempc-400">View All <span class="font-extrabold">></span></a
           >
         </div>
 
@@ -542,10 +535,22 @@
           //sample data
       const dataset = <%- JSON.stringify(totalData) %>;
 
+// when symbol matches
+
       let data = dataset.filter(function(el) {
           return el.Symbol.includes(value.toUpperCase())
       })
 
+// when no symbol matches
+
+      if (data.length === 0) {
+
+let data1 = dataset.filter(function(el) {
+    return (el["Company Name"].toLowerCase().includes(value.toLowerCase()))
+})
+data = data1;
+}
+
       let list = "";
       if (value === "") {
           list = "";
@@ -555,4 +560,4 @@
       for (i = 0; i <= (n - 1); i++) {
           let item = data[i];
           list += `<li><a href='/view/${item.Symbol}'>${item.Symbol}</a></li>` } document.getElementById('search-result').innerHTML = list ;console.log(data) })
-</script>
+                </script>
\ No newline at end of file