Added Voice Search Feature and UI Design Enhancement

public/Word_dictionary/app.js

@@ -1,117 +1,128 @@
-document.addEventListener('DOMContentLoaded', () => {
+
 let input = document.querySelector('#input');
 let searchBtn = document.querySelector('#search');
-//let apiKey = '771aa8f7-d363-4ff0-a824-10181a86ac47';
+let startSpeakBtn = document.querySelector('#startSpeak');
+let stopSpeakBtn = document.querySelector('#stopSpeak');
+let apiKey = 'put API key Here';
 let notFound = document.querySelector('.not__found');
 let defBox = document.querySelector('.def');
 let audioBox = document.querySelector('.audio');
 let loading = document.querySelector('.loading');
 let wordBox = document.querySelector('.words_and_meaning');
- //const tableBody = document.querySelector('#tableData');
 let i = 0;
 let oldLength = 0;
 
-    function myFunction() {
-        const str = input.value;
-        if (oldLength !== str.length) {
-            oldLength = str.length;
-            const strToSearch = str.split(' ').pop();
-            getData(strToSearch);
+function myFunction() {
+    let elem = $('#input');
+    let str = elem.val();
+    if (oldLength != elem.val().length) {
+        oldLength = elem.val().length;
+        let strTosearch;
+        if (i != 0) {
+            strTosearch = str.slice(str.lastIndexOf(" ") + 1, str.length);
+        } else {
+            strTosearch = str;
+
         }
+        getData(strTosearch);
+        i++;
     }
+}
 
-    setInterval(myFunction, 5000);
+setInterval(myFunction, 5000);
 
-    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        const recognition = new SpeechRecognition();
-        recognition.interimResults = true;
-        recognition.continuous = true;
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
-        recognition.addEventListener('result', e => {
-            const transcript = Array.from(e.results)
-                .map(result => result[0])
-                .map(result => result.transcript)
-                .join('');
-            input.value = transcript;
-        });
+const recognition = new SpeechRecognition();
+
+recognition.interimResults = true;
+recognition.continuous = true;
+
+recognition.addEventListener('result', e => {
+    let transcript = Array.from(e.results)
+        .map(result => result[0])
+        .map(result => result.transcript)
+        .join('');
+
+    document.getElementById("input").value = transcript;
+});
+
+startSpeakBtn.addEventListener('click', function() {
+    recognition.start();
+});
+
+stopSpeakBtn.addEventListener('click', function() {
+    recognition.stop();
+});
+
+searchBtn.addEventListener('click', function(e) {
+    e.preventDefault();
 
-        recognition.addEventListener('end', recognition.start);
-        recognition.start();
+    // clear data 
+    audioBox.innerHTML = '';
+    notFound.innerText = '';
+    defBox.innerText = '';
+
+    // Get input data
+    let word = input.value.trim();
+    // call API get data
+    if (word === '') {
+        alert('Word is required');
+        return;
+    }
+    let wordTosearch = "";
+    if (i != 0) {
+        wordTosearch = word.slice(word.lastIndexOf(" ") + 1, word.length);
     } else {
-        console.log('Speech Recognition API not supported in this browser.');
+        wordTosearch = word;
     }
 
-    searchBtn.addEventListener('click', e => {
-        e.preventDefault();
-        clearData();
-        const word = input.value.trim();
-        if (word === '') {
-            alert('Word is required');
-            return;
-        }
-        const wordToSearch = word.split(' ').pop();
-        getData(wordToSearch);
-    });
-
-    function clearData() {
-        audioBox.innerHTML = '';
-        notFound.innerText = '';
-        defBox.innerText = '';
+    getData(wordTosearch);
+    i++;
+});
+
+async function getData(word) {
+    if (!word) {
+        return;
     }
 
-    async function getData(word) {
-        loading.style.display = 'block';
-        try {
-            const response = await fetch(`${apiUrl}?word=${word}`);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-            loading.style.display = 'none';
-            if (!data.length) {
-                notFound.innerText = 'No result found';
-                return;
-            }
-            if (typeof data[0] === 'string') {
-                displaySuggestions(data);
-                return;
-            }
-            displayDefinition(data[0], word);
-        } catch (error) {
-            loading.style.display = 'none';
-            notFound.innerText = 'Error fetching data';
-            console.error('Error fetching data:', error);
-        }
+    loading.style.display = 'block';
+    const response = await fetch(`https://www.dictionaryapi.com/api/v3/references/collegiate/json/${word}?key=${apiKey}`);
+    const data = await response.json();
+
+    loading.style.display = 'none';
+
+    if (!data.length) {
+        notFound.innerText = 'No result found';
+        return;
     }
 
-    function displaySuggestions(suggestions) {
-        const heading = document.createElement('h3');
+    if (typeof data[0] === 'string') {
+        let heading = document.createElement('h3');
         heading.innerText = 'Did you mean?';
         notFound.appendChild(heading);
-        suggestions.forEach(suggestion => {
-            const suggestionElement = document.createElement('span');
-            suggestionElement.classList.add('suggested');
-            suggestionElement.innerText = suggestion;
-            notFound.appendChild(suggestionElement);
+        data.forEach(element => {
+            let suggestion = document.createElement('span');
+            suggestion.classList.add('suggested');
+            suggestion.innerText = element;
+            notFound.appendChild(suggestion);
         });
+        return;
     }
 
-    function displayDefinition(data, word) {
-        const definition = data.shortdef[0];
-        defBox.innerText = definition;
+    let definition = data[0].shortdef[0];
+    defBox.innerText = definition;
 
-        const wordElement = document.createElement('span');
-        const meaningElement = document.createElement('span');
-        const br = document.createElement('br');
+    let words = document.createElement('span');
+    let meaning = document.createElement('span');
+    let br = document.createElement('br');
 
-        wordElement.classList.add('suggested');
-        meaningElement.classList.add('suggested');
-        wordElement.innerHTML = word;
-        meaningElement.innerHTML = definition;
+    words.classList.add('suggested');
+    meaning.classList.add('suggested');
+    words.innerHTML = word;
+    meaning.innerHTML = definition;
 
-        wordBox.appendChild(wordElement);
-        wordBox.appendChild(meaningElement);
-        wordBox.appendChild(br);
-    }
-});
+    wordBox.appendChild(words);
+    wordBox.appendChild(meaning);
+    wordBox.appendChild(br);
+}

public/Word_dictionary/index.html

@@ -12,18 +12,22 @@
 <body>
     <nav>
         <div class="container">
-            <h1>Dictionary</h1>
+            <h1>Word Dictionary</h1>
         </div>
     </nav>
-
     <section class="input container">
-        <h2>Find any word exist in the world :</h2>
+        <div id="box">
+        <h2>Find any word exist in the world</h2>
         <div class="form__wrap">
             <div class="input__wrap">
                 <input type="text" placeholder="Type a word" id="input">
+
+                <button id="start-btn">Start Speaking</button>
+                <button id="stop-btn">Stop</button>
                 <button id="search">Search</button>
             </div>
         </div>
+        </div>
     </section>
    <section class="words_Meaning">
 

public/Word_dictionary/style.css

@@ -16,16 +16,18 @@ body {
     margin: 0 auto;
 }
 nav {
-    background: #553C9A;
+    background:rgb(1, 80, 129);
     color: #fff;
     padding: 1rem 0;
+    margin-bottom: 20px;
 }
 section.input {
     padding-top: 100px;
 }
 h2 {
     text-align: center;
     font-size: 36px;
+
 }
 
 .form__wrap {
@@ -36,7 +38,7 @@ h2 {
     display: flex;
     align-items: center;
     border: 1px solid #ddd;
-    margin-top: 20px;
+    margin:10px;
 }
 
 input {
@@ -47,12 +49,14 @@ input {
     outline: none;
 }
 button{
-    background:#553C9A;
+    background-color: #584290;
     color: #fff;
     height: 100%;
     font-size: 16px;
     padding: 0 20px;
     cursor: pointer;
+    border-radius:2px;
+
 }
 section.data{
     max-width: 600px;
@@ -93,4 +97,21 @@ td,th{
 th{
     font-weight: bold;
     text-transform: uppercase;
-}
+}
+
+
+button:hover {
+    background-color:darkcyan;
+}
+
+.input
+{
+    background-color: rgb(241, 241, 241);
+
+}
+
+.box{
+    display: flex;
+    justify-content: center;
+    margin: 10px;
+}