Open arshsaxena opened 2 years ago
@meetDeveloper?
@meetDeveloper, this issue still exists even after the migration.
Will you be able to share your script?
const wrapper = document.querySelector(".dictionary-container"), searchInput = wrapper.querySelector("input"), volume = wrapper.querySelector(".word i"), infoText = wrapper.querySelector(".info-text"), synonyms = wrapper.querySelector(".synonyms .list"), removeIcon = wrapper.querySelector(".search span"); let audio;
function data(result, word){
if(result.title){
infoText.innerHTML = The meaning of <span><i><b>${word}</b></i></span> can't be found. Try to search for another word.
;
}else{
// wrapper.classList.add("active");
// let definitions = result[0].meanings[0].definitions[0],
// phontetics = ${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/
;
// document.querySelector(".word p").innerText = result[0].word;
// document.querySelector(".word span").innerText = phontetics;
// document.querySelector(".meaning span").innerText = definitions.definition;
// document.querySelector(".example span").innerText = definitions.example;
// audio = new Audio("https:" + result[0].phonetics[0].audio);
wrapper.classList.add("active");
let definitions = result[0].meanings[0].definitions[0],
definitions1 = result[0].meanings[0].definitions[0],
pofspeech1 = result[0].meanings[0],
definitions2 = result[0].meanings[1].definitions[0],
pofspeech2 = result[0].meanings[1],
definitions3 = result[0].meanings[2].definitions[0],
pofspeech3 = result[0].meanings[2],
phontetics = ${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/
;
document.querySelector(".word p").innerText = result[0].word;
document.querySelector(".word span").innerText = phontetics;
document.querySelector(".meaning1 .pos1").innerText = pofspeech1.partOfSpeech;
document.querySelector(".meaning1 .def1").innerText = definitions1.definition;
document.querySelector(".meaning1 .eg1").innerText = definitions1.example;
document.querySelector(".meaning2 .pos2").innerText = pofspeech2.partOfSpeech;
document.querySelector(".meaning2 .def2").innerText = definitions2.definition;
document.querySelector(".meaning2 .eg2").innerText = definitions2.example;
document.querySelector(".meaning3 .pos3").innerText = pofspeech3.partOfSpeech;
document.querySelector(".meaning3 .def3").innerText = definitions3.definition;
document.querySelector(".meaning3 .eg3").innerText = definitions3.example;
audio = new Audio("https:" + result[0].phonetics[0].audio);
if(definitions.synonyms[0] == undefined){
synonyms.parentElement.style.display = "none";
}else{
synonyms.parentElement.style.display = "block";
synonyms.innerHTML = "";
for (let i = 0; i < 5; i++) {
let tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[i]}</span>`;
tag = i == 4 ? tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[4]}</span>` : tag;
synonyms.insertAdjacentHTML("beforeend", tag);
}
}
}
}
function search(word){ fetchApi(word); searchInput.value = word; }
function fetchApi(word){
wrapper.classList.remove("active");
infoText.style.color = "#000";
infoText.innerHTML = Searching for the meaning of <span><i><b>${word}<b></i>.</span>
;
let url = https://api.dictionaryapi.dev/api/v2/entries/en/${word}
;
fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{
infoText.innerHTML = The meaning of <span><i><b>${word}</b></i></span> can't be found. Try to search for another word.
;
});
}
searchInput.addEventListener("keyup", e =>{ let word = e.target.value.replace(/\s+/g, ' '); if(e.key == "Enter" && word){ fetchApi(word); } });
volume.addEventListener("click", ()=>{ volume.style.color = "#007aff"; audio.play(); setTimeout(() =>{ volume.style.color = "#989898"; }, 800); });
removeIcon.addEventListener("click", ()=>{ searchInput.value = ""; searchInput.focus(); wrapper.classList.remove("active"); infoText.innerHTML = "Type any word and press ENTER to get its meaning, example, and synonyms."; });`
Please ignore the indentation. Also, the messy formatting. This is the complete JS code.
slightly offtopic, but using the url syntax provided on dictionaryapi.dev, i also find that some words that are on wikitionary don't return a result via the API, such as "vndicatory"
https://api.dictionaryapi.dev/api/v2/entries/en/vindicatory https://en.wiktionary.org/wiki/vindicatory
When I extract multiple meanings indces, the script works fine for first 2-3 words but after that it returns the last word.