Build a Real-Time Weather App using JavaScript 🌦️

🌦️ Build a Real-Time Weather App using JavaScript

Hello everyone 👋
Welcome back!

In this project, we will build a Real-Time Weather App using HTML, CSS & JavaScript 🌦️

This project is perfect for beginners who want to learn:

- API Integration
- Fetch API
- Async/Await
- DOM Manipulation
- Real-world JavaScript Projects

---

🌟 Features of Weather App

✔ Search weather by city
✔ Real-time weather data
✔ Temperature in °C
✔ Weather conditions
✔ Responsive design
✔ Beginner-friendly project

---

🧱 Step 1: HTML Code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1>Weather App</h1>

    <div class="search-box">
        <input type="text" id="city" placeholder="Enter city name">
        <button onclick="getWeather()">Search</button>
    </div>

    <div id="result"></div>
</div>

<script src="script.js"></script>
</body>
</html>

---

🎨 Step 2: CSS Code

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial;
}

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#4facfe,#00f2fe);
}

.container{
    background:white;
    padding:30px;
    width:400px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

h1{
    margin-bottom:20px;
}

.search-box{
    display:flex;
    gap:10px;
}

input{
    flex:1;
    padding:10px;
    border:2px solid #ddd;
    border-radius:8px;
}

button{
    padding:10px 15px;
    background:#007bff;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

#result{
    margin-top:20px;
}

---

⚡ Step 3: JavaScript Code

JavaScript

async function getWeather(){

    const city = document.getElementById("city").value;

    const apiKey = "YOUR_API_KEY";

    const url =
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;

    try{

        const response = await fetch(url);
        const data = await response.json();

        if(data.cod === "404"){
            document.getElementById("result").innerHTML =
            "<p style='color:red;'>City not found!</p>";
            return;
        }

        document.getElementById("result").innerHTML = `
            <h2>${data.name}</h2>
            <h3>${Math.round(data.main.temp)}°C</h3>
            <p>${data.weather[0].description}</p>
            <p>Humidity: ${data.main.humidity}%</p>
            <p>Wind Speed: ${data.wind.speed} km/h</p>
        `;

    }catch(error){

        document.getElementById("result").innerHTML =
        "<p>Something went wrong!</p>";
    }
}

---

🔑 Get Free API Key

👉 Create a free account on
"openweathermap.org" (https://reference-url-citation.invalid/0)

Then generate your free API key.

Replace:

JavaScript

YOUR_API_KEY

with your actual API key.

---

🎯 What You Will Learn

✅ API Integration
✅ Fetch Data using JavaScript
✅ Async/Await
✅ DOM Manipulation
✅ Real-world Project Development

---

⭐ Tips to Improve Project

👉 Add weather icons ☀️
👉 Add dark mode 🌙
👉 Show more details like humidity & wind speed
👉 Add loading animation ⚡

---

📌 Conclusion

This was a Real-Time Weather App Project using JavaScript 🌦️

A perfect beginner project to improve your JavaScript skills and build real-world applications 🚀

---

📢 Also Read

👉 Calculator Project
👉 To-Do App Project
👉 JavaScript Interview Guide

---

👉 Save and share this project 📌
👉 Follow for more coding content 💻

Comments

Post a Comment

Popular posts from this blog

Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project)

Image
⚡ Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project) Hello everyone 👋 Welcome back! In this project, we will build a simple calculator using HTML, CSS, and JavaScript. This is perfect for beginners to understand logic and DOM manipulation 💻 --- 🌟 What You Will Learn - HTML structure - CSS styling - JavaScript logic - Event handling --- 🧱 Step 1: HTML Code <!DOCTYPE html> <html> <head>     <title>Calculator</title> </head> <body> <div class="calculator">     <input type="text" id="result" disabled>     <button onclick="clearResult()">C</button>     <button onclick="deleteLast()">DEL</button>     <button onclick="appendValue('/')">/</button>     <button onclick="appendValue('7')">7</button>     <button onclick="appendValue('8')">8</button>    ...
Read more

Top 10 Python Programs for Beginners (Easy + Practical Guide)

Image
 Top 10 Python Programs for Beginners (Easy + Practical Guide) Hello everyone 👋 Welcome back! Want to practice Python with real examples? These easy Python programs will help beginners understand coding step by step 💻 --- 🌟 Why Practice Programs? - Improves logic 🧠 - Helps in exams 📘 - Builds coding confidence 💻 --- 🔟 Top 10 Python Programs 1. Hello World print("Hello World") --- 2. Even or Odd num = int(input("Enter number: ")) if num % 2 == 0:     print("Even") else:     print("Odd") --- 3. Sum of Two Numbers a = int(input()) b = int(input()) print("Sum =", a + b) --- 4. Factorial num = 5 fact = 1 for i in range(1, num+1):     fact *= i print("Factorial =", fact) --- 5. Prime Number num = 7 for i in range(2, num):     if num % i == 0:         print("Not Prime")         break else:     print("Prime") --- 6. Multiplication Table num = 5 for i in range(1, 11):     print(num, "x...
Read more

JavaScript Notes for Beginners (Simple + Easy Guide) ⚡

Image
⚡ JavaScript Notes for Beginners (Simple + Easy Guide) Hello everyone 👋 Welcome back to my blog! In this post, you will learn JavaScript in a simple and easy way. These notes are perfect for beginners and BCA students for quick revision 📘 --- 🌐 What is JavaScript? JavaScript is a programming language used to make web pages interactive. 👉 It works with HTML and CSS to create dynamic websites. --- 🔢 Variables in JavaScript Variables are used to store data. let name = "Luna"; const age = 20; var city = "Delhi"; --- 📦 Data Types - String → "Hello" - Number → 10 - Boolean → true / false - Array → [1, 2, 3] - Object → {name: "Luna"} --- 🔁 Operators - Arithmetic → + - * / - Comparison → == === != - Logical → && || ! --- 🔄 Conditions let age = 18; if (age >= 18) {   console.log("Adult"); } else {   console.log("Minor"); } --- 🔁 Loops For Loop for (let i = 0; i < 5; i++) {   console.log(i); } While Loop let i = 0...
Read more