Weather Forecast Application

---

Your Weather Updates Partner on the Go

---

🔗 Live Website

🌐 Click Here to View Live Demo

📘 Description

A responsive and dynamic Weather Forecast App powered by the OpenWeatherMap API, built using HTML5, CSS3, and JavaScript. This app allows users to check real-time weather details of any city worldwide with modern UI, animated feedback, and real-world API integration.

This project is a responsive and interactive Weather Application that allows users to search and view real-time weather data for any city in the world. The application leverages the OpenWeatherMap API to fetch weather data and display it with a clean, modern UI built using HTML, CSS, and JavaScript.

It is designed with usability and aesthetic UI in mind, incorporating features like autocomplete suggestions, live weather updates, and a stylish weather result card. The application also includes user-friendly functionality such as click-outside-to-close, loading indicator, and input-based hiding of results.

---

📸 Screenshots

▲ Screenshot 1: Main UI with Search Functionality

▲ Screenshot 2: Auto-dropdown fetching city name

▲ Screenshot 3: Responsive Weather Results

---

🛠️ Technologies Used

• HTML5 – Markup for the structure of the web page

• CSS3 – Styling with modern techniques including glassmorphism

• JavaScript (ES6) – Logic, API handling, DOM manipulation

• OpenWeatherMap API – Real-time weather data source

• Git & GitHub – Version control and deployment

---

🌟 Key Features

• 🔎 City Autocomplete – Suggests city names as you type

• 🌦️ Live Weather Results – Temperature, humidity, wind, conditions, sunrise & sunset

• 🎯 Emoji Indicators – Visual representation for better UX

• 🌀 Loading Spinner – Displays while data is being fetched

• ❌ Click Outside to Close – Closes result card when clicking elsewhere

• 🔄 Clear on Empty Input – Automatically hides results when search box is cleared

• 🎨 Glassmorphic UI – Stylish design with transparency and smooth gradients

• 📱 Responsive Design – Mobile, tablet and desktop support

---

📱 Responsive Design

The layout adapts seamlessly across devices:

Device	Status
Mobile	✅ Tested
Tablet	✅ Tested
Desktop	✅ Tested

---

📂 Folder Structure

Weather-Forecast-App/
├── index.html
├── style.css
├── script.js
├── assets/
│   ├── overview.png
│   ├── autodropdown.png
│   ├── weatherresult.png
│   └── banner.gif
└── README.md

---

🔐 API Key

The application requires an OpenWeatherMap API key to function.

You can obtain a free key by registering at https://openweathermap.org/api Replace the placeholder key inside script.js

const apiKey = "API KEY HERE";

🔒 Notes API Key removed from public repo for safety.

If you fork, insert your own API key from OpenWeatherMap.

---

💻 How to Use

1 . Open index.html in a browser

2 . Enter a city name in the search bar

3 . Click the search button or press Enter

4 . The weather details will be displayed below the card

5 . Click outside the card to close it, or clear the input to reset

---

🎯 Learning Outcomes

• API integration using JavaScript fetch()

• DOM manipulation and event handling

• Responsive web design and CSS layout techniques

• Handling asynchronous operations (loading states)

• Creating interactive UI components with accessibility in mind

---

🎓 Project Information

• Project Type: Frontend Weather Application.

• Purpose: Practice and demonstration of API integration and UI development of the website.

• Tools: Visual Studio Code, OpenWeatherMap, Web Browser.

• Design: Canvas, Simpleicons, Litte Animations.

---

🏷️ Tags

HTML5 | CSS3 |JavaScript | OpenWeatherMap API | Responsive Design Weather App | Frontend Project | Glassmorphism Live | Demo API Integration

📬 Contact Me

If you have any questions, suggestions, or collaboration ideas — feel free to reach out.

📱 Mobile: +91 8686481451
📧 Email: Hussainshaikdev03@gmail.com
🧑‍💻 GitHub: github.com/hussainshaik-devv
👔 LinkedIn: linkedin.com/in/hussainshaik-devv

---

🧑‍💻 Developed by ⚡

Shaik Mohammed Hussain | Web Developer | Bengaluru | Karnataka | India