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

1. Create a folder

2. Add:

   • index.html
   • script.js

3. Get a free API key from: https://openweathermap.org/api

4. Replace:

   YOUR_API_KEY
   

   with your actual API key.

5. Open index.html in browser.

⚙️ How It Works

1. User enters city name
2. fetch() sends API request
3. Weather data returned as JSON
4. JavaScript updates UI dynamically