Weather App – Mini-Projects
Welcome to this tutorial exploring the basics of building a weather app using JavaScript! This project will guide you through creating a simple app that displays current weather conditions for a given location. It’s a fantastic starting point for learning fundamental JavaScript concepts like DOM manipulation, event handling, and basic data fetching. We’ll focus on a practical, step-by-step approach, incorporating mini-projects to solidify your understanding.
Introduction
Building a weather app can seem daunting at first, but breaking it down into smaller, manageable steps makes it achievable. This tutorial will cover the core elements needed to create a functional weather app, including fetching data from an API, displaying it in a user-friendly format, and handling basic user interaction. We’ll use a simplified approach, focusing on the essential JavaScript concepts.
Weather apps are useful because they:
- Show real-time weather information
- Help users plan activities
- Improve API and JavaScript skills
In this project, we will:
- Enter a city name
- Fetch weather data from an API
- Display temperature and weather condition
🧠 Concepts You Will Learn
- DOM manipulation
- Event handling
- Fetch API
- Async/Await
- JSON data handling
📌 Features
- Search weather by city
- Display temperature
- Display weather condition
- Error handling
🏗️ Project Setup
You only need:
- A browser
- A code editor
No installation required 🚀
💻 Code Implementation
📁 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #74b9ff;
margin-top: 50px;
color: white;
}
.weather-container {
background: rgba(255,255,255,0.2);
padding: 20px;
width: 300px;
margin: auto;
border-radius: 10px;
}
input {
padding: 10px;
width: 80%;
border: none;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background: #0984e3;
color: white;
cursor: pointer;
}
button:hover {
background: #0767b1;
}
.weather-info {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="weather-container">
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city name">
<br>
<button onclick="getWeather()">Get Weather</button>
<div class="weather-info">
<h2 id="cityName"></h2>
<p id="temperature"></p>
<p id="condition"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📁 script.js
const apiKey = "YOUR_API_KEY";
// Get weather
async function getWeather() {
const city = document.getElementById("cityInput").value;
if (city === "") {
alert("Please enter a city name");
return;
}
const url =
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
if (data.cod === "404" || data.cod === 404) {
alert("City not found");
return;
}
// Update UI
document.getElementById("cityName").textContent =
data.name;
document.getElementById("temperature").textContent =
"Temperature: " + data.main.temp + "°C";
document.getElementById("condition").textContent =
"Condition: " + data.weather[0].main;
} catch (error) {
alert("Error fetching weather data: " + error.message);
console.error("Error:", error);
}
}
Weather App Tutorial
▶️ How to Run
-
Create a folder
-
Add:
index.htmlscript.js
-
Get a free API key from: https://openweathermap.org/api
-
Replace:
YOUR_API_KEYwith your actual API key.
-
Open
index.htmlin browser.
⚙️ How It Works
- User enters city name
fetch()sends API request- Weather data returned as JSON
- JavaScript updates UI dynamically