{"id":29350694,"url":"https://github.com/pvm-harshavardhan/weather-app","last_synced_at":"2026-05-05T13:35:43.012Z","repository":{"id":302816216,"uuid":"1013715603","full_name":"pvm-harshavardhan/weather-app","owner":"pvm-harshavardhan","description":"A modern, responsive weather app that provides real-time weather and air quality information for any city worldwide, featuring a clean UI, search history, and instant unit toggling built with HTML, Tailwind CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2025-07-04T10:54:04.000Z","size":0,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-04T11:45:05.065Z","etag":null,"topics":["api","css3","es6","frontend-web","html5","javascript","postman-testing","rest-api","restful-api","smooth-animations","tailwind-css","ui","web-development","web-project","wheather-app"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pvm-harshavardhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-04T10:50:14.000Z","updated_at":"2025-07-04T11:01:20.000Z","dependencies_parsed_at":"2025-07-04T11:55:10.398Z","dependency_job_id":null,"html_url":"https://github.com/pvm-harshavardhan/weather-app","commit_stats":null,"previous_names":["pvm-harshavardhan/weather-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pvm-harshavardhan/weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fweather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fweather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fweather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fweather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pvm-harshavardhan","download_url":"https://codeload.github.com/pvm-harshavardhan/weather-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fweather-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264363808,"owners_count":23596512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css3","es6","frontend-web","html5","javascript","postman-testing","rest-api","restful-api","smooth-animations","tailwind-css","ui","web-development","web-project","wheather-app"],"created_at":"2025-07-08T23:13:26.373Z","updated_at":"2026-05-05T13:35:37.971Z","avatar_url":"https://github.com/pvm-harshavardhan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⛅ Beautiful Weather App\n\nA modern, responsive weather app built with HTML, Tailwind CSS, and TypeScript. It instantly fetches real-time weather, air quality, and more for any city worldwide, featuring a beautiful blue-gradient glassmorphism UI with smooth animations, interactive search history, and a seamless user experience.\n\n![App Screenshot](./project_screenshot.png)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)\n[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)\n[![TypeScript](https://img.shields.io/badge/TypeScript-2e74bf?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwindcss\u0026logoColor=white)](https://tailwindcss.com/)\n![API](https://img.shields.io/badge/API-WeatherAPI-4CAF50?logo=actix)\n[![Font Awesome](https://img.shields.io/badge/Font_Awesome-538dd7?logo=fontawesome\u0026logoColor=white)](https://fontawesome.com/)\n[![Git](https://img.shields.io/badge/Git-F05032?logo=git\u0026logoColor=white)](https://git-scm.com/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github\u0026logoColor=white)](https://github.com/)\n[![GitHub Pages](https://img.shields.io/badge/GitHub-Pages-181717?logo=github\u0026logoColor=white)](https://github.com/)\n\n---\n\n## ✨ Features\n\n- **🌍 Global Read-Time Weather**: Get current weather, temperature, humidity, wind, pressure, and visibility for any city worldwide\n- **🕑 Local Time**: Displays local date and time for the selected city\n- **💧 Weather Details**: Humidity, wind speed, visibility, and pressure\n- **🍃 Air Quality Index**: Live AQI with color-coded backgrounds and health labels\n- **🕑 Search History**: Quick access to your recent city searches dropdown and easy removal.\n- **🎨 Modern UI**: Elegant, glassy UI with animated transitions, glassmorphism, gradients, and smooth animations\n- **📱 Fully Responsive**: Works beautifully on desktop, tablet, and mobile\n- **🔄 Unit Toggle:** Instantly switch between Celsius and Fahrenheit.\n- **⚡ Fast \u0026 Lightweight**: No frameworks or build tools required—just open and use! Minimal dependencies, instant results\n- **🕘 Loading \u0026 Error Handling**: Animated loading spinner, dismissible error popups, and friendly error messages for invalid cities\n\n## 🎮 Usage Guide\n\n### Basic Controls\n\n- **Search**: Enter a city name and click the search button or press Enter\n- **Toggle Units**: Click the °C/°F button to switch temperature units\n- **View History**: Click the History button to see recent searches\n- **Select from History**: Click a city in the dropdown to reload its weather\n- **Remove from History**: Click the × next to a city to remove it from history\n\n### Error Handling\n- If a city is not found, a friendly error popup will appear\n- Click the close (×) button to dismiss error messages\n\n## 🔧 Tech Stack\n\n### **Technologies Used**\n- **HTML5**: Semantic markup\n- **Tailwind CSS**: Utility-first CSS framework via CDN\n- **TypeScript**: Type-safe JavaScript for robust code\n- **Font Awesome**: Icon library via CDN\n- **WeatherAPI.com**: Real-time weather and air quality data\n- **Git** – Version control\n- **GitHub** – Code hosting and collaboration\n\n## 🛠️ Getting Started\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/pvm-harshavardhan/weather-app.git\n   ```\n2. **Change to the project directory:**\n   ```bash\n   cd weather-app\n   ```\n3. **Compile TypeScript File:**\n   ```bash\n   tsc script.ts\n   ```\n4. **Open the app:**\n   - Open `index.html` in your web browser.\n5. **Start searching for weather!** ⛅\n\n_No build step or server required!_\n\n## 📁 Project Structure\n\n```\nweather-app/\n├── 📄 index.html        # Main HTML file with Tailwind CDN\n├── ⚡ script.ts         # TypeScript logic for weather, UI, and history\n├── ⚡ script.js         # Compiled JavaScript output\n├── 🖼️ favlogo.png       # App favicon\n```\n\n## 📱 Browser Compatibility\n\n- ✅ Chrome (recommended)\n- ✅ Firefox\n- ✅ Safari\n- ✅ Edge\n- ⚠️ Internet Explorer (limited support)\n\n## 🐛 Troubleshooting\n\n### **Weather Not Loading?**\n1. Check your internet connection\n2. Ensure WeatherAPI key is valid and not rate-limited\n3. Check browser console for errors\n4. Verify file paths in the code\n\n### **Styling Issues?**\n1. Make sure Tailwind CSS CDN is accessible\n2. Clear browser cache\n\n### **Mobile Issues?**\n1. The app is fully responsive\n2. Touch controls work on mobile devices\n3. Some mobile browsers may restrict auto-focus or popups\n\n---\n\n## 🖼️ Customization \u0026 Screenshots\n\n- Replace `favlogo.png` with your own logo if desired\n- Add screenshots or GIFs to highlight features and UI\n- Update colors and styles in Tailwind config or HTML classes\n\n---\n\n## 🌐 Deployment\n\nDeploy your Weather App easily using **GitHub Pages**, **Netlify**, or **Vercel** for free.\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome!  \nFeel free to open issues or submit pull requests to improve the app.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## 📞 Contact\n\nYour Name - [@pvm_harsha](https://x.com/pvm_harsha)  \nProject Link: [Weather App Web Project](https://github.com/pvm-harshavardhan/weather-app)\n\n---\n\n**Made with ❤️ by [Your Name]**\n\n**Enjoy the weather! ⛅🌦️🌈** ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvm-harshavardhan%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpvm-harshavardhan%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvm-harshavardhan%2Fweather-app/lists"}