Weather App

A responsive Weather Application built using HTML, CSS, and Vanilla JavaScript.

The application allows users to search for a city and view its current weather information. It uses the Open-Meteo Geocoding API to find the latitude and longitude of the entered city and the Open-Meteo Forecast API to fetch current weather details.

---

Overview

This project was created to practise working with external APIs, asynchronous JavaScript, Object-Oriented Programming, DOM manipulation, and error handling.

The application first converts the entered city name into geographic coordinates. It then uses those coordinates to fetch the current weather information and dynamically display it on the page.

---

Features

• Search weather information by city name
• Display city and country name
• Display current temperature
• Display feels-like temperature
• Display humidity
• Display wind speed
• Display current weather condition
• Show a matching weather icon
• Handle invalid city names
• Display a loading indicator while fetching data
• Disable the search button during API requests
• Clear and focus the input after searching
• Encode city names safely before sending requests

---

Technologies Used

• HTML5
• CSS3
• Vanilla JavaScript
• Open-Meteo Geocoding API
• Open-Meteo Forecast API
• Fetch API

---

JavaScript Concepts Practised

This project helped me practise:

• Object-Oriented Programming
• JavaScript classes
• Constructors
• Static class properties
• The this keyword
• bind(this)
• Async / Await
• Fetch API
• Promises
• DOM manipulation
• Event handling
• Error handling
• try...catch...finally
• Throwing custom errors
• Template literals
• Optional API data handling
• Switch statements
• Dynamic UI rendering

---

How It Works

The application follows a two-step API process.

Step 1: Get City Coordinates

When the user enters a city name, the application sends a request to the Open-Meteo Geocoding API.

const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(
  cityName
)}&count=1`;

The API returns information such as:

• Latitude
• Longitude
• Country name

If the entered city cannot be found, the application throws an error.

if (!data.results || data.results.length === 0) {
  throw new Error("Please Enter Valid City Name :(");
}

Step 2: Fetch Current Weather

The latitude and longitude are then passed to the Open-Meteo Forecast API.

const url = `${WeatherApp.BASE_URL}?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m`;

The received weather data is then rendered dynamically on the page.

---

Weather Information Displayed

The application displays:

• City name
• Country name
• Current temperature
• Feels-like temperature
• Relative humidity
• Wind speed
• Weather condition
• Weather condition icon

---

Weather Conditions Supported

The application handles multiple Open-Meteo weather codes, including:

• Clear Sky
• Mainly Clear
• Partly Cloudy
• Overcast
• Fog
• Drizzle
• Freezing Drizzle
• Rain
• Freezing Rain
• Snow
• Snow Grains
• Rain Showers
• Snow Showers
• Thunderstorm
• Thunderstorm with Hail
• Unknown Weather

---

Project Structure

weather-app/
│
├── index.html
├── style.css
├── app.js
├── assets/
│   └── icons/
│       └── weather_icons_png/
│           ├── clear_sky.png
│           ├── mainly_clear.png
│           ├── partly_cloudy.png
│           ├── overcast.png
│           ├── fog.png
│           ├── drizzle.png
│           ├── freezing_rain.png
│           ├── rain.png
│           ├── snow.png
│           ├── snow_grains.png
│           ├── rain_showers.png
│           ├── snow_showers.png
│           ├── thunderstorm.png
│           ├── thunderstorm_hail.png
│           └── unknown.png
└── README.md

---

Getting Started

Clone the Repository

git clone https://github.com/your-username/weather-app.git

Navigate to the Project

cd weather-app

Run the Application

Open the index.html file directly in your browser.

You can also use the Live Server extension in Visual Studio Code.

No additional packages or dependencies are required.

---

API Endpoints

Open-Meteo Geocoding API

https://geocoding-api.open-meteo.com/v1/search

Used to convert the entered city name into latitude and longitude.

Open-Meteo Forecast API

https://api.open-meteo.com/v1/forecast

Used to fetch the current weather information using geographic coordinates.

---

Error Handling

The application handles the following situations:

• Empty city input
• Invalid city name
• City not found
• API request failure
• Loading state during requests
• Search button disable and enable state

The try...catch...finally structure ensures that loading and button states are restored even when an error occurs.

---

Application Architecture

The complete application logic is contained inside the WeatherApp class.

class WeatherApp {
  static BASE_URL = "https://api.open-meteo.com/v1/forecast";
}

The main methods are:

• handleClick()
  Validates input and manages loading and error states.

• getCityLatndLon()
  Fetches the latitude, longitude, and country name.

• getWeatherInfo()
  Fetches current weather information.

• renderHandler()
  Displays weather data and selects the appropriate weather icon.

This class-based structure keeps the application logic organised and easier to maintain.

---

Learning Outcome

While building this project, I learned:

• How to consume multiple APIs in sequence
• How to pass data from one asynchronous method to another
• How to structure a JavaScript application using a class
• How bind(this) preserves class context in event handlers
• How to use static class properties
• How to manage loading, success, and error states
• How to dynamically update the DOM
• How to convert API weather codes into readable conditions
• How to display different icons based on API data

---

Future Improvements

• Search when the Enter key is pressed
• Hide the previous weather card when a new search starts
• Check response.ok for both API requests
• Display daily weather forecasts
• Display hourly forecasts
• Add automatic location detection
• Add Celsius and Fahrenheit switching
• Add recent search history
• Store recent cities using localStorage
• Add sunrise and sunset information
• Display weather based on the user's current location
• Improve mobile responsiveness
• Add dark and light themes

---

Author

Yash Guram

Computer Engineering graduate learning frontend and full-stack web development.

---

Project Status

Completed as a Vanilla JavaScript, API, and Object-Oriented Programming practice project.