Free video courses by Rapid and Rapid Developer Experts offer short to help you become a pro API Developer.

Rapid API Courses

JavaScript Mastery

Mashhood A.

Intro

No-code way

 Code Way

Deploy & Publish APIs

I Abandoned Postman for This NEW VS Code Extension | Build, Test & Sell APIs

Harry

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](https://RapidAPI.com/hub), which houses thousands of useful APIs in one place.

![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/hub.png)

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next project that you can build using an API. Happy building!
</Callout>

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](https://rapidapi.com/apininjas/api/dictionary-by-api-ninjas).

![Dictionary API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/api.png)

 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.

<Callout
    title="Download RapidAPI Client for VS Code"
    linkText="Install RapidAPI Client"
    linkHref="https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client"
>
To easily follow the rest of the guide, please go ahead and install the RapidAPI Client for VS Code extension.
</Callout>

![Installing RapidAPI Client Extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/rapid-client.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/live-server.png)
 
## 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](https://getbootstrap.com/). 

![Bootstrap](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/bootstrap.png)

I will grab the quick start template from Bootstrap and paste it into our `index.html` file. 

![Quick Start Template from Bootstrap](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/bootstrap-quickstart.png)

Next, I will grab a prebuilt CSS navigation bar again from [Bootstrap](https://getbootstrap.com/docs/5.3/components/navbar/) and paste it into our file, replacing the `<h1>` tag.

![Navbar Template from Bootstrap](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/bootstrap-navbar.png)

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](https://getbootstrap.com/docs/5.3/examples/heroes/), grab its HTML and put it inside a new div in our file as follows.

![Copying the HTML of the design](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/layout.png)

```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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/ui.png)

For the icon, I will search for a book [icon in Bootstrap](https://getbootstrap.com/docs/5.3/extend/icons/). 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/ui-2.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/request-client.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/api-url-headers.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/testing.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/snippet.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/search-word.png)

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.');
	});
```
That’s it! Our dictionary app is ready.

![Final look of our dictionary app](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/final-ui.png)

## Wrap Up

Hopefully, you enjoyed building this cool dictionary app with me. Happy building! 

Omar I.

Ahmad Bilal

Create a Dictionary app using an API from Rapid API Hub

James Q Quick

Introduction

Sponsor intros (Rapid and Xata)

Adding try/catch for handling errors

Defining a TypeScript return type

Using TypeScript unions to improve our type

Using TypeScript generics

Defining types for the Express.js incoming request

Handling not found error from Xata

Testing endpoints with the RapidAPI Client extension

Syncing endpoints with the RapidAPI Studio

Wrap up

Build a TypeScript API with Express, RapidAPI, and Xata (Part 2)

Tiffany

For this, I'll divide it into categories that I've lately researched to discover inspiration for building projects that I'm passionate about.

## Hobbies

It should come as no surprise that the first is gaining inspiration from your hobbies. Get a hobby if you don't already have one. You cannot have your entire life revolve around technology or your profession.

**Hobbies** are quite important, and they don't have to be this bizarre activity. It could be a hobby in which you have a strong interest, such as collecting cards. Basically, everything that you are interested in. You can turn any area of interest into a project; it doesn't have to be a specific hobby. 

It is true that we can become stuck generating fresh ideas on occasion. [RapidAPI](https://rapidapi.com/hub) is one item that helped me break free of this rut. There are so many amazing APIs listed there that I can't help but be fascinated by them.

![RapidAPI Hub – World’s largest API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/RapidAPI-Hub.png)

I've recently begun to structure projects around these APIs. For instance, I created an API using an [Concert-Artists-Event-Tracker API](https://rapidapi.com/s.mahmoud97/api/concerts-artists-events-tracker/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) from RapidAPI Hub.

So I began going backward in terms of identifying things I'm interested in with my hobbies and interests, locating APIs that connect to it, reading about the APIs via the documentation, observing what others have built, and gaining a great deal of inspiration to create small projects.

## Playing makes belief

**Playing makes belief** is the subsequent source of creative inspiration or ideas for my current endeavors. This is something I did early on when building my initial developer portfolio. Playing makes belief means creating projects for individuals who didn't ask for them and probably didn't need them.

Once, I constructed a project for my father's construction company. I created a website with a logo and added houses and information to it. But the idea is that even if someone in your family or circle of friends doesn't require a website, app, or whatever it is that you specialize in, you can still make something for them, and you don't even have to consult with them or discuss it.

For instance, you can create a website for your mother that features all of her baked goods and contact information, and begin to view her as a client. It will accomplish two goals, particularly if you are just beginning your development career. It clearly demonstrates your initiative. It appears that you are accepting clients. No one knows it's your mother or who the person is for whom you created the website, therefore this is also a superb method.

## Games

**Games** are the third thing that has been a major source of inspiration for me. I've been toying with Python a lot, and it's a great language for creating quick and enjoyable projects.

I've been enjoying discovering new games, especially retro games, to build with it. So here is yet another idea. You can make an X's and O's game, a chess game, or a hangman game, and you just make a game regardless of whether you played it or not. That's not the point, but pick a favorite game of yours and build it. 

## Steal like an artist

Another intriguing technique to create projects is to **steal like an artist**, which means it's perfectly acceptable to borrow inspiration from people who have developed outstanding projects. Obviously, you shouldn't copy them exactly, but why not draw inspiration from them if you witness someone creating something truly remarkable?

This definitely makes you question why you shouldn't design your own project differently. This is not a copy of someone else's work. This does not imply that your project is identical to theirs; rather, it seeks inspiration from others.

This occurs frequently in music, fashion, culinary, and every other business. Therefore, it is also prevalent in the IT industry, and if you have a person you greatly admire, analyze their projects and see if you can draw inspiration from them.

## Solving Real-World Problems

**Real-world problem-solving** has been a large part of my recent activity. This is my current favorite pastime. Because it is so enjoyable, I rapidly develop a strong passion for it.

Previously, I created a React app that took an API for food and randomized the results. Therefore, each time I pressed a button, a different type of food output would be generated. This would advise me what kind of takeout I should buy for dinner. Given the difficulty of ordering meals, it is impossible to decide what to eat and buy food. So I was like, let the code do it for me.

It just goes to show how much fun it can be to develop solutions for actual problems. Whether it's something that places food orders for you, chooses your clothes for you, offers you a variety of recipes to cook with various drinks to make—the list is endless—it's a really great way to become deeply invested in a project because you know you'll use it in the future. It is a solution to an issue that exists in the real world.






 Confession time

Unique coding idea #1

Unique coding idea #2

Unique coding idea #3

Unique coding idea #4

How To Come Up With Coding Project Ideas

Ania Kubów

We will build a game that allows us to choose a level, fetch data based on that level, and map it onto cards and buttons. We will then build out the logic of getting a correct answer to show the word ‘correct’ under the button. It will give us a point and remove a point if we get the answer wrong. 

## Prerequisites

As it is a beginner project using APIs and React, you should have a basic understanding of HTML, CSS, and JavaScript.  You will also need to be familiar with React. However, even if you don't have a firm grip on React, follow this tutorial, as pushing yourself is how the best learning is done. With that said, let’s start right away.

## Step 1: Finding the API

To find the API for our game, I will go to [Rapid API Hub](https://RapidAPI.com/hub). It is a platform where you can find and connect to thousands of well-developed APIs.
 
![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/hub.png)

I love using [Rapid API](https://RapidAPI.com/hub) as I can scroll through all the options of their APIs in a categorized way. And not only that, but once I have a Rapid API key, I can use the same key for all the APIs you see. So there is no need to sign up to various different platforms and manage hundreds of passwords and API keys. 

### Word Quiz API

The [Word Quiz API](https://rapidapi.com/twinword/api/word-quiz/) on Rapid API Hub fits our game perfectly, so let’s use it.

![Word Quiz API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/word-api.png)

Go ahead and subscribe to the API. Upon testing the endpoints, you can see this API returns an object that shows us the level and an array under the `quiz list`. The `quizlist` array consists of the following elements:

- `quiz`: Three question words.
- `option`: Two options to choose from.
- `correct`: The correct answer.

![Testing the Endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/endpoints.png)

For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub) automatically generates snippets in multiple languages and options. We will copy and use the (Node.js) Axios one, as you can see below. 

```js
const axios = require('axios');
const options = {
	method: 'GET',
	url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
	params: { level: '3', area: 'sat' },
	headers: {
		'X-RapidAPI-Key': 'your-api-key',
		'X-RapidAPI-Host': 'twinword-word-association-quiz.p.rapidapi.com',
	},
};
axios
	.request(options)
	.then(function (response) {
		console.log(response.data);
	})
	.catch(function (error) {
		console.error(error);
	});
```

The `X-RapidAPI-key` field will have your secret API key.

## Step 2: Setting up the React App

Now launch the code editor of your choice to make a new React project. I'll use WebStorm, call my project “Word game” and click on create. 

![Creating a new React project](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/react-project.png)

WebStorm will spin up our React app containing different files. The  `App.js` file is the one where most of the code will be done. To keep things simple, I will delete the extra files not needed for our project and clean up a little of the code in `App.js` file as well.

![The App.js file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/app-js.png)

You can run this app by pressing the “run” button WebStorm and opening it on the browser. That’s how it will look in the console lookout of your browser.

![App running in the browser](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/app-run.png)

## Step 3: Fetch data into our app

We will install the Axios package for calling the API. We can do that by running the command `npm i axios` in our terminal, making sure we are in the correct directory.
 
This will also create a new dependency in the ‘package.json’ file showing Axios and its version. Next, we will import Axios in our `App.js` simply by writing:

```js
import axios from 'axios';
```

Now, I will create a `getRandomwords` function and paste the Axios (Node.js) snippet (that we copied above) in it.  So, once we select a level, this function will fetch the data of that selected level. Now, this is what our `App.js` file should look like.

```js
import axios from 'axios';

const App = () => {
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: '3', area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	return <div className="App"></div>;
};

export default App;
```

## Step 4: Select levels

We need to store the chosen levels in a state. Moreover, for us to be able to select levels in our game, we will need to create a `select` element and add level numbers as its options. 

```js
import axios from 'axios';
import { useState } from 'react';

const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: '3', area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	console.log(chosenLevel);

	return (
		<div className="App">
			<select name="levels" id="levels" value={chosenLevel} onChange={e => setChosenLevel(e.target.value)}>
				<option value="1">Level 1</option>

				<option value="2">Level 2</option>

				<option value="3">Level 3</option>
			</select>
		</div>
	);
};

export default App;
```
I have added a `console.log` to verify our `chosenLevel` state. Select a level, and it should log the level in your console like this.

![Select menu and chosen level](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/select.png)

Let's move on. Now that we can select different levels, we would want to pass them into the `getRandomWords` function. So, we will replace the hard coded value with `chosenLevel` inside the params of our request.

For layout, we will add some headings and new divs for level selector and question area.

```js
import axios from 'axios';
import { useState } from 'react';

const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: chosenLevel, area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	console.log(chosenLevel);

	return (
		<div className="App">
			<div className="level-selector">
				<h1>Word Association App</h1>

				<p>Select Your level to start</p>

				<select name="levels" id="levels" value={chosenLevel} onChange={e => setChosenLevel(e.target.value)}>
					<option value="1">Level 1</option>

					<option value="2">Level 2</option>

					<option value="3">Level 3</option>
				</select>
			</div>

			<div className="question-area">
				<h1>Welcome to level: {chosenLevel}</h1>
			</div>
		</div>
	);
};

export default App;
```

## Add background colors

To make it look more pleasing to the eyes, let's add some colors to our headings in our `index.css` file.

```css
.level-selector {
	background-color: red;
}
.question-area {
	background-color: blue;
}
```
Here is how it's going to look.

![Adding basic colors](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/basic-ui.png)

Now, on selecting a level, I want the red div to disappear so that we only see the blue one. At the moment, that's not happening. For that, I will use the `chosenLevel` variable like this:

```js
<div className="App">
{ !chosenLevel && <div className="level-selector">
```

So, we have decided that our chosen level will be the reason that one div shows as opposed to another. We also want this chosen level to decide when we get our data. We can do it by using the ‘useEffect’ hook. 

The ‘useEffect’ hook is essentially something that happens after the app renders, like a side effect. Also, we can make it re-render as many times as we wish based on certain variables. 

Let’s create a hook that will run when the `chosenLevel` changes. Inside the hook, we will check if the variable `chosenLevel` exists. If it does, we will call the `getRandomWords` function. In code, it translates to:

```js
	useEffect(() => {
		if (chosenLevel) getRandomWords();
	}, [chosenLevel]);
```

## Step 5: Map out the questions

Now, let’s map our questions on little cards. For this, I will make a new div of ‘question-box’ and style it in the css file. You may make a card component for this and add styling and extra functionality to your cards. For this guide, I am going to keep it simple.

```css
question-box {
	background-color: antiquewhite;
	padding: 10px;
	border-radius: 20px;
	margin: 10px;
}
```

![Creating the question card](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/question-card.png)

Great! Now that we have one little card. We want ten cards because that is the number of questions we have. We will map out the questions, options, and the correct answer on those cards.

```js
import axios from 'axios';
import { useState, useEffect } from 'react';
const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const [words, setWords] = useState(null);

	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: chosenLevel, area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				// Storing API response (words) in the state
				setWords(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};

	useEffect(() => {
		if (chosenLevel) getRandomWords();
	}, [chosenLevel]);

	return (
		<div className="App">
			{!chosenLevel && (
				<div className="level-selector">
					<h1>Word Association App</h1>

					<p>Select Your level to start</p>

					<select
						name="levels"
						id="levels"
						value={chosenLevel}
						onChange={e => setChosenLevel(e.target.value)}
					>
						<option value="1">Level 1</option>

						<option value="2">Level 2</option>

						<option value="3">Level 3</option>
					</select>
				</div>
			)}
			{chosenLevel && words && (
				<div className="question-area">
					<h1>Welcome to level: {chosenLevel}</h1>
					{words.quizist.map(question => (
						<div className="question-box">
							<p>{question.correct}</p>
						</div>
					))}
				</div>
			)}
		</div>
	);
};
export default App;
```
Our app will now look like this:

![Adding multiple cards](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/multiple-cards.png)

Alright. As you can see, it is only showing the correct answers. We will need to map another array inside the `question-box` div, to show the quiz words and the options of the quiz. 

```js
<div className="question-box">
	{question.quiz.map(tip => (
		<p>{tip}</p>
	))}
	<div className="question-buttons">
		{question.option.map(option => (
			<div className="question-button">
				<button>{option}</button>
			</div>
		))}
	</div>

	<p>{question.correct}</p>
</div>;
```

 Let's have a look. 

![Displaying quiz words and options in cards](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/cards-multiple-options.png)

Now let’s make the question buttons appear next to each other.

```css
.question-buttons {
	display: flex;
	flex-direction: row;
}
```

I would also want the word “Correct!” to appear under the button if we get the correct answer. The `question-button` will do it for us. I will use flex again, but this time I'm going to give it the flex direction of `column`. 

```css
.question-button {
	display: flex;
	flex-direction: column;
}
```

## Step 6: Check for the correct answers

To check for the answer, I will write a function to check if our answer is correct based on the button we click. First, create the button:

```js
<div className="question-button">
	<button onClick={() => checkAnswer(option, optionIndex + 1, question.correct)}>{option}</button>
</div>;
```
I will also need to give each of the options an index. We’ll have to add `1` to the index because our correct answers start with index of `1`. Now, if the option index equals the correct answer index, it will be considered the correct answer. 

Here is the `checkAnswer` function:

```js
const checkAnswer = (option, optionIndex, correctAnswer) => {
	console.log(optionIndex, correctAnswer);
	if (optionIndex == correctAnswer) {
		setCorrectAnswers([...correctAnswers, option]);
	}
};
```

When I click on the correct answer, it will add it to the `correctAnswers` array. `correctAnswers` is a state I have initialised like this:
 
```js
const [correctAnswers, setCorrectAnswers] = useState([]);
```

##  Step 7: Display the correct answer

The next thing that I want to do is simply display “Correct” if the answer is right. This will be easy because we're already collecting the correct answers in our array. We will simply add this function under the ‘question-button’.

```js
<div className="question-button">
	<button onClick={() => checkAnswer(option, optionIndex + 1, question.correct)}>{option}</button>
	{correctAnswers.includes(option) && <p>Correct!</p>}
</div>;
```

![Displaying "Correct" if the answer is right](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/cards-options.png)

## Step 8: Calculate the total score

One last thing we need to do is add the score so that by the end, we know our final score. I will do this in the `checkAnswer` function. Every correct answer will increase the existing score.

```js
const [score, setScore] = useState(0);
const checkAnswer = (option, optionIndex, correctAnswer) => {
	if (optionIndex == correctAnswer) {
		setCorrectAnswers([...correctAnswers, option]);

		setScore(score => score + 1);
	} else {
		setScore(score => score - 1);
	}
};
```

## Step 8: Hide the correct answer

The correct answer should be a secret, so we can hide it by removing the selected code:

![Removing code to hide answer](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/removing-code.png)

## Step 9: Add more levels to our game

We can also increase the number of levels of our game from three to ten simply by copying and pasting.

![Adding ten levels](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/adding-levels.png)

## Step 10: Final Styling

To make our app eye-catching, I will add the following css styles to the question area and buttons. I will keep it simple, but you can, of course, go wild and style it up as much as you want.

```css
.app {
	font-family: 'Trebuchet MS', 'Lucinda Sans Unicode', 'Lucinda Grande';
	display: flex;
	justify-content: center;
	text-align: center;
	padding-top: 50px;
}

.question-area {
	max-width: 1000px;
}
.question-box {
	background-color: antiquewhite;
	padding: 10px;
	border-radius: 20px;
	margin: 10px;
}

.question-buttons {
	display: flex;
	flex-direction: row;
}

.question-button {
	display: flex;
	flex-direction: column;
}

button {
	margin: 5px;
	padding: 8px;
	border-radius: 5px;
	border: none;
	background-color: darkcyan;
	color: white;
}

button:disabled {
	background-color: darkgrey;
	color: darkolivegreen;
}

select {
	margin: 5px;
	padding: 8px;
	border-radius: 5px;
	border: none;
	background-color: darkcyan;
	color: white;
}
```
That’s it! Our game is ready.

![Final look of our game](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/final-ui-1.png)

## Wrap Up

I hope you enjoyed building this game with me. You can create your own similar games using more APIs from RapidAPI.

<Callout
    title="Find Awesome APIs for your projects"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore more than 40,000 APIs on Rapid API Hub and find the right API for your next project.
</Callout>


Exploring the API

Setting up our React App

Getting data into our App

Selecting levels

Mapping out questions onto cards

Checking for correct Answers and adding to arrays using useState

Disabling multiple buttons with React hooks

Displaying the score

Styling

Env files in React

Where to go next - build a NodeJS backend

API Project! Word Association Game

Midudev

RapidAPI Hub

Test API

Conclusion

How to CONSUME a REST API with JAVASCRIPT and Fetch + Promises with Error handling