Skip to content

subhoshreep/weatherForecast.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Weather Forecast Web App 🌦️🌐

Overview

This project is a simple weather forecasting web application that provides current weather information and a 3-day forecast for a given location. The web app has a visually appealing interface with background images changing based on the weather conditions. It is designed to be responsive, making it accessible on various devices.

Features

  • Current Weather Display: The application displays the current weather conditions, including temperature, weather description, and an icon representing the weather.
  • Location Search: Users can search for the weather in different locations by entering the city or country name in the search bar.
  • 3-Day Forecast: The app provides a 3-day weather forecast, including the day's name, weather icon, and temperature.
  • Responsive Design: The web app is designed to work seamlessly on different screen sizes, ensuring a consistent user experience.

Tools Used

  • HTML: The structure of the web page.
  • CSS: Styling for the visual elements and responsiveness.
  • JavaScript: Dynamic content, API integration, and user interactions.
  • OpenWeatherMap API: Used to fetch real-time weather data for the specified location.

Deployment

The project is deployed using GitHub Pages and can be accessed at Weather Forecast Web App.

How it Works

  1. User Input: Users can enter a city or country name in the search bar.
  2. API Integration: The application makes a request to the OpenWeatherMap API to retrieve current weather data and forecast information based on the user's input.
  3. Dynamic Content: The fetched data is dynamically displayed on the web page, including the current weather, background image, and the 3-day forecast.
  4. Background Color Change: The background color of the page changes dynamically based on the main weather condition (clear, clouds, rain, etc.).
  5. Responsive Design: The web app is designed to adapt to different screen sizes, providing a user-friendly experience on both desktop and mobile devices.

Deployment Process

The deployment process involves hosting the static web files on GitHub Pages. This allows users to access the web app through a URL without the need for a dedicated server. The GitHub Pages link for this project is provided above.

Feel free to explore the Weather Forecast Web App and check the weather in different locations! ☀️🌧️🌨️

About

Interactive weather forecast web app with dynamic visuals and responsiveness.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages