Weather Web App using HTML, CSS and JavaScript

By Priyanka Chauhan

A web-based weather application built with HTML, CSS and JavaScript that integrates the OpenWeatherMap API to fetch and display real-time weather data.

 

TITLE: Weather Web App using HTML, CSS and Javascript

OVERVIEW:

It is a simple single-page web application built using HTML, CSS and JavaScript.

Allows users to view current weather data for their location or any searched city.

Fetches real-time weather data from OpenWeatherMap API.

UI/UX:

Clean and responsive UI built using HTML and CSS.

Tab-based navigation to switch between local and search weather.

Animated loaders and modular containers for smooth UX.

Visual icons, city names, and weather stats are displayed in an organized layout.

FEATURES:

Get the current location weather automatically using Geolocation API.

Search weather by city name through the text input field.

Display weather data like Temperature, wind, humidity, clouds etc.

Dynamic icons to depict weather conditions and country flags.

Interactive elements like tabs, buttons & form submissions.

TECHNICAL: HTML for content structure and semantics.

Custom CSS for styling visual interface.

Vanilla JavaScript for client-side logic and DOM manipulation.

Asynchronous JS for seamless API calls and data fetching

Integration with OpenWeatherMap API to get weather data.

Geolocation API to access user coordinates.

Local storage to cache the user's location.

Modular code structure for readability and maintainability.

STEPS FOR FETCHING APIs: 

FETCHING LOCAL WEATHER API:

1. When user clicks on "Local Weather" tab, Geolocation API called to get latitude and longitude coordinates.

2. The coordinates are stored in session storage to cache user's location.

3. Show loading indicators while the API call is in progress.

4. Construct API URL with:

    Lat, Lon coordinates

    Open the WeatherMap API key

    Units format as metric.

5. Make asynchronous GET request to the API URL using fetch() method.

6. Handle promise returned by fetch() to get the response JSON data.

7. Remove the loading indicator once the response received.

8. Extract required weather data from JSON objects like:

 City name

 Weather description

 Temperature

 Wind speed

  Humidity

 Cloudiness

9. Populate extracted values into respective UI elements to display weather data.

FETCHING SEARCH WEATHER API:

1. Get the city name string from the search input field on the form submit.

2. Show the loading indicator during the API call.

3. Costruct API URL with:

  City name

  API Key

  Metric units

4. Make an asynchronous GET request to the API URL using fetch().

5. Handle promise to get response JSON weather data.

6. Hide the loading indicator after the response.

7. Extract and display weather data on UI as done for local weather.

WORKING: 

Tabs to switch between local and search weather views

Geolocation API called on local tab load to get user coordinates.

API called with coordinates to fetch local weather data.

The searched tab allows looking up the weather by city name input.

API calls with city name to get weather data.

 JSON responses parsed and displayed on modular UI.

Icons, animation and transitions for visual feedback.

CONCLUSION:

In summary, this project demonstrates the development of a simple yet functional web-based weather application using core front-end technologies. It implements a clean and intuitive user interface with HTML and CSS while JavaScript handles the client-side logic. Fetching data asynchronously from a weather API and updating the DOM creates a seamless experience without page refreshes.