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.html
- script.js
Get a free API key from: https://openweathermap.org/api
Replace:
```
YOUR_API_KEY
```
with your actual API key.
Open index.html in browser.

⚙️ How It Works

User enters city name
fetch() sends API request
Weather data returned as JSON
JavaScript updates UI dynamically

Weather App