****# π¦οΈ Weather App
A sleek and responsive Weather Web Application that provides real-time weather updates for any city worldwide using the OpenWeather API. It features a dynamic UI that adapts visually based on current weather conditions.
- π Search weather by city name
- π‘οΈ Real-time temperature (Kelvin, Celsius, Fahrenheit)
- π§ Humidity tracking
- π¬οΈ Wind speed with multiple unit conversions
- π«οΈ Atmospheric pressure with unit switching
- π Local time with 12/24-hour format toggle
- π Day/Night phase detection (Morning, Evening, Night, etc.)
- π¨ Dynamic background & weather icons based on conditions
- β‘ Keyboard shortcuts (Enter to search, Space to focus input)
- π± Responsive UI with smooth animations
- Frontend: HTML, CSS, JavaScript
- API: OpenWeather API
- Icons & UI: Bootstrap Icons, Font Awesome
- User enters a city name
- App sends request to OpenWeather API
- Weather data is fetched using
fetch() - UI updates dynamically based on response
- Background and icons change based on weather conditions
- API Integration (Fetch API)
- DOM Manipulation
- Event Handling
- Async/Await
- Unit Conversion Logic
- Dynamic UI Rendering
- Shows error UI for invalid city names
- Handles API failures using try-catch
- Prevents empty input search
Weather-App/ # Root directory β βββ index.html # Entry point - UI structure βββ style.css # Styles (layout, animations) βββ app.js # Core logic (API, DOM, events) βββ server.js # Express dev server / API proxy (optional) β βββ manifest.json # PWA configuration βββ robots.txt # SEO crawling rules βββ sitemap.xml # SEO sitemap β βββ Preview.png # Project preview screenshot β βββ README.md # Documentation (setup, usage, features) βββ LICENSE # MIT license βββ CHANGELOG.md # Version history βββ CONTRIBUTING.md # Contribution guide βββ CODE_OF_CONDUCT.md # Community guidelines βββ SECURITY.md # Security policy β βββ .env.example # Env template (API key placeholder) βββ .gitignore # Git ignored files β βββ .editorconfig # Editor consistency rules βββ .prettierrc # Code formatting rules βββ .prettierignore # Ignore formatting βββ .eslintrc.json # JS linting rules βββ .eslintignore # Ignore linting βββ .stylelintrc # CSS linting rules β βββ .babelrc # Babel config (if used) βββ .npmrc # NPM config βββ jsconfig.json # JS project config (intellisense) β βββ .vscode/ # VS Code settings βββ .git/ # Git internals (auto-generated) β βββ media/ # All assets (cleaned structure) β βββ logo1.png # Project Logo β βββ Icons/ # UI icons β βββ air-quality-icon.png β βββ day-and-night-icon.png β βββ humidity-icon.png β βββ pressure-gauge-icon.png β βββ search.png β βββ temperature-icon.png β βββ time-icon.png β βββ uv-icon.png β βββ wind-icon.png β βββ GIFs/ # Animated backgrounds β βββ clear.gif β βββ clouds.gif β βββ drizzle.gif β βββ haze.gif β βββ mist.gif β βββ rain.gif β βββ smoke.gif β βββ snow.gif β βββ thunderstorm.gif β βββ images/ # Static weather icons βββ clear.png βββ clouds.png βββ default.png βββ drizzle.png βββ haze.png βββ mist.png βββ rain.png βββ smoke.png βββ snow.png βββ thunderstorm.png
- Clone the repository:
git clone https://github.com/your-username/Weather-App.git
- Navigate into the project folder:
cd Weather-App- Open index.html in your browser or use a local server
- Install Node.js dependencies:
npm install express dotenv
- Set up environment variables:
cp .env.example .env
# Edit .env and add your OpenWeather API key- Start the development server:
node server.js
- Open http://localhost:3000 in your browser
- Get a free API key from OpenWeather API
- Replace
YOUR_API_KEYinapp.jsor set it in your.envfile - The app will work with real weather data once the API key is configured
Replace the API key inside app.js:
const apiKey = "YOUR_API_KEY";
Dynamic UI based on weather (rain, clear, snow, etc.) Smooth transitions and animated backgrounds
API key is currently exposed (for demo purposes only) No backend (pure frontend app) Error handling can be improved for edge cases
Add .env for API keys in production Avoid committing sensitive data Consider rate limiting if scaling
π Add geolocation support π 7-day weather forecast π Dark/Light theme toggle π Auto-detect user location β‘ Performance optimization
This project is open-source and available under the MIT License.
Piyush Rana