Home
Web Development

Create a Weather App Using HTML, CSS & JavaScript (Beginner Project)

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, weather app using html css 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