Send/Recieve Files Online (Recieve Files by Enter 6 Digit Code) 👉

X
Code copied to clipboard!

POMSD

Advertisement

Search by Your Voice HTML CSS and JS || SearchBar || for Blogger




HTML

<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!

Comment Box

0 Comments