Best matchRelated: API requestsIntermediate
Weather App
Request current weather data and display the response clearly.
Build a weather app →English Dictionary
Build an english dictionary with HTML, CSS, and JavaScript while practicing API requests and async and await.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
API RequestsAsync and AwaitKeyboard Events
01 — What you’ll build
English Dictionary
In this project, we’re going to build an english dictionary using HTML, CSS, and JavaScript. You’ll see how to request word data and turn the response into a useful definition. Along the way, you’ll practice API requests, async and await, and keyboard events, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Live API-powered results
- English Dictionary interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Fetch data from an API
- Work with asynchronous JavaScript
- Handle keyboard events
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript variables and number operations.
Complete project files
Build It from the Source Code
This project connects the interface to live API results.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for live data.
- Click the page once if the browser blocks audio playback.
Project structure
english-dictionary/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>English Dictionary</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="heading">English Dictionary</h1>
<input placeholder="Search a word" type="text" class="input" id="input" />
<p class="info-text" id="info-text">Type a word and press enter</p>
<div class="meaning-container" id="meaning-container">
<p>Word Title: <span class="title" id="title">___</span></p>
<p>Meaning: <span class="meaning" id="meaning">___</span></p>
<audio src="" controls id="audio"></audio>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice API requests, async/await, and javaScript calculations with these related projects.
Best match
Related: async/awaitIntermediate
Amine Pics Generator
Handle asynchronous results and update the interface when they arrive.
Build an amine pics generator →
Related: JavaScript calculations
Dad Jokes Generator
Turn JavaScript calculations into clear visual results.
Build a dad jokes generator →Related: API requestsBest match
Weather App
Request current weather data and display the response clearly.
Build a weather appRelated: async/await
Amine Pics Generator
Handle asynchronous results and update the interface when they arrive.
Build an amine pics generatorRelated: JavaScript calculations
Dad Jokes Generator
Turn JavaScript calculations into clear visual results.
Build a dad jokes generator