Back to all courses

Create a Dictionary app using an API from Rapid API Hub

12,014 views

460 likes

38 comments

This course will teach you how to develop a fully functional dictionary application with HTML, CSS, and JavaScript using API from Rapid API Hub.

About the instructor

Harry

Code With Harry is my attempt to teach basics and those coding techniques to people in short time which took me ages to learn. At Code With Harry, I provide a quick and to the point demo along with resources of anything and everything I teach. Source code and other resources are hosted on my website CodeWithHarry.com. I provide source code(if any) in the description of every video.

View profile

Join the discussion on YouTube

Related guide

This guide will teach you how to develop a fully functional dictionary application with HTML, CSS, and JavaScript using API from RapidAPI.

This guide will teach you how to develop a fully functional dictionary application with HTML, CSS, and JavaScript using API from RapidAPI. So get ready to dive in and start building!

Step 1: Find a dictionary API on RapidAPI

Let's begin by finding the API for our dictionary app. The best place to look is the Rapid API Hub, which houses thousands of useful APIs in one place.

Rapid API Hub

Loading component...

Our first step will be registering on the RapidAPI and searching for 'Word Dictionary' in the search bar. You can select the API most suited to your project from the list of options available. For this project, I will use the Dictionary by API-Ninjas.

Dictionary API

It is a free API and helps you look for any word in the English dictionary.

Step 2: Install RapidAPI Client Extension:

Now launch your VSCode and install the RapidAPI Client Extension. This is a very convenient and time-saving extension as you can test the APIs quickly without leaving the VSCode.

Loading component...

Installing RapidAPI Client Extension

Step 3: Install Live Server Extension:

Live Server is another handy extension for an efficient workflow. It lets you see the live output preview of your HTML in real time without reloading the page.

Installing Live Server Extension

Step 4: Begin Construction

With the extensions installed, let’s start coding our app. I will start by creating a new folder for our app in the VSCode, and inside it, make a new Index.html file. As I don't want to focus much on the front end and CSS, I will simply use a prebuilt frontend toolkit from Bootstrap.

Bootstrap

I will grab the quick start template from Bootstrap and paste it into our index.html file.

Quick Start Template from Bootstrap

Next, I will grab a prebuilt CSS navigation bar again from Bootstrap and paste it into our file, replacing the <h1> tag.

Navbar Template from Bootstrap

So, our index file will look like this:

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Demo</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg bg-body-tertiary">
			<div class="container-fluid">
				<a class="navbar-brand" href="#">Navbar</a>
				<button
					class="navbar-toggler"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent"
					aria-expanded="false"
					aria-label="Toggle navigation"
				>
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" aria-current="page" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item dropdown">
							<a
								class="nav-link dropdown-toggle"
								href="#"
								role="button"
								data-bs-toggle="dropdown"
								aria-expanded="false"
							>
								Dropdown
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="#">Action</a></li>
								<li><a class="dropdown-item" href="#">Another action</a></li>
								<li><hr class="dropdown-divider" /></li>
								<li><a class="dropdown-item" href="#">Something else here</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled">Disabled</a>
						</li>
					</ul>
					<form class="d-flex" role="search">
						<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
						<button class="btn btn-outline-success" type="submit">Search</button>
					</form>
				</div>
			</div>
		</nav>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
			crossorigin="anonymous"
		></script>
	</body>
</html>

Step 5: Create the app layout

I plan to keep a minimal design layout for my app. So, I'll again use a sample layout from the Bootstrap examples, grab its HTML and put it inside a new div in our file as follows.

Copying the HTML of the design

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Demo</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg bg-body-tertiary">
			<div class="container-fluid">
				<a class="navbar-brand" href="#">Navbar</a>
				<button
					class="navbar-toggler"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent"
					aria-expanded="false"
					aria-label="Toggle navigation"
				>
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" aria-current="page" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item dropdown">
							<a
								class="nav-link dropdown-toggle"
								href="#"
								role="button"
								data-bs-toggle="dropdown"
								aria-expanded="false"
							>
								Dropdown
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="#">Action</a></li>
								<li><a class="dropdown-item" href="#">Another action</a></li>
								<li><hr class="dropdown-divider" /></li>
								<li><a class="dropdown-item" href="#">Something else here</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled">Disabled</a>
						</li>
					</ul>
					<form class="d-flex" role="search">
						<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
						<button class="btn btn-outline-success" type="submit">Search</button>
					</form>
				</div>
			</div>
		</nav>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
			crossorigin="anonymous"
		></script>
		<div>
			<div class="px-4 py-5 my-5 text-center">
				<img
					class="d-block mx-auto mb-4"
					src="/docs/5.3/assets/brand/bootstrap-logo.svg"
					alt=""
					width="72"
					height="57"
				/>
				<h1 class="display-5 fw-bold">Centered hero</h1>
				<div class="col-lg-6 mx-auto">
					<p class="lead mb-4">
						Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most
						popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid
						system, extensive prebuilt components, and powerful JavaScript plugins.
					</p>
					<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
						<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
						<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

To see how the app looks, I will right-click in the VSCode and open it on the live server.

Dictionary App Interface

