Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Dictionary App" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Dictionary App" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Dictionary App [Source Code]
To get the following HTML, CSS & JS code for the Dictionary App project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dictionary App</title>
<link rel="stylesheet" href="style.css">
<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="container">
<h1>Dictionary App</h1>
<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 a word & click 'ENTER' to get the results.</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="synonyms">
<div class="details">
<p>Synonyms :</p>
<span class="list"></span>
</div>
</li>
<li class="source">
<div class="details">
<p>Source :</p>
<span></span>
</div>
</li>
</div>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
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: red;
}
a {
text-decoration: none;
color: gray;
text-decoration: underline;
}
.container {
width: 420px;
border-radius: 7px;
background: white;
padding: 25px 28px 45px;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.container h1 {
font-size: 28px;
font-weight: 600;
text-align: center;
margin-bottom: -20px;
}
.container .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 gray;
}
.search input:focus {
padding: 0 41px;
border: 2px solid red;
}
.search :where(i, span) {
position: absolute;
top: 50%;
color: gray;
transform: translateY(-50%);
}
.search i {
left: 18px;
pointer-events: none;
font-size: 16px;
}
.search input:focus ~ i,
input:focus ~ span {
color: red;
}
.search span {
right: 15px;
cursor: pointer;
font-size: 18px;
display: none;
}
.search input:valid ~ span {
display: block;
}
.container .info-text {
font-size: 15px;
color: black;
margin: 0 0 -20px;
text-align: center;
}
.container.active .info-text {
display: none;
}
.info-text span {
font-weight: 500;
}
.container ul {
height: 0;
opacity: 0;
padding-right: 1px;
overflow-y: hidden;
transition: all 0.2s ease;
}
.container.active ul {
opacity: 1;
height: 303px;
}
.container ul li {
display: flex;
list-style: none;
margin-bottom: 14px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid gray;
justify-content: space-between;
}
ul li:last-child {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
}
ul .word p {
color: red;
font-size: 18px;
font-weight: 500;
}
ul .word span {
font-size: 12px;
color: gray;
}
ul .word i {
color: gray;
font-size: 15px;
cursor: pointer;
}
ul .content {
max-height: 215px;
overflow-y: auto;
}
ul .content::-webkit-scrollbar {
width: 0px;
}
.content li p {
color: red;
font-size: 17px;
font-weight: 500;
}
.content li span {
font-size: 15px;
color: gray;
}
.content .synonyms .list {
display: flex;
flex-wrap: wrap;
}
.content .synonyms span {
margin-right: 5px;
}
JavaScript
const containerEl = document.querySelector(".container");
const searchInputEl = containerEl.querySelector("input");
const volumeEl = containerEl.querySelector(".word i");
const infoTextEl = containerEl.querySelector(".info-text");
const synonymsEl = containerEl.querySelector(".synonyms .list");
const removeIcon = containerEl.querySelector(".search span");
let audio;
searchInputEl.addEventListener("keyup", e => {
let word = e.target.value;
if (e.key == "Enter" && word) {
fetchApi(word);
}
});
function fetchApi(word) {
containerEl.classList.remove("active");
infoTextEl.style.color = "black";
infoTextEl.innerHTML = `Searching the meaning of <span>"${word}"</span>`;
// Link to get this api : https://dictionaryapi.dev/
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
try {
fetch(url).then(response => response.json()).then(data => {
if (data.title) {
infoTextEl.innerHTML = `Unable to find the meaning of the word <span>"${word}"</span>. Please, Search for another word.`;
} else {
containerEl.classList.add("active");
let definitions = data[0].meanings[0].definitions[0],
phonetics = `${data[0].meanings[0].partOfSpeech} /${data[0].phonetics[0].text}/`;
document.querySelector(".word p").innerText = `Word : ${data[0].word}`;
document.querySelector(".word span").innerText = phonetics;
document.querySelector(".meaning span").innerText = definitions.definition;
document.querySelector(".source span").innerHTML = `<a href="${data[0].sourceUrls[0]}" target="_blank">${data[0].sourceUrls[0]}</a>`;
audio = new Audio(data[0].phonetics[0].audio);
if (data[0].meanings[0].synonyms[0] === undefined) {
synonymsEl.innerHTML = "NA";
} else {
synonymsEl.innerHTML = "";
for (let i = 0; i < 5; i++) {
let tag = `<span>${data[0].meanings[0].synonyms[i]},</span>`;
synonymsEl.insertAdjacentHTML("beforeend", tag);
}
}
}
})
} catch {
infoTextEl.innerHTML = `Unable to find the meaning of the word <span>"${word}"</span>. Please, Search for another word.`;
}
}
//For volume button
volumeEl.addEventListener("click", () => {
volumeEl.style.color = "red";
audio.play();
setTimeout(() => {
volumeEl.style.color = "gray";
}, 800);
});
//for remove icon which is available in input field
removeIcon.addEventListener("click", () => {
searchInputEl.value = "";
searchInputEl.focus();
containerEl.classList.remove("active");
infoTextEl.style.color = "black";
infoTextEl.innerHTML = "Type a word & click 'ENTER' to get the results.";
});
Generating Download Link...