Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#65 add searchbox in market #66

Merged
merged 2 commits into from
Aug 28, 2020
Merged

#65 add searchbox in market #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
182cb27
#65 add searchbox in market
garimasingh22 Aug 28, 2020
5bfc47f
portfolio search by company name
garimasingh22 Aug 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 83 additions & 3 deletions views/market.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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++) { %>
Expand Down Expand Up @@ -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>
77 changes: 41 additions & 36 deletions views/portfolio.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%>.
Expand Down Expand Up @@ -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 -->
Expand All @@ -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>

Expand Down Expand Up @@ -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 = "";
Expand All @@ -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>