script.js

let input = document.querySelector("#input");
let searchBtn = document.querySelector("#search");
let apiKey = "1189cfc7-1511-453f-89e5-34d6fd00ecd1";
let notFound = document.querySelector(".not__found");
let defBox = document.querySelector(".def");
let audioBox = document.querySelector(".audio");
let loading = document.querySelector(".loading");

searchBtn.addEventListener("click", dict);

function dict(e) {
  e.preventDefault();
  let word = input.value;
  if (word === "") {
    alert("Word is required");
    return;
  }
  ClearOutput();
  getData(word);
}

function search(e) {
  console.log(e.target.value);
  console.log(e.key);
  if (e.key === "Enter") {
    dict(e);
  }
  return false;
}
document.getElementById("input").addEventListener("input", ClearOutput());

function ClearOutput() {
  document.querySelector(".def").innerHTML = "";
  document.querySelector(".audio").innerHTML = "";
  document.querySelector(".not__found").innerHTML = "";
}

async function getData(word) {
  loading.style.display = "block";

  const response = await fetch(
    `https://www.dictionaryapi.com/api/v3/references/learners/json/${word}?key=${apiKey}`
  );

  const data = await response.json();
  console.log(data);

  if (!data.length) {
    loading.style.display = "none";
    notFound.innerText = " No result found";
    return;
  }

  if (typeof data[0] === "string") {
    loading.style.display = "none";
    let heading = document.createElement("h3");
    heading.innerText = "Did you mean?";
    notFound.appendChild(heading);
    data.forEach((element) => {
      let suggetion = document.createElement("span");
      suggetion.classList.add("suggested");
      suggetion.innerText = element;
      notFound.appendChild(suggetion);
    });
    return;
  }

  // Result found
  loading.style.display = "none";
  let defination = data[0].shortdef[0];
  defBox.innerText = defination;

  // Sound
  const soundName = data[0].hwi.prs[0].sound.audio;
  if (soundName) {
    renderSound(soundName);
  }

  console.log(data);
}

function renderSound(soundName) {
  // https://media.merriam-webster.com/soundc11
  let subfolder = soundName.charAt(0);
  let soundSrc = `https://media.merriam-webster.com/soundc11/${subfolder}/${soundName}.wav?key=${apiKey}`;
  let aud = document.createElement("audio");
  aud.src = soundSrc;
  aud.controls = true;
  audioBox.appendChild(aud);
}