Sunday 20 February 2022
Make Own API English Dictionary
----------------------------------------------------------------------------------------------------------------------
Dictionary App in JavaScript
Read More:
https://www.codingnepalweb.com/build-dictionary-app-html-javascript/
----------------------------------------------------------------------------------------------------------------------
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dictionary App in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CDN Link for Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>API English Dictionary</header>
<div class="search">
<input type="text" placeholder="Search a word" required spellcheck="false">
<i class="fas fa-search"></i>
<span class="material-icons">close</span>
</div>
<p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
<ul>
<li class="word">
<div class="details">
<p>__</p>
<span>_ _</span>
</div>
<i class="fas fa-volume-up"></i>
</li>
<div class="content">
<li class="meaning">
<div class="details">
<p>Meaning</p>
<span>___</span>
</div>
</li>
<li class="example">
<div class="details">
<p>Example</p>
<span>___</span>
</div>
</li>
<li class="synonyms">
<div class="details">
<p>Synonyms</p>
<div class="list"></div>
</div>
</li>
</div>
</ul>
</div>
<script type='text/javascript'>
const wrapper = document.querySelector(".wrapper"),
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 = `Can't find the meaning of <span>"${word}"</span>. Please, 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);
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 the meaning of <span>"${word}"</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 = `Can't find the meaning of <span>"${word}"</span>. Please, 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 = "#4D59FB";
audio.play();
setTimeout(() =>{
volume.style.color = "#999";
}, 800);
});
removeIcon.addEventListener("click", ()=>{
searchInput.value = "";
searchInput.focus();
wrapper.classList.remove("active");
infoText.style.color = "#9A9A9A";
infoText.innerHTML = "Type any existing word and press enter to get meaning, example, synonyms, etc.";
});
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment