Best matchRelated: API requestsIntermediate
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionary →Weather App
Build a weather app with HTML, CSS, and JavaScript while practicing API requests and async and await.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
API RequestsAsync and AwaitDOM Selection
01 — What you’ll build
Weather App
This project shows you how HTML, CSS, and JavaScript work together in a weather app. You’ll request weather data, handle the response, and display the result clearly, then practice API requests, async and await, and DOM selection as you build the complete project from scratch.
02 — Included
- Live API-powered results
- Weather App 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
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
- Process data with array methods
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript arrays and array methods.
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.
Project structure
weather-app/
<!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>Weather App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<form>
<input type="text" id="city-input" placeholder="Enter City" />
<input type="submit" value="Get Weather" />
</form>
<div id="weather-data">
<div class="icon">
<!-- <img src="http://openweathermap.org/img/wn/01d.png" alt="Weather Icon"> -->
</div>
<div class="temperature"></div>
<div class="description"></div>
<div class="details">
<!-- <div>Feels like: 23°C</div>
<div>Humidity: 40%</div>
<div>Wind speed: 5 m/s</div> -->
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice API requests, async/await, and array methods with these related projects.
Best match
Related: async/awaitIntermediate
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo gallery →
Related: array methodsIntermediate
Recipe Book App
Transform recipe data into useful, dynamic recipe cards.
Build a recipe book app →Related: API requestsBest match
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionaryRelated: async/await
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo galleryRelated: array methods
Recipe Book App
Transform recipe data into useful, dynamic recipe cards.
Build a recipe book app