how to create an English Dictionary App using HTML & Javascript

Welcome to today’s tutorial. In this tutorials, we will learn how to create an English Dictionary App using HTML, CSS and Javascript. This fun project is suited for javascript intermediates. In the last tutorial we are created RGB To HEX / Hex To RGB Converter Using Javascript.

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 with audio clip. It also displays word usage for appropriate words. For words where example cannot be provided, the word usage space is hidden.

Before we start coding, let’s take a look at our project structure. The project structure is called Dictionary App. Within this folder, we have three files -a an HTML document, a stylesheet and a script file. Name them index.htmlstyle.css and script.js respectively.

Table of Contents

HTML

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

the css code provided to you below and paste it into your stylesheet file.
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;
}

JS

To add functionality to the dictionary app 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();
}

Also Read : How To Create Animated Panda Login Page using HTML & JS

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of dictionary app directly on your computer.

Final Word

In this way, we can create english dictionary app using html, css & JavaScriptI hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.

how to create an English Dictionary App using HTML & Javascript

Published on 03-Jan-2022 18:11:31

You may also like this!