Skip to content

Shravani-31-12/Weather-Forecast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌦️ Weather Forecast Web App

A modern and responsive Weather Forecast Web Application built using HTML, CSS & JavaScript, powered by the Open-Meteo API. The app provides real-time weather details, a 7-day weekly forecast, and includes a Day/Night theme mode for an enhanced user experience.


🚀 Live Demo

🔗 Live App: https://shravani-31-12.github.io/Weather-Forecast/


✨ Features

  • 🌍 Search Weather by City Name
  • 📍 Use My Location (Auto-detect weather using GPS)
  • 🌡️ Shows Temperature, Feels Like, Humidity, Wind Speed & Condition
  • 📅 7-Day Weather Forecast with emoji icons
  • 🌓 Theme Toggle – Day & Night Mode
  • 🎨 Beautiful Glassmorphism UI Design
  • ⚠️ Smart Error Handling (City not found, location denied, etc.)
  • 📱 Fully Responsive UI for Mobile, Tablet & Desktop

🧠 Tech Stack

Technology Purpose
HTML5 Structure & layout
CSS3 UI styling, animations, glassmorphism
JavaScript (ES6) Functionality & API integration
Open-Meteo API Real-time weather & 7-day forecast
Geocoding API Convert city name → latitude & longitude

🧩 How It Works

  1. User enters a city OR clicks Use My Location
  2. City name is converted to coordinates via Geocoding API
  3. Weather & forecast fetched from Open-Meteo
  4. UI updates with weather info + 7-day forecast

📸 Screenshots

Night Mode Light Mode
Screenshot 2025-11-01 193958 Screenshot 2025-11-01 193947

📌 Folder Structure

📂 Weather-App
│── index.html
│── style.css
│── script.js
└── /img

👤 Author

Shravani Pawar


If you found this project helpful, please ⭐ star the repository!

About

A real-time weather forecast web app built using HTML, CSS, and JavaScript with OpenWeather API integration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors