Dictionary App Using HTML,CSS and JavaScript
Hey, friends today we will see how to make this super interesting dictionary app using HTML, CSS, and JavaScript. The demo video is at the bottom of the page.
Now first let’s see the general method to use for this project. When the page is loaded, you can enter any word and if it’s available, the definition will pop up. Sometimes, an example sentence would come too.
Now let’s see the source codes:
HTML Code For Dictionary App
Paste the codes below :
<div class="wrapper"> <header>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>
The output would be:
Portfolio Website using HTML and CSS (Source Code)
CSS Code For Dictionary App
Paste the codes below :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: cyan;
}
::selection {
color: #fff;
background: cyan;
}
.wrapper {
width: 420px;
border-radius: 7px;
background: #fff;
padding: 25px 28px 45px;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header {
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper .search {
position: relative;
margin: 35px 0 18px;
}
.search input {
height: 53px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding: 0 42px;
border: 1px solid #999;
}
.search input:focus {
padding: 0 41px;
border: 2px solid cyan;
}
.search input::placeholder {
color: #B8B8B8;
}
.search :where(i, span) {
position: absolute;
top: 50%;
color: #999;
transform: translateY(-50%);
}
.search i {
left: 18px;
pointer-events: none;
font-size: 16px;
}
.search input:focus~i {
color: cyan;
}
.search span {
right: 15px;
cursor: pointer;
font-size: 18px;
display: none;
}
.search input:valid~span {
display: block;
}
.wrapper .info-text {
font-size: 13px;
color: #9A9A9A;
margin: -3px 0 -10px;
}
.wrapper.active .info-text {
display: none;
}
.info-text span {
font-weight: 500;
}
.wrapper ul {
height: 0;
opacity: 0;
padding-right: 1px;
overflow-y: hidden;
transition: all 0.2s ease;
}
.wrapper.active ul {
opacity: 1;
height: 303px;
}
.wrapper ul li {
display: flex;
list-style: none;
margin-bottom: 14px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid #D9D9D9;
justify-content: space-between;
}
ul li:last-child {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
}
ul .word p {
font-size: 22px;
font-weight: 500;
}
ul .word span {
font-size: 12px;
color: #989898;
}
ul .word i {
color: #999;
font-size: 15px;
cursor: pointer;
}
ul .content {
max-height: 215px;
overflow-y: auto;
}
ul .content::-webkit-scrollbar {
width: 0px;
}
.content li .details {
padding-left: 10px;
border-radius: 4px 0 0 4px;
border-left: 3px solid cyan;
}
.content li p {
font-size: 17px;
font-weight: 500;
}
.content li span {
font-size: 15px;
color: #7E7E7E;
}
.content .synonyms .list {
display: flex;
flex-wrap: wrap;
}
.content .synonyms span {
cursor: pointer;
margin-right: 5px;
text-decoration: underline;
}Now we add JavaScript for functionality.
Vertical Image Slider Using HTML,CSS & JavaScript
JavaScript Code For Dictionary App
Paste the codes below :
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.";
});100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Final Output Of Dictionary App Using HTML,CSS and JavaScript
And that’s all for this project. Thanks for reading and goodbye!
Written by: @codingporium
