Home
Web-Development

Create a Weather App Using HTML, CSS, and JavaScript

Learn how to build a simple weather app using HTML, CSS, and JavaScript. A step-by-step tutorial for beginners with live API integration
MAXON

 Building real-world projects is one of the best ways to learn web development. In this tutorial, we’ll create a fully functional Weather App using HTML, CSS, and JavaScript, powered by OpenWeatherMap API.

Build Your Own Weather App Using HTML, CSS & JavaScript!


By the end, you’ll have a live app that displays:

  • Current temperature 🌡️

  • Weather conditions ☁️

  • Location and icon support 📍

Let’s go step-by-step.

🧱 Step 1: Set Up Your Project Structure

Create a folder named weather-app, then inside it:

     weather-app/
├── index.html
├── style.css
└── script.js

📝 Step 2: HTML Structure
     <!-- 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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Weather App</h1>
    <input type="text" id="cityInput" placeholder="Enter city name" />
    <button onclick="getWeather()">Get Weather</button>
    <div id="weatherResult"></div>
  </div>

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

🎨 Step 3: Add Some CSS
     /* style.css */
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
}

input, button {
  padding: 10px;
  margin: 10px;
  border: none;
  border-radius: 6px;
}

button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

⚙️ Step 4: JavaScript + OpenWeather API

Sign up at OpenWeatherMap and get your API key.

     // script.js
const apiKey = "YOUR_API_KEY_HERE";

async function getWeather() {
  const city = document.getElementById("cityInput").value;
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
  );
  
  const data = await response.json();
  
  if (data.cod === "404") {
    document.getElementById("weatherResult").innerHTML = "City not found!";
    return;
  }

  const weatherHTML = `
    
${data.name}

    
${data.weather[0].main} - ${data.weather[0].description}

    
🌡️ Temperature: ${data.main.temp} °C

    
💧 Humidity: ${data.main.humidity}%

    
  `;
  
  document.getElementById("weatherResult").innerHTML = weatherHTML;
}

✅ Step 5: Test the App

  1. Replace YOUR_API_KEY_HERE with your actual OpenWeatherMap API key.

  2. Open index.html in your browser.

  3. Type a city (e.g., New York, London) and click Get Weather.

You should now see the current weather details displayed instantly.

🔄 Bonus: Improvements You Can Make

  • Add geolocation support (auto-detect user’s city)

  • Use local storage to save last searched city

  • Add error animations or loading spinner

  • Convert to React, Vue, or Svelte for advanced users

📦 Resources

🏁 Final Thoughts

This weather app is a great beginner project that covers:

  • API requests with fetch

  • DOM manipulation

  • Responsive CSS layout

  • External APIs & keys

💡 Once you master this, you can level up by building weather dashboards, news widgets, or even a travel planner!


#WeatherApp, #JavaScriptProject, #WebDevelopment, #HTMLCSSJS, #MaxonCodes, #APItutorial

Post a Comment