🧩 Lab Activity: React JS Weather API Integration
Title:
Weather Data Integration Using React and OpenWeatherMap API
Objectives:
After completing this lab, students will be able to:
1. Use the fetch() function to make RESTful API requests in React.
2. Parse and render JSON data from the OpenWeatherMap API.
3. Display real-time weather data in a user interface.
4. Apply component-based design and React hooks (useState, useEffect).
Tools and Requirements:
Framework: React JS
API: OpenWeatherMap API
IDE: Visual Studio Code
Environment: [Link], npm
Browser: Chrome or Edge
Account: Free OpenWeatherMap API Key
⚙️Setup Instructions
Step 1: Create a New React Project
npx create-react-app weather-api-app
cd weather-api-app
npm start
Step 2: Clean Up Default Files
Delete unnecessary files in /src:
Remove: [Link], [Link], [Link], [Link]
Keep only: [Link], [Link], and [Link]
Step 3: Get Your API Key
1. Go to [Link]
2. Sign up and get your API Key (APPID)
3. Keep it ready — you’ll add it in the code
💻 Step 4: Code Implementation
📄 [Link]
import React, { useState } from "react";
import "./[Link]";
function App() {
const [city, setCity] = useState("");
const [weather, setWeather] = useState(null);
const [error, setError] = useState("");
const apiKey = "YOUR_API_KEY_HERE";
const getWeather = async () => {
if (!city) return;
const url = `[Link]
{city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
const data = await [Link]();
if ([Link] === 200) {
setWeather(data);
setError("");
} else {
setError("City not found. Try again.");
setWeather(null);
} catch (err) {
setError("Failed to fetch weather data.");
setWeather(null);
};
return (
<div className="app">
<h1> React Weather App</h1>
<div className="search-box">
<input
type="text"
placeholder="Enter city name..."
value={city}
onChange={(e) => setCity([Link])}
/>
<button onClick={getWeather}>Get Weather</button>
</div>
{error && <p className="error">{error}</p>}
{weather && (
<div className="weather-card">
<h2>
{[Link]}, {[Link]}
</h2>
<p>Temperature: {[Link]}°C</p>
<p>Condition: {[Link][0].description}</p>
<p>Humidity: {[Link]}%</p>
<p>Wind Speed: {[Link]} m/s</p>
</div>
)}
</div>
);
}
export default App;
📄 [Link]
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #89f7fe, #66a6ff);
.app {
text-align: center;
margin-top: 60px;
color: #333;
h1 {
color: #004aad;
.search-box {
margin: 20px auto;
input {
padding: 10px;
width: 220px;
border-radius: 5px;
border: 1px solid #ccc;
button {
padding: 10px 15px;
margin-left: 8px;
background-color: #004aad;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0066ff;
.weather-card {
background-color: white;
display: inline-block;
margin-top: 30px;
padding: 25px;
border-radius: 15px;
box-shadow: 0px 0px 10px #aaa;
}
.error {
color: red;
font-weight: bold;
Step 5: Run the App
npm start
✅ The app will open at [Link]
Try entering “Pateros”, “Taguig”, “Manila”, or “Cebu”.
🧪 Expected Output
When you type a city and click “Get Weather”, you’ll see:
Taguig, PH
Temperature: 31°C
Condition: scattered clouds
💧 Humidity: 72%
💨 Wind Speed: 2.1 m/s
🧩 Evaluation Rubric (20 pts)
Point
Criteria Description
s
Fetches and displays correct
Functionality 5
weather info
Properly connects and handles
API Usage 5
responses
Design &
Clean layout and user-friendly 5
Readability
Uses React hooks and good
Code Quality 5
structure
🧠 Extension Activities
🌈 Add icons based on weather condition (e.g., ☀️ ❄️).
🌍 Add a dropdown for country selection.
📍 Use Geolocation API to auto-detect user’s location.
Add current date and time for each search.