Weather WebApplication

images/

app.js

index.html

style.css

A weather web application which can give you any places weather information such as temp, wind speed and humidity.

In this blog post, we'll walk through the creation of a weather application using HTML, CSS, and JavaScript. We'll utilize the OpenWeatherMap API to fetch weather data and display it on our webpage. The goal is to create a clean, responsive, and functional weather application that provides users with real-time weather information.

Project Overview

Technologies Used

HTML: For structuring the webpage.
CSS: For styling the webpage.
JavaScript: For fetching and displaying weather data.
OpenWeatherMap API: To get the weather data.

Step-by-Step Guide

1. Setting Up the Project

Create the following files in your project directory:

index.html
style.css
app.js

2. HTML Structure

Let's start by defining the HTML structure. This will include a search input for entering the city name, a button to trigger the weather data fetch, and a section to display the weather information.

Invalid city name

22°C

New York

50%

Humidity

15km/h

Wind Speed

3. CSS Styling

Next, let's add some basic styling to make our weather application visually appealing

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

body {
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card {
    width: 90%;
    max-width: 470px;
    background: linear-gradient(135deg, #B118C8, #A6A2A2);
    color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 40px 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.search input {
    border: none;
    outline: none;
    background-color: #ebfffc;
    color: #555;
    padding: 10px 25px;
    height: 60px;
    border-radius: 30px;
    flex: 1;
    margin-right: 16px;
    font-size: 18px;
} 

.search button {
    border: none;
    outline: none;
    border-radius: 40px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-color: #007BFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search button img {
    width: 20px;
}

.weather-icon {
    width: 170px;
    margin-top: 30px;
}

.weather h1 {
    font-size: 80px;
    font-weight: 500;
}

.weather h2 {
    margin-top: -10px;
    font-size: 45px;
    font-weight: 400;
}

.details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.col {
    display: flex;
    align-items: center;
}

.col img {
    width: 40px;
    margin-right: 10px;
}

.humidity, .wind {
    font-size: 28px;
}

.weather {
    display: none;
}

.error {
    display: none;
    font-size: 18px;
    color: red;
    margin-top: 20px;
}

4. JavaScript Logic

Finally, let's add the JavaScript code to fetch the weather data from the OpenWeatherMap API and display it in our application.

const apiKey = "YOUR_API_KEY"; // Replace with your OpenWeatherMap API key
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
    const data = await response.json();

    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        document.querySelector(".error").style.display = "none";
        document.querySelector(".weather").style.display = "block";

        document.querySelector(".city").innerText = data.name;
        document.querySelector(".temp").innerText = Math.round(data.main.temp) + "°C";
        document.querySelector(".humidity").innerText = data.main.humidity + "%";
        document.querySelector(".wind").innerText = data.wind.speed + " km/h";

        const weatherIcon = document.querySelector(".weather-icon");
        const weatherMain = data.weather[0].main.toLowerCase();
        weatherIcon.src = `images/${weatherMain}.png`;
    }
}

document.querySelector(".search button").addEventListener("click", () => {
    const city = document.querySelector(".search input").value;
    checkWeather(city);
});

Explanation

HTML: Defines the structure of the webpage, including the input for the city name, a button to search for the weather, and sections to display weather information and error messages.
CSS: Provides styling for the application, making it visually appealing and responsive.
JavaScript: Contains the logic to fetch weather data from the OpenWeatherMap API and display it. It includes error handling for invalid city names and updates the UI based on the fetched data.

Conclusion

Congratulations! You've built a functional weather application using HTML, CSS, and JavaScript. This application fetches real-time weather data from the OpenWeatherMap API and displays it in a user-friendly interface. You can further enhance this application by adding more features, such as a 5-day forecast or using geolocation to get the weather for the user's current location.

Feel free to experiment with the design and functionality to make the application your own. Happy coding!

Coders Packet