For the icon, I will search for a book icon in Bootstrap. You can find the icon of your choice, open it in a new tab, and copy its URL. Use the URL to replace the previous src of the icon in our code. At this point, I will change the title of my app and the text of the headings and buttons. Let us name them 'Talk to author' and 'Contribute'. Also, I will clean the navigation bar by removing the unneeded elements to make our app look beautiful.

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Dictionary App</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg bg-body-tertiary">
			<div class="container-fluid">
				<a class="navbar-brand" href="#">Navbar</a>
				<button
					class="navbar-toggler"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent"
					aria-expanded="false"
					aria-label="Toggle navigation"
				>
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" aria-current="page" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="/">About this app</a>
						</li>
					</ul>
					<form class="d-flex" role="search">
						<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
						<button class="btn btn-outline-success" type="submit">Search</button>
					</form>
				</div>
			</div>
		</nav>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
			crossorigin="anonymous"
		></script>
		<div>
			<div class="px-4 py-5 my-5 text-center">
				<img
					class="d-block mx-auto mb-4"
					src="/docs/5.3/assets/brand/bootstrap-logo.svg"
					alt=""
					width="72"
					height="57"
				/>
				<h1 class="display-5 fw-bold">Centered hero</h1>
				<div class="col-lg-6 mx-auto">
					<p class="lead mb-4">
						Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most
						popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid
						system, extensive prebuilt components, and powerful JavaScript plugins.
					</p>
					<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
						<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Talk to Author</button>
						<button type="button" class="btn btn-outline-secondary btn-lg px-4">Contribute</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

App interface after changing the headings and buttons

This is looking great!

Step 6: Call the API

Now, we need to open the RapidAPI extension in the VSCode and make a new GET request.

New GET request on RapidAPI Client

For request URL, we will go to our API on RapidAPI and use the URL included in the snippet on the right.

URL and Headers of our API

As you can see, this API will require two headers, i.e., API key and host. So I will put both headers in the RapidAPI Client extension. At this point, you can also test your API by sending the request. It should return data like this.

Testing the API

Next, I will copy the code snippet in JavaScript (fetch) form and use it in a new file script.js in the VSCode so that the API can be called to define the searched word.

Copying the JavaScript (Fetch) code snippet

I will write this function in the script.js file as follows.

js
const dictionary = word => {
	const options = {
		method: 'GET',
		headers: {
			'X-RapidAPI-Key': 'YOUR_API_KEY_HERE',
			'X-RapidAPI-Host': 'dictionary-by-api-ninjas.p.rapidapi.com',
		},
	};
	fetch('https://dictionary-by-api-ninjas.p.rapidapi.com/v1/dictionary?word=' + word, options)
		.then(response => response.json())
		.then(response => {
			console.log(response);
			wordheading.innerHTML = response.word;
			definition.innerHTML = response.definition;
			I.catch(err => console.error(err));
		});
};

Our index.html will look like this:

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Dictionary App</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg bg-body-tertiary">
			<div class="container-fluid">
				<a class="navbar-brand" href="#">Navbar</a>
				<button
					class="navbar-toggler"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent"
					aria-expanded="false"
					aria-label="Toggle navigation"
				>
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<a class="nav-link active" aria-current="page" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="/">About this app</a>
						</li>
					</ul>
					<form class="d-flex" role="search">
						<input
							id="searchinput"
							class="form-control me-2"
							type="search"
							placeholder="Search"
							aria-label="Search"
						/>
						<button class="btn btn-outline-success" type="submit" id="searchbtn">Search</button>
					</form>
				</div>
			</div>
		</nav>
		<script
			src="https://raw.githubusercontent.com/danklammer/bytesize-icons/210d2f81c340c838053eed4c5a0385fbf2a033e9/dist/icons/book.svg"
			integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
			crossorigin="anonymous"
		></script>
		<script src="script.js"></script>
		<div>
			<div class="px-4 py-5 my-5 text-center">
				<img
					class="d-block mx-auto mb-4"
					src="https://raw.githubusercontent.com/danklammer/bytesize-icons/210d2f81c340c838053eed4c5a0385fbf2a033e9/dist/icons/book.svg"
					alt=""
					width="72"
					height="57"
				/>
				<h1 class="display-5 fw-bold"><span id="wordheading">Your word will appear here</span></h1>
				<div class="col-lg-6 mx-auto">
					<p class="lead_mb-4">
						<span id="definition"
							>Welcome to the Ditionary app. Type your favourite word in the search bar in the top right
							and you will see the meaning of that word right here!</span
						>
					</p>
					<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
						<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Talk to Author</button>
						<button type="button" class="btn btn-outline-secondary btn-lg px-4">Contribute</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

When a button inside a form is clicked, the form is submitted, and the page reloads. I don't want this to happen, so I'll add an 'Event listener' and use the e.preventDefault function. Also, upon clicking the button, I want it to grab the value of the search input and call the dictionary function. That’s how it will be coded:

js
searchbtn.addEventListener('click', e => {
	e.preventDefault();
	dictionary(searchinput.value);
});

Now let's see how our app works and search for a random word.

Searching the word “water” in our app

Great! Our app is working fine and showing the meanings of the correct search word. But the output is clumsy and hard to read. To make the output format look better, I will add <br> tags to create line breaks.

js
// script.js
fetch('https://dictionary-by-api-ninjas.p.rapidapi.com/v1/dictionary?word=' + word, options)
	.then(response => response.json())
	.then(response => {
		console.log(response);
		wordheading.innerHTML = response.word;
		definition.innerHTML = response.definition
			.replace('2.', '<br>2.')
			.replace('3.', '<br>3.')
			.replace('4.', '<br>4.');
	});