Loading repository data…
Hussainshaik-devv / repository
A responsive Weather Forecast web app using HTML5, CSS3, JavaScript & Openweathermap API.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
🌐 Click Here to View Live Demo
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.
▲ Screenshot 1: Main UI with Search Functionality
▲ Screenshot 2: Auto-dropdown fetching city name
▲ Screenshot 3: Responsive Weather Results
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
🔎 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
Selected from shared topics, language and repository description—not editorial ratings.
coderpd /
Developed a responsive web application using JavaScript, HTML, and CSS that fetches real-time weather data from a third-party Weather API. Implemented dynamic UI updates based on API responses to display current weather conditions and forecasts. Applied asynchronous programming (using fetch/async-await) to handle API calls efficiently
27/100 health🔄 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
The layout adapts seamlessly across devices:
| Device | Status |
|---|---|
| Mobile | ✅ Tested |
| Tablet | ✅ Tested |
| Desktop | ✅ Tested |
Weather-Forecast-App/
├── index.html
├── style.css
├── script.js
├── assets/
│ ├── overview.png
│ ├── autodropdown.png
│ ├── weatherresult.png
│ └── banner.gif
└── README.md
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.
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
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 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.
HTML5 | CSS3 |JavaScript | OpenWeatherMap API | Responsive Design Weather App | Frontend Project | Glassmorphism Live | Demo API Integration
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