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.
Take a 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 dictionary 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 of 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 pulled 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
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.
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 him.
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 is not able to recover 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 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.
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.
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 = `
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.
Read more
About the Author
Comments are closed.