https://github.com/mythili-velivelli/atmos
Live weather and AQI at a glance.
https://github.com/mythili-velivelli/atmos
air-quality-index bootstrap javascript jquery live-weather openweathermap-api responsive-ui weather-app
Last synced: 3 months ago
JSON representation
Live weather and AQI at a glance.
- Host: GitHub
- URL: https://github.com/mythili-velivelli/atmos
- Owner: Mythili-Velivelli
- Created: 2025-06-23T16:54:40.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-23T17:23:01.000Z (4 months ago)
- Last Synced: 2025-06-23T18:31:29.195Z (4 months ago)
- Topics: air-quality-index, bootstrap, javascript, jquery, live-weather, openweathermap-api, responsive-ui, weather-app
- Language: HTML
- Homepage:
- Size: 1.92 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌦️ Atmos - Live Weather App
**Atmos** is a responsive weather application that helps users get real-time weather details and forecasts for any city. It combines clean UI with live data from the OpenWeatherMap API to provide a quick and informative weather experience.
## 🚀 Features
- 🔍 Search weather by city name
- 🌡️ Displays current temperature, sky condition, humidity, pressure, visibility, and "feels like" temperature
- 📅 Shows current date and time
- 🌅 Displays sunrise and sunset times
- 📆 Provides 5-day forecast
- 🕘 Shows today's hourly temperature
- 💨 Air Quality Index (CO, NO₂, SO₂, O₃)
## 🛠️ Tech Stack
- HTML5
- CSS3
- JavaScript (ES6)
- jQuery
- Bootstrap 5
- [OpenWeatherMap API](https://openweathermap.org/api)
## 📸 Screenshots
Example:
`./screenshots/atmos-ui.png`
## 🌐 How to Use
1. Clone the repository
```bash
git clone https://github.com/Mythili-Velivelli/Atmos.git
cd Atmos
```
2. Open `index.html` in your browser
3. Search for any city to get the live weather and forecast
## 🔑 API Key Setup
- This app uses the **OpenWeatherMap API**.
- Sign up at [openweathermap.org](https://openweathermap.org) and get your **API key**.
- Replace the API key in `index.html` with your own:
```js
// Replace this line:
const apiKey = "YOUR_API_KEY_HERE";
```
## 💬 Credits
- Weather data: [OpenWeatherMap](https://openweathermap.org)
- Icons: Custom and open-source icon sets
- UI Inspiration & Tutorial from: Tech Jaswanth — Youtube