How i Built a Dictionary Using JavaScript

Features:

1 Dictionary Lookup: Users can search for the definitions of words using the built-in dictionary feature.
2 Text-to-Speech: One of the standout features of Voice Dictionary is its text-to-speech functionality.
3 Theme Switching: Users can switch between light and dark themes to suit their preferences.

In this comprehensive article, you’ll learn how to build a dictionary that converts definitions to speech. here is a link to the github preview dictionary, also a link to the github source code, so sit back, relax and enjoy the content
To get started I'd love you to have a basic knowledge of HTML, CSS, and JAVASCRIPT since that's the technology we will be using
most importantly how to get data using the Fetch API in javascript, and if you're not familiar with the word Fetch API in javascript here is a link to a comprehensive article on javascript fetch API understanding fetch API in javascript.

Introduction:

In the digital age, access to information is at our fingertips. One such area where this is particularly beneficial is language learning and exploration. Voice Dictionary – a simple yet powerful web application that I designed to help users effortlessly explore and expand their vocabulary.

Getting started

Fetching data
The first thing we need to do is illustrate the process of fetching dictionary data based on the user's search query, updating the UI to display a "Loading..." message during the fetch operation, and clearing previous content in the dictionary container to prepare for displaying the new search results.

 let text = searchText.value.trim();
  if (text !== "") {
    dictionaryDiv.innerHTML = "Loading...";

    fetch(  `https://dictionaryapi.com/api/v3/references/learners/json/${text}?key=05a6f186-4232-4fd5-be99-0e12575a6a6d`
    )
      .then((response) => response.json())
      .then((data) => {
        dictionaryDiv.innerHTML = ""; // Clear previous content

Next step checks if the fetched data (Data) Is an array and if it has at least one element (i.e., its length is greater than 0).

if (Array.isArray(data) && data.length > 0) {
          const wordData = data[0];

Updating the UI
In this part, we dynamically generate and update the UI to display the definition of the searched word, along with its part of speech, if available. It ensures a user-friendly experience by providing relevant information or feedback based on the outcome of the dictionary lookup.

     if (wordData.shortdef) {
            // Display the first definition (you can loop through 
     'wordData.shortdef' for multiple definitions)
            const partOfSpeech = wordData.fl; // Part of speech
            const definition = wordData.shortdef[0]; // First 
       definition

            dictionaryDiv.innerHTML = `
            <div class="word-content">
            <div class="text">
              <h1>${text}</h1>
            </div>
            <div class="play-logo">
              <i class="fa fa-play" aria-hidden="true"></i>
            </div>
          </div>
          <div class="speech">
            <p>${partOfSpeech}</p>
            <hr />
          </div>
          <div class="meaning">Meaning</div>

          <div class="meaning-text">
            <li>${definition}</li>
              `;
          } else {
            dictionaryDiv.innerHTML = "No definition found for the 
           word.";
          }

Text-to-Speech logic
Below we create a function that conveniently enables text-to-speech functionality within the application, allowing users to listen to the pronunciation and definition of words by simply invoking this function with the relevant text. It gracefully handles cases where the browser lacks support for the Speech Synthesis API, providing feedback to the user or developer about the limitations of the environment.

function speakDefinition(definitionText) {
  if ("speechSynthesis" in window) {
    const utterance = new SpeechSynthesisUtterance(definitionText);
    speechSynthesis.speak(utterance);
  } else {
    console.log("Text-to-speech not supported in this browser.");
  }
}

Theme switching

if (savedTheme) {
  mainContainer.classList.add(savedTheme);
  if (savedTheme === "dark-theme") {
    faMoon.classList.replace("fa-moon", "fa-sun");
  }
}

faMoon.addEventListener("click", () => {
  mainContainer.classList.toggle("dark-theme");

  if (faMoon.classList.contains("fa-moon")) {
    faMoon.classList.replace("fa-moon", "fa-sun");
    // Save the theme setting to local storage
    localStorage.setItem("theme", "dark-theme");
  } else {
    faMoon.classList.replace("fa-sun", "fa-moon");
    // Save the theme setting to local storage
    localStorage.setItem("theme", "");
  }
});

the above code provides functionality for toggling between light and dark themes using a moon/sun icon and saving the user's theme preference to local storage for persistence across page visits.
Conclusion
yooo!!!! this is how I built the dictionary; By studying the provided code, learners can gain a practical understanding of building modern dictionary applications, integrating with APIs, handling data, managing user preferences, and enhancing accessibility features. hopefully, you find this article helpful, if so please consider leaving a comment and liking what you have just read.