Welcome to today’s tutorial. Today we will learn how to create an English Dictionary using HTML, CSS and Javascript. This fun project is suited for javascript intermediates. For javascript beginners, you can try out other projects that I have here.
The dictionary app consists of a search text field and a search button. The user has to enter the word in the text field and click on the search button. The result displays the word meaning, word pronunciation along with pronunciation audio clip. It also displays word usage for appropriate words. For words where example cannot be provided, the word usage space is hidden.
For this project, we use HTML, CSS and vanilla Javascript along with the Dictionary API. If you are looking for more projects to practice the Fetch API you can check out this playlist. Even though there aren’t many tutorials in the playlist at this moment, I will be adding more of them this month. So stay tuned.
Video Tutorial:
I have a video tutorial on my youtube channel on creating this javascript dictionary app. If you are interested do check it out here. Also, I post a new tutorial on my youtube channel every alternate day, so do subscribe to my youtube channel.
Project Structure:
Dictionary. Within this folder, we have three files -a an HTML document, a stylesheet and a script file. Name them index.html, style.css and script.js respectively.HTML:
Let us start by coding the HTML part first. Copy the code below and paste it into your HTML document.
The HTML document consists of a container div to wrap and centre all the other elements. Inside the container, we have a div called a search box. The search box consists of an input type text and a button. Apart from this, the HTML code consists of an audio tag and a result div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<title>Dictionary</title>
</head>
<body>
<audio id="sound"></audio>
<div class="container">
<div class="search-box">
<input
type="text"
placeholder="Type the word here.."
id="inp-word"
/>
<button id="search-btn">Search</button>
</div>
<div class="result" id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
For the CSS code copy, the code provided to you below and paste it into your stylesheet.
We make the dictionary presentable by adding some styles to it using CSS. I have used the flex layout to position and space elements. The rest of the styling is pretty self-explanatory.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
*:not(i) {
font-family: "Poppins", sans-serif;
}
body {
background-color: #ae9cff;
}
.container {
background-color: #ffffff;
width: 90vmin;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 80px 50px;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
}
.search-box {
width: 100%;
display: flex;
justify-content: space-between;
}
.search-box input {
padding: 5px;
width: 70%;
border: none;
outline: none;
border-bottom: 3px solid #ae9cff;
font-size: 16px;
}
.search-box button {
padding: 15px 0;
width: 25%;
background-color: #ae9cff;
border: none;
outline: none;
color: #ffffff;
border-radius: 5px;
}
.result {
position: relative;
}
.result h3 {
font-size: 30px;
color: #1f194c;
}
.result .word {
display: flex;
justify-content: space-between;
margin-top: 80px;
}
.result button {
background-color: transparent;
color: #ae9cff;
border: none;
outline: none;
font-size: 18px;
}
.result .details {
display: flex;
gap: 10px;
color: #b3b6d4;
margin: 5px 0 20px 0;
font-size: 14px;
}
.word-meaning {
color: #575a7b;
}
.word-example {
color: #575a7b;
font-style: italic;
border-left: 5px solid #ae9cff;
padding-left: 20px;
margin-top: 30px;
}
.error {
margin-top: 80px;
text-align: center;
}
Javascript:
To add functionality to the dictionary we use javascript. Copy the code below and paste it into your script.js file.
In javascript, we use a URL that we have obtained from the dictionary API website and assign it to a variable called url. We target other elements and assign them to variables too.
We add an on-click event listener to the button. The user input word is stored in a variable called inpWord. We fetch the URL and get a JSON response. This response is in the JSON object. Now, we need to create HTML elements via javascript. Next, we search the JSON object to get the needed data. We display each of these data in the appropriate HTML element.
To play the pronunciation audio we create a function called playSound(). Inside this function, we call the play() on the audio file.
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;
fetch(`${url}${inpWord}`)
.then((response) => response.json())
.then((data) => {
console.log(data);
result.innerHTML = `
<div class="word">
<h3>${inpWord}</h3>
<button onclick="playSound()">
<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>`;
sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`);
})
.catch(() => {
result.innerHTML = `<h3 class="error">Couldn't Find The Word</h3>`;
});
});
function playSound() {
sound.play();
}
If you have issues creating this project, you can download the project by clicking on the button below. For any other queries and suggestions, do comment below.
Hi, thank you so much for all your tutorials, especially this DICTIONARY APP|HTML|CSS and JAVASCRIPT Tutorial.
But I still need some help,…
I’m building dictionary in my own language but not with API, how can I let a user to query the value of the keys (words) by search button, just like in your tutorial except not with API.
Thank you in anticipation of your guide.
hi, does the text to speech feature is playing on you?
did you find out how
hi, i am not able to play the sound whenever i click that. What is the problem
hello. the text to speech feature is not working. Can you please help?
Change sound.setAttribute(“src”, `https:${data[0].phonetics[0].audio}`);
to: sound.setAttribute(“src”, data[0].phonetics[0].audio);
and it will work 🙂
Hello, the search button is not working, can you please help?
did you find out how?
To Fix the sound issue. Change this line:
`sound.setAttribute(“src”, `https:${data[0].phonetics[0].audio}`);`
to this:
`sound.setAttribute(“src”, `${data[0].phonetics[1].audio}`);`
The “phonetics” array needs the second element, not the first.
And the URL should not have “https:” prepended to it as it already has that.