Weatherri is a modern, single-page weather application that provides real-time weather information for cities worldwide.
The project emphasizes clean UI design, smooth user experience, and efficient API consumption using vanilla web technologies.
Designed as a single-file application, Weatherri is lightweight, fast, and ideal for static hosting and portfolio showcasing.
- Real-time weather data by city name
- Current temperature and feels-like temperature
- Weather condition with icon
- Humidity and wind speed
- Modern glassmorphism user interface
- Animated gradient background
- Responsive design for all screen sizes
- Keyboard support (Enter key search)
- Loading indicator during API calls
- Graceful error handling
- HTML5 — semantic structure
- CSS3 — animations, glassmorphism, responsive layout
- JavaScript (ES6) — API handling and DOM manipulation
- WeatherAPI — live weather data
weatherri.html
The entire application (HTML, CSS, JavaScript) is implemented in a single file for simplicity and portability.
- Provider: WeatherAPI
- Endpoint Used:
https://api.weatherapi.com/v1/current.json
- Data Retrieved:
- Temperature
- Feels-like temperature
- Weather condition & icon
- Humidity
- Wind speed
⚠️ For production usage, replace the API key with your own.
- Clone the repository:
git clone https://github.com/kaifshaikh786/weatherri.git
Open the application:
weatherri.html
Enter a city name to view current weather information.
No dependencies or build steps required.
Deployment
Weatherri can be deployed on any static hosting platform:
GitHub Pages
Netlify
Vercel
Cloudflare Pages
Simply upload the weatherri.html file.
Author
Mohammad Kaif Shaikh
Offensive Security Researcher & Analyst
Frontend Developer
GitHub: https://github.com/kaifshaikh786
Portfolio:https://kaifshaikh786.github.io
License
This project is licensed under the MIT License.
Free to use, modify, and distribute for personal and educational purpose