Learn how to create a simple dictionary app using JavaScript

0

JavaScript is one of the most popular programming languages ​​among web developers. While learning JavaScript, everyone starts with the basics and building simple applications using DOM manipulation.

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

Look at the API

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

This project uses the Dictionaryapi.dev API. This is a free API that provides several definitions, phonetics, and other grammatical terms related to the words you are looking for.

The link to the API is as follows:

https://api.dictionaryapi.dev/api/v2/entries/en/word

Frontal layout of the project

The front-end layout for this project is built using HTML and TailwindCSS. You can import TailwindCSS into your HTML file using the CDN below.


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

 


Dictionary



type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search








This interface will look like this

Front-end layout of the dictionary project

Adding Features Using JavaScript

Before you can retrieve the data through the API and display it, you need to access the HTML elements using their credentials. You can access the credentials using the JavaScript method getElementById ().

const word = document.getElementById("word");
const search = document.getElementById("search");
const display = document.getElementById("display");
const partOfSpeechDiv = document.getElementById("partOfSpeechDiv");
const partOfSpeechHeader = document.getElementById("partOfSpeechHeader");
const partOfSpeechPara = document.getElementById("partOfSpeechPara");
const meaningDiv = document.getElementById("meaningDiv");
const audioDiv = document.getElementById("audio");
const meaningHeader = document.getElementById("meaningHeader");

Adding the event listener

The input element in the HTML page has a named identifier word. After gaining 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 named identifier to look for. You must add a Click on event listener to raise the event and make a function call to retrieve the data through the API.

Async and pending

Since 2017, JavaScript introduced the concept of asynchronous and wait to perform asynchronous requests. You use async-wait in the place of .so and .to catch resolve and reject promises.

Related: Synchronous Programming vs Asynchronous Programming: How Are They Different?

search.addEventListener("click", async () => {
try {
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`;
const res = await fetch(url);
const data = await res.json();
displayData(data);
} catch (error) {
console.log(error);
}
});

To work with promises using async-wait, you must add the asynchronous keyword before the function definition. And every time you make a request or call a function, you need to add the wait keyword before.

The wait The keyword suspends further execution of the function until the previous request is not completed.

You must complete the set async-wait promise an action in the try-catch to block. If the promise fails to retrieve the data, it will display the error in the to catch to block. Before passing the word to the API, it should be in lowercase format for accurate results. You can use the .tiny() string method to convert the word.

The fetch method should retrieve the data from the API. You must add the wait keyword to cause the function to stop at that point while the fetch method retrieves data.

After recovering the data, you need to convert it to JSON format using .json () method on the answer.

Viewing data on the web page

After recovering the data and converting it to JSON format, you need to display it on the web page. You must call the showData () method and pass the data to it.

The structure of the API response is as follows:

The image shows the response of the data fetched from the API

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

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

const meanings = data[0].meanings[0].definitions;

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

To get the part of speech for the given word:

const partOfSpeech = data[0].meanings[0].partOfSpeech;

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

Display of definitions

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

Related: HTML Essentials Cheat Sheet: Tags, Attributes, etc.

Go through the table of meanings and keep track of a single definition and the index at which it is present. Add the unique definition and index to the meaning list variable inside the paragraph element of HTML.

Once you are out of the loop, you need to pass it to the .innerHTML attribute of sensDiv.

Display the audio element on the web page

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

Displays the definitions, part of speech and phonetics of the given word

const displayData = (data) => {
console.log(data);
const partOfSpeech = data[0].meanings[0].partOfSpeech;
const meanings = data[0].meanings[0].definitions;
partOfSpeechDiv.className =
"bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block";
partOfSpeechHeader.innerHTML = "Part of Speech";
partOfSpeechPara.innerHTML = partOfSpeech;
let meaningList = ``;
meanings.forEach((meaning, ind) => {
meaningList += `

${ind + 1}) ${
meaning.definition
}

`;
});
meaningDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
meaningHeader.innerText = "Meanings";
meaningDiv.innerHTML = meaningList;
let aud = `

Displays definitions, part of speech and phonetics for the word book

Add another project to your list

Now that you’ve learned how to create a dictionary app using JavaScript, it’s time for you to create some exciting projects on your own. Construction projects will not only improve your basics but also add projects to your resume.

Looking for more practice on the concepts of JavaScript and DOM manipulation? Here is another project you can build to boost your skills.


build a featured to-do list
How to create a basic to-do list app using JavaScript

One of the best project ideas for people new to JavaScript is to create a simple to-do list app. Here is our own tutorial for JS beginners.

Read more


About the Author


Source link

Share.

About Author

Leave A Reply