Loading repository data…
qasim-safi / repository
🌤️ A real-time weather dashboard with dark glassmorphism UI. Built with HTML, CSS & JavaScript.
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.
The app auto-loads Karachi weather on startup in demo mode. Shows temperature, weather icon, humidity, wind speed, visibility and more — all inside a sleek dark glassmorphism card with animated background orbs.
One click on the °F toggle instantly converts all temperatures. Here Karachi's 34°C becomes 93°F, feels like 100°F — with all 6 stat cards (Humidity, Wind, Visibility, Pressure, Sunrise, Sunset) fully visible.
| Feature | Description |
|---|---|
| 🌡️ Current Weather | Temp, feels like, humidity, wind, visibility, pressure |
| 📅 5-Day Forecast | Daily high/low with animated weather icons |
| 📍 Geolocation | Auto-detect current location with one click |
| 🔍 City Search | Search any city with live suggestion dropdown |
| 🔄 °C / °F Toggle | Switch temperature units instantly — no reload |
| 🎨 Glassmorphism UI | Dark theme with animated gradient background orbs |
| 🚀 Demo Mode | Works out of the box — no API key needed |
| 📱 Responsive | Fully optimized for both mobile and desktop |
In demo mode, try these cities from the quick-pick pills:
Karachi · Lahore · London · New York · Tokyo · Dubai
script.jsYOUR_API_KEY_HERE with your key and set DEMO_MODE = falseconst API_KEY = 'your_actual_key_here';
const DEMO_MODE = false;
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure & accessibility |
| CSS3 | Glassmorphism styling, blob animations, responsive grid |
| JavaScript ES6+ | Weather logic, API calls, geolocation, unit conversion |
| OpenWeatherMap API | Live weather + 5-day forecast data |
weathernow-app/
├── index.html # App structure
├── style.css # Dark glassmorphism theme
├── script.js # Weather logic, demo data & API integration
└── Screenshots/
├── HOMEPAGE.png
└── SWITCH_TO _FRENHITE.png
# Clone the repo
git clone https://github.com/qasim-safi/weathernow-app.git
cd weathernow-app
# Open in browser — no build tools needed
open index.html
Qasim Safi — BS Software Engineering Student
🌐 Django Web Dev | 📱 Flutter App Dev | 🐍 Python & Java
MIT License — free to use, modify, and distribute.
Selected from shared topics, language and repository description—not editorial ratings.
Divyansh-89 /
🌤️ Weather Dashboard , A responsive weather dashboard built using HTML, CSS, and JavaScript, designed to display real-time sensor data from DHT11 (temperature & humidity) and LDR (light intensity). It features a clean, modern UI with interactive elements and tooltips for an enhanced user experience.
46/100 healthRudra14-mehta /
🌤️ A responsive weather app with real-time data & 5-day forecast. It is a responsive web app built with HTML, CSS, and JavaScript that fetches live data from the Open-Meteo API. Users can search any city to view the current weather, detailed stats, and a 5-day forecast in a modern, mobile-friendly UI.
57/100 healthMrGaurav695 /
🌤️ A simple and responsive Weather App built with HTML, CSS, and JavaScript. Fetches real-time weather data using the OpenWeatherMap API.
35/100 healthFaridun11 /
🌤️Weather App This project is a weather app built using simple HTML, CSS, and JavaScript. It provides users with real-time weather information. ☀️🌧️
45/100 healthmanikalasaikeerthi149-cell /
# Weather App 🌤️ This project fetches real-time weather data using API. ## Features - Search by city - Live weather data - Clean UI ## Tech Used - HTML - CSS - JavaScript ## Author Sai Keerthi
66/100 healthSreejib-Nandy /
🌤️ Weather App - Real-Time Weather Updates Using OpenWeather API A simple and responsive weather application built with HTML, CSS, and JavaScript, that fetches real-time weather data using the OpenWeather API. Enter any city name to get live weather details like temperature, humidity, wind speed, and weather conditions.
43/100 health