<div class="center"><div class="logo"><h1>POMSD</h1></div></div><div class="form"><div class="fake-input"><input type="text" id="input-search" placeholder="Search..." /><button id="mic"><i class="fas fa-microphone"></i></button></div><div class="results"><ul></ul></div></div></div><div class="modal"><div class="content"><i class="fas fa-microphone"></i><h3>Listening...</h3></div></div>
CSS
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
* {
box-sizing: border-box;
}
html,
body {
align-items: center;
justify-content: center;
display: flex;
width: 100%;
height: 100%;
font-family: "Courier New", Courier, monospace;
flex-direction: column;
}
.center {
max-width: 1024px;
margin: 0 auto;
width: 100%;
}
.logo {
text-align: center;
font-size: 35px;
margin: 30px auto;
}
.form {
width: 100%;
margin: 0 auto;
max-width: 600px;
position: relative;
}
.form .fake-input {
width: 100%;
border: 1px solid #bcbcbc;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form .fake-input button {
width: 45px;
height: 45px;
border: none;
background-color: transparent;
outline: none;
font-size: 22px;
color: #999;
cursor: pointer;
}
.form .fake-input input {
padding: 10px 5px;
width: calc(100% - 60px);
border: none;
outline: none;
}
.form .results {
display: none;
border: 1px solid #bcbcbc;
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.form .results.ativo {
display: block;
}
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
align-items: center;
justify-content: center;
}
.modal.ativo {
display: flex;
padding: 20px;
}
.modal .content {
width: 400px;
height: 400px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #ccc;
}
.modal .content i {
font-size: 60px;
}
.social {
margin: 30px auto;
text-align: center;
}
.social a {
text-decoration: none;
}
JS
const input = document.getElementById("input-search");
const resultTarget = document.querySelector(".results ul");
const micButton = document.getElementById("mic");
const modalLabel = document.querySelector(".modal .content h3");
const Search = {
showModal: () => {
document.querySelector(".modal").classList.add("ativo");
},
hideModal: () => {
document.querySelector(".modal").classList.remove("ativo");
},
showResults: () => {
document.querySelector(".results").classList.add("ativo");
},
hideResults: () => {
document.querySelector(".results").classList.remove("ativo");
},
clearResults: () => {
resultTarget.innerHTML = "";
},
serachByKeyWord: (keyWord) => {
return products.filter(
(item) => item.name.toLowerCase().indexOf(keyWord.toLowerCase()) >= 0
);
},
liComponent: (prods, target) => {
prods.map((item) => {
const node = document.createElement("li");
node.textContent = item.name;
target.appendChild(node);
});
},
searchByVoice: () => {
//...
if (window.SpeechRecognition || window.webkitSpeechRecognition) {
const MySpeech = new webkitSpeechRecognition();
MySpeech.lang = "en";
const clickOnMicButton = () => {
Search.showModal();
try {
MySpeech.start();
} catch (error) {
console.error(error);
Search.hideModal();
}
};
const onMySpeechResult = (event) => {
const sentense = event.results[0][0].transcript;
modalLabel.innerHTML = `You said "${sentense}"`;
const searchResult = Search.serachByKeyWord(sentense);
if (searchResult.length !== 0) {
Search.clearResults();
Search.liComponent(searchResult, resultTarget);
Search.showResults();
setTimeout(() => Search.hideModal(), 2000);
} else {
modalLabel.innerHTML = `We did not find products for the word "${sentense}"`;
setTimeout(() => Search.hideModal(), 3000);
}
};
MySpeech.addEventListener("result", onMySpeechResult);
micButton.addEventListener("click", clickOnMicButton);
} else {
micButton.style.display = "none";
}
},
searchByText: () => {
// save a global debounce
let debounceTime;
// ...
const onInputChange = (event) => {
const value = event.target.value;
const searchResult = Search.serachByKeyWord(value);
Search.clearResults();
if (value.length < 3) {
Search.hideResults();
return null;
}
if (searchResult.length === 0) {
Search.hideResults();
alert("sorry, no products were found!");
return null;
}
Search.liComponent(searchResult, resultTarget);
Search.showResults();
};
// priyanshu om shanti digital
input.addEventListener("keyup", function (event) {
clearTimeout(debounceTime);
debounceTime = setTimeout(() => {
onInputChange(event);
}, 300);
});
},
init: () => {
Search.searchByText();
Search.searchByVoice();
},
};
document.addEventListener("DOMContentLoaded", Search.init);
// List of products
const products = [
{
id: "PR-1",
name: "Beef - Tongue, Fresh",
price: 6.14,
department: "Food",
currency: "$",
},
{
id: "PR-2",
name: "IPhone X",
price: 900.13,
department: "Electronics",
currency: "$",
},
{
id: "PR-3",
name: "Gibson Les Paul",
price: 900.67,
department: "Music",
currency: "$",
},
{
id: "PR-4",
name: "Ice Cream - Fudge Bars",
price: 6.06,
department: "Food",
currency: "$",
},
{
id: "PR-5",
name: "Chocolate - Milk Coating",
price: 1.07,
department: "Food",
currency: "$",
},
{
id: "PR-6",
name: "Shichimi Togarashi Peppeers",
price: 3.55,
department: "Food",
currency: "$",
},
{
id: "PR-7",
name: "Sterno - Chafing Dish Fuel",
price: 2.46,
department: "Toys",
currency: "$",
},
{
id: "PR-8",
name: "Ephiphone Les Paul Studio",
price: 520.51,
department: "Music",
currency: "$",
},
{
id: "PR-9",
name: "Mushroom - Shitake, Fresh",
price: 7.94,
department: "Food",
currency: "$",
},
{
id: "PR-10",
name: "Mushroom - Lg - Cello",
price: 9.86,
department: "Food",
currency: "$",
},
];
Contact Us!
0 Comments
type your comment...