script.js

const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const result = document.getElementById("result");
const sound = document.getElementById("sound");
const btn = document.getElementById("search-btn");

btn.addEventListener("click", () => {
    let inpWord = document.getElementById("inp-word").value.trim();
    if (!inpWord) return; // Avoid empty input

    fetch(`${url}${inpWord}`)
        .then(response => response.json())
        .then(data => {
            if (data.title === "No Definitions Found") {
                result.innerHTML = `<h3 class="error">Couldn't Find The Word</h3>`;
                return;
            }

            const phonetics = data[0].phonetics.find(p => p.audio); // Find a phonetic with audio
            if (phonetics) {
                sound.setAttribute("src", phonetics.audio);
            } else {
                sound.removeAttribute("src");
            }

            result.innerHTML = `
            <div class="word">
                <h3>${inpWord}</h3>
                <button id="play-sound">
                    <i class="fas fa-volume-up"></i>
                </button>
            </div>
            <div class="details">
                <p>${data[0].meanings[0].partOfSpeech}</p>
                <p>/${data[0].phonetic || ''}/</p>
            </div>
            <p class="word-meaning">
                ${data[0].meanings[0].definitions[0].definition}
            </p>
            <p class="word-example">
                ${data[0].meanings[0].definitions[0].example || ""}
            </p>`;

            document.getElementById("play-sound").addEventListener("click", playSound);
        })
        .catch(() => {
            result.innerHTML = `<h3 class="error">Couldn't Find The Word</h3>`;
        });
});

function playSound() {
    if (sound.src) {
        sound.play();
    } else {
        alert("No audio available for this word.");
    }
}