In this article, you will learn how you can build a dictionary using JavaScript and DOM manipulation. This article expects you to know the basics of JavaScript before reading.

Having a Look at the API

API stands for Application Programming Interface. APIs simplify software development and innovation by enabling applications to exchange data and functionality easily and securely.

This project uses dictionaryapi.dev API. This is a free API that provides multiple definitions, phonetics, and other grammatical terms related to words that you search.

The link to the API is as follows:

Frontend Layout of the Project

The frontend layout of this project is built using HTML and TailwindCSS. You can import TailwindCSS in your HTML file using the CDN given below.

The HTML page has an input and a button where the user can enter the word to be searched. There are three more divs to display the part of speech, multiple definitions, and audio that helps you pronounce the word correctly. By default, these three divs have a display property of none. When the data is fetched from the API the display property of these divs will be set to block.

This frontend will look like this

Adding Functionality Using JavaScript

Before fetching the data through API and displaying it, you need to get access to HTML elements using their ids. You can get access to the ids using the JavaScript method getElementById().

Adding the Event Listener

The input element in the HTML page has an id named word. After getting access to the input element, you can retrieve the value of the text in the input element using the .value attribute.

The search button has the id named search. You have to add a click event listener to trigger the event and make a function call to fetch the data through API.

Async and Await

Since 2017, JavaScript has introduced the concept of async and await to perform asynchronous requests. You use async-await instead of .then and .catch to resolve and reject promises.

To work with promises using async-await, you need to add the async keyword before the function definition. And whenever you make a request or call a function, you have to add the await keyword before it.

The await keyword pauses the further execution of the function until the previous request does not get completed.

You need to perform the entire async-await promise action in the try-catch block. If the promise is not able to fetch the data then it will display the error in the catch block. Before passing the word to the API, it should be in the lowercase format for accurate results. You can use the .lowercase() string method to convert the word.

The fetch method shall retrieve the data from the API. You have to add the await keyword so that the function pauses at that moment while the fetch method is retrieving the data.

After retrieving the data, you need to convert it in JSON format using the .json() method on the response.

Displaying the Data on the Web Page

After retrieving the data and converting it to JSON format, you have to display it on the web page. You need to call the displayData() method and pass the data to it.

The structure of the API response is as follows:

The API returns the part of speech, multiple definitions, and phonetics of the words in the response.

You can get all the definitions of the given word using:

The variable meanings is an array that contains all the definitions of the given word.

To get the Part of Speech of the given word:

You can add the Part of Speech of the word using the .innerHTML attribute. In the HTML code, the part of speech div had the property of display none by default but, in the JavaScript code, after fetching the data, you need to set the display property to block.

Displaying the Definitions

You have to create a variable named meaningList. After appending all the definitions to this variable, you need to assign it the .innerHTML attribute to display it on the web page.

Loop through the meanings array and keep track of a single definition and the index at which it is present. Append the single definition and index to the meaningList variable inside the paragraph element of HTML.

Once you’re out of the loop, you have to pass it to the .innerHTML attribute of meaningDiv.

Display the Audio Element on the Web Page

The response received by the API contains phonetics that help users to understand the pronunciation of the word. To add this sound on the web page, you need to create an audio element and pass phonetics in the src attribute of that element. Finally, you need to put the audio element in the audioDiv using the .innerHTML attribute.

Add Another Project to Your List

Now that you have learned to build a dictionary app using JavaScript, it’s time for you to build some exciting projects by yourself. Building projects will not only brush up on your basics but also add projects to your resume.

Looking for more practice on JavaScript and DOM manipulation concepts? Here’s another project that you can build to strengthen your skills.