Buy button added on View Page & fixed some design

routes/api/view.js

@@ -46,7 +46,6 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
 
       //   const assetInformation = data["Meta Data"]["1. Information"];
       //   const lastRefreshed = data["Meta Data"]["3. Last Refreshed"];
-      console.log(intraDay);
       let dates = [];
       let opening = [];
       let closing = [];
@@ -64,7 +63,6 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
         volumes.push(intraDay[keys[i]]["5. volume"]);
       }
       // reverse so dates appear from left to right
-      console.log(dates);
       dates.reverse();
       closing.reverse();
       //   dates = JSON.stringify(dates);

views/cart.ejs

@@ -1,5 +1,5 @@
 <div class="flex flex-col w-full py-8 px-4 md:py-16 md:px-8 text-gray-800 md:w-full md:ml-64">
-  <h1 class="text-2xl">Cart</h1>
+  <h1 class="text-2xl lg:text-4xl font-bold">Buy Stock</h1>
   <div>
     <table class="w-full text-sm lg:text-base border-4 " cellspacing="0">
       <thead>

views/partials/_nav.ejs

@@ -1,10 +1,10 @@
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
 <div @click.away="open = false"
-  class="flex flex-col w-full md:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen  md:z-50 md:fixed md:left-0 md:top-0"
+  class="flex flex-col w-full md:w-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen  md:z-50 md:fixed md:left-0 md:top-0"
   x-data="{ open: false }">
   <div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between ">
     <h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
-      <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-3xl pb-2 pt-32">Tradebyte</a>
+      <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl pb-2 pt-32">Tradebyte</a>
     </h1>
     <button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
       <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
@@ -21,7 +21,7 @@
     <div class="flex justify-center align-center rounded-full">
       <img class="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
     </div>
-    <a class="block w-2/4 max-w-xs md:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
+    <a class="block w-2/5 md:w-4/5 max-w-xs lg:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
       href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
         viewBox="0 0 24 24" stroke="currentColor">
         <path d="M5 13l4 4L19 7"></path>

views/view.ejs

@@ -1,8 +1,21 @@
-<div class="md:ml-64 py-6 px-3 w-full">
+<div class="relative md:ml-64 py-6 px-3 w-full">
   <div class="mx-auto max-w-4xl">
+    <h2 class="text-gray-700 text-4xl lg:text-6xl font-semibold leading-none tracking-wider">TradeByte</h2>
+    <div class="relative text-gray-600 my-8 shadow-md rounded-b-lg">
+      <input type="search" name="serch" placeholder="Search Stocks"
+        class="bg-transparent h-10 w-full px-5 pl-10 pr-10 rounded-full text-sm 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>
     <div class="head flex justify-between items-center mx-auto mb-4">
       <div class="company flex flex-col justify-start">
-        <h1 class="text-xl md:text-3xl font-bold"><%= assetName %></h1>
+        <h1 class="text-2xl md:text-3xl font-bold"><%= assetName %></h1>
         <h3>Sector: <span class=" text-sm bg-blue-400 rounded-lg p-1"><%= Sector %></span></h3>
       </div>
       <div class="price">
@@ -34,7 +47,8 @@
     </section>
 
     <h2 class="text-xl font-bold mb-1">Overview</h2>
-    <section class="chart-container relative w-full bg-white shadow-md rounded px-4 pt-2 pb-4 mb-8" style="height: 50vh;">
+    <section class="chart-container relative w-full bg-white shadow-md rounded px-4 pt-2 pb-4 mb-8"
+      style="height: 50vh;">
       <canvas id="chart"></canvas>
     </section>
 
@@ -79,6 +93,12 @@
       </div>
     </section>
   </div>
+  <a href="/cart/<%- symbol %>">
+    <button
+      class="m-8 p-0 w-16 h-16 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none fixed right-0 bottom-0">
+      Buy
+    </button>
+  </a>
 </div>
 
 <script>
@@ -88,18 +108,18 @@
   var myChart = new Chart(ctx, {
     type: 'line',
     data: {
-          labels: datesList, closingList,
-          datasets: [{
-            label: <%- JSON.stringify(symbol) %>,
-            data: closingList,
-            borderColor: "#3e95cd",
-            backgroundColor: "rgba(118,152,255,0.4)"
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          
-        },
-      });
+      labels: datesList, closingList,
+      datasets: [{
+        label: <%- JSON.stringify(symbol) %>,
+        data: closingList,
+        borderColor: "#3e95cd",
+        backgroundColor: "rgba(118,152,255,0.4)"
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+
+    },
+  });
 </script>