🌦️ Weatherly
Weatherly is a responsive and user-friendly web application that provides real-time weather updates and a 5-day forecast for any city in the world. It uses the OpenWeatherMap API to fetch accurate and up-to-date meteorological data. Built entirely with HTML, CSS, and JavaScript, Weatherly focuses on simplicity, performance, and a visually dynamic experience that adapts to Real-Time(current) weather conditions.
✨ Key Features 🌍 1. Real-Time Weather Data
Displays live temperature, weather conditions, humidity, wind speed, and pressure.
Fetches data from the OpenWeatherMap API every time a new city is searched.
📅 2. 5-Day Forecast
Provides weather predictions for the next five days.
Each forecast includes temperature, weather icons, and descriptive text.
📍 3. Location Detection
Uses the browser’s Geolocation API to automatically detect the user’s current city.
Fetches weather data for the detected coordinates if permission is granted.
🎨 4. Dynamic UI
Backgrounds, themes, and icons automatically adjust based on weather type (sunny, cloudy, rainy, etc.).
Smooth transitions between conditions for a better visual experience.
📱 5. Responsive Design
Fully optimized for mobile, tablet, and desktop screens.
Uses flexible layouts and media queries for a consistent experience across devices.
Alerts the user for:
Invalid or misspelled city names.
🧰 Tech Stack Layer Technology Frontend HTML5, CSS3, JavaScript (ES6) API OpenWeatherMap API
Icons OpenWeatherMap Icons / Custom SVGs Deployment GitHub Pages (optional) Tools VS Code, Git, Browser DevTools
⚙️ Installation & Setup
Follow these simple steps to run Weatherly on your local machine:
-
Clone the Repository git clone https://github.com/rayapatiravitheja/Weatherly.git
-
Navigate to the Project Directory
cd Weatherly
- Add Your OpenWeatherMap API Key
Open the script.js file.
Locate the variable that stores the API key:
const apiKey = "YOUR_API_KEY";
Replace "YOUR_API_KEY" with your personal key from OpenWeatherMap .
- Run the App
Simply open the index.html file in any modern browser. No server setup is required since it’s a client-side application.
Network or API errors.
Missing API key or expired key.
🗂️ Folder Structure Weatherly/ │ ├── index.html # Main HTML file ├── style.css # Styling for the app ├── script.js # Core JavaScript logic ├── icons/ # Weather icons and visual assets ├── screenshots/ # App preview images └── README.md # Project documentation
🖼️ Screenshots
🔮 Future Enhancements
Planned improvements include:
🌡️ Temperature unit toggle (°C ↔ °F)
⏰ Hourly forecast display
🕶️ Light/Dark mode theme
📊 Weather trend charts
📍 Saved city list
🌈 Animated weather backgrounds
🧠 Learning Goals
This project demonstrates:
API integration using fetch() in JavaScript
DOM manipulation and event handling
Responsive web design using media queries
Error handling and user feedback
Real-time data rendering without page reloads
📜 License
This project is licensed under the MIT License — free to use, modify, and distribute with attribution.