Update

functions/index.js

@@ -54,6 +54,46 @@ function homePage(request, responce) {
 	})
 }
 
+app.get('/search', function(request, responce){
+	var dbRef = database.ref("/products")
+	if (request.query.search) {
+		let sQuery = request.query.search.toLowerCase()
+		dbRef.orderByChild("status").equalTo("on-sale").once('value', function(snapshot){
+			var data = {
+					'x': {desc: '',holder: '',id: 999,img: '',location: '',name: 'Nothing found 😢',owner: '',price: '',public: '',stock: ''},
+			}
+			if (snapshot.val()) {
+				data = snapshot.val()
+				var sResults = [{desc: '',holder: '',id: 999,img: '',location: '',name: 'Nothing found 😢',owner: '',price: '',public: '',stock: ''}]
+
+				var keys = Object.keys(data)
+
+				keys.forEach(key => {
+					if (data[key].name.toLowerCase().includes(sQuery) || data[key].desc.toLowerCase().includes(sQuery)) {
+						sResults[key] = data[key]
+						console.log(sResults)
+					}
+				})
+				if (Object.keys(sResults).length > 1) {
+					delete sResults[0]
+				}
+				console.log(sResults)
+				responce.render('search.ejs', {products: sResults})
+			}
+			else {responce.render('search.ejs', {products: data})}
+		})
+	}
+	else {
+		dbRef.orderByChild("status").equalTo("on-sale").once('value', function(snapshot){
+			var data = {
+					'x': {desc: '',holder: '',id: 999,img: '',location: '',name: 'Nothing found 😢',owner: '',price: '',public: '',stock: ''},
+			}
+			if (snapshot.val()) {data = snapshot.val()}
+			responce.render('search.ejs', {products: data})
+		})
+	}
+})
+
 app.get('/additmpage', function(request, responce){
 	responce.render('add-item.ejs')
 })

functions/views/404.ejs

@@ -53,7 +53,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>
 

functions/views/css/style.css

@@ -249,6 +249,17 @@ footer a {
 	margin-left: 20px;
 	font-size: 20px;
 	font-family: osl;
+	transition: 0.4s;
+}
+
+.sbar button:hover {
+	background-color: violet;
+	transition: 0.2s;
+}
+
+.sbar button:active {
+	background-color: whitesmoke;
+	transition: 0.2s;
 }
 
 .sbar a {
@@ -484,7 +495,7 @@ footer a {
 }
 .product-page-info button:hover {
 	transition: 0.3s;
-	background-color: #ff7700;
+	background-color: #ffc04b;
 }
 .product-page-info button:active {
 	transition: 0.1s;
@@ -510,7 +521,7 @@ footer a {
 }
 
 .my-products-container {
-
+	color: transparent;
 }
 
 .my-product-container {

functions/views/home.ejs

@@ -14,7 +14,7 @@
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-storage.js"></script>
-  <script defer src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
   <script src="js/fInit.js"></script>
 </head>
 
@@ -55,7 +55,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>
 

functions/views/js/fdb.js

@@ -343,9 +343,19 @@ try {
 }
 catch(error) {console.log(error)}
 
+function bSearch(){
+	let searchField = document.getElementById("sfield")
+	if (searchField.value == ""){
+		searchField.blur()
+	}
+	else {
+		search(searchField.value)
+		}
+}
+
 
 try {
-	var searchField = document.getElementById("sfield")
+	let searchField = document.getElementById("sfield")
 	searchField.addEventListener("keyup", function(event) {
 	if (event.keyCode === 13) {
 		event.preventDefault()

functions/views/my-product.ejs

@@ -53,7 +53,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>
 

functions/views/my-products.ejs

@@ -54,7 +54,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>
 

functions/views/product.ejs

@@ -53,7 +53,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>
 

functions/views/search.ejs

@@ -54,7 +54,7 @@
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
 				<input id="sfield" type="text" placeholder="I Want...">
-				<button id="sbutton">Go!</button>
+				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>