1. Home
  2. Scripts & codes
  3. Javascript

How to Create a Weather App Using HTML, CSS, and JavaScript

Udayveer Malhotra
Udayveer Malhotra
03 Jun 2024 • 4 min read

Creating a weather app is a great way to practice web development skills and learn how to integrate APIs into your projects. This guide will walk you through building a basic weather app using HTML, CSS, and JavaScript. By the end of this tutorial, you'll have a functional weather app that fetches and displays current weather data for any city.


Prerequisites

Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. Familiarity with fetching data from APIs will also be helpful.


Step 1: Set Up the Project

Create a new directory for your project and inside it, create the following files:

  • index.html
  • style.css
  • script.js

Step 2: Structuring the HTML

Open index.html and set up the basic structure of the HTML document. We will create a simple interface with an input field for the city name, a button to fetch the weather, and a section to display the weather information.


<!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>
            <div class="search">
                <input type="text" id="city" placeholder="Enter city name">
                <button id="searchButton">Get Weather</button>
            </div>
            <div class="weatherInfo" id="weatherInfo"></div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

Step 3: Styling with CSS

Next, let's add some basic styling in style.css to make our app look presentable.

 body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

h1 {
    margin-bottom: 20px;
}

.search {
    margin-bottom: 20px;
}

input {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.weatherInfo {
    margin-top: 20px;
}

Step 4: Fetching Weather Data with JavaScript

Now it's time to add functionality to our app using JavaScript. We'll use the OpenWeatherMap API to fetch weather data. First, you need to sign up on OpenWeatherMap to get an API key.

In script.js, write the following code:


document.getElementById("searchButton").addEventListener("click", function () {
    const city = document.getElementById("city").value;
    const apiKey = "YOUR_API_KEY"; // Replace with your OpenWeatherMap API key
    const url = `https://openweathermap.org/data/2.5/find?callback=&q=${city}&type=like&sort=population&cnt=30&appid=${apiKey}`;
  
    fetch(url)
      .then((response) => response.text())
      .then((data) => {
        var d = data.replace(/^\(|\)$/g, "");
        var json = JSON.parse(d);
        var data = json;
        if (data.cod === "200" && data.count > 0) {
          const weatherData = data.list[0]; // Get the first result from the list
          const weatherInfo = document.getElementById("weatherInfo");
          weatherInfo.innerHTML = `
                      <h2>${weatherData.name}, ${weatherData.sys.country}</h2>
                      <p>Temperature: ${weatherData.main.temp}°C</p>
                      <p>Feels like: ${weatherData.main.feels_like}°C</p>
                      <p>Weather: ${weatherData.weather[0].description}</p>
                      <p>Humidity: ${weatherData.main.humidity}%</p>
                      <p>Wind Speed: ${weatherData.wind.speed} m/s</p>
                  `;
        } else {
          alert("City not found");
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
});

Step 5: Testing the App

Open index.html in your web browser. Enter a city name in the input field and click the "Get Weather" button. You should see the current weather information for the entered city displayed below the button.


See the Pen Untitled by Vivek (@Dev_vivek) on CodePen.


Conclusion

Congratulations! You've built a simple weather app using HTML, CSS, and JavaScript. This app demonstrates how to fetch and display data from an API, providing a practical example of working with real-world data in web development. You can enhance this app further by adding more features, such as displaying weather forecasts, showing weather icons, or using a framework like React for a more dynamic interface. Happy coding!