https://github.com/myashavanth/styledotme
This single-page weather forecast application provides users with real-time weather details and a 5-day forecast for a selected city. The application is designed to be user-friendly, responsive, and includes additional features for enhanced user experience.
https://github.com/myashavanth/styledotme
css3 html5 javascript reactjs
Last synced: 2 months ago
JSON representation
This single-page weather forecast application provides users with real-time weather details and a 5-day forecast for a selected city. The application is designed to be user-friendly, responsive, and includes additional features for enhanced user experience.
- Host: GitHub
- URL: https://github.com/myashavanth/styledotme
- Owner: mYashavanth
- Created: 2024-01-12T18:52:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-14T11:53:20.000Z (over 2 years ago)
- Last Synced: 2025-10-03T17:57:37.562Z (8 months ago)
- Topics: css3, html5, javascript, reactjs
- Language: JavaScript
- Homepage: https://styledotme.vercel.app
- Size: 37.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Forecast Application
## Overview
This single-page weather forecast application provides users with real-time weather details and a 5-day forecast for a selected city. The application is designed to be user-friendly, responsive, and includes additional features for enhanced user experience.
## Features
1. **Search by City:**
- Users can enter a city name to view the current weather details, including temperature, humidity, wind speed, and weather description.
- The application displays an appropriate weather icon reflecting the current conditions.
2. **5-Day Forecast:**
- Users can view a 5-day forecast for the selected city, including date, average temperature, and weather description.
- Each day's forecast is accompanied by a corresponding weather icon.
3. **Unit Conversion:**
- The application supports both Celsius and Fahrenheit temperature units.
- Users can toggle between Celsius and Fahrenheit with a dedicated button, updating all temperature values accordingly.
4. **Location-Based Loading:**
- Upon page load, the application requests permission to access the user's location.
- If permission is granted, the map displays the current location's weather details; otherwise, it defaults to a predefined location (e.g., Delhi).
5. **Responsive Design:**
- The application is designed to be responsive, ensuring a seamless user experience across various screen sizes and devices.
6. **Temperature Unit Toggle Button:**
- A convenient toggle button allows users to switch between Celsius and Fahrenheit units effortlessly.
## Technical Details
### API Used
The application utilizes the [OpenWeatherMap API](https://openweathermap.org/) to fetch real-time weather data and forecasts for the specified city.
### Technologies Used
- HTML5
- CSS3
- JavaScript
- [OpenWeatherMap API](https://openweathermap.org/) for weather data
- Responsive design using media queries
### How to Run
1. Clone the repository to your local machine.
2. Open the `index.html` file in a web browser.
## Screenshots
*Weather details for a specified city Laptop View*
*Weather details for a specified city Mobile View*
## Demo
[Live Demo](https://styledotme.vercel.app/)
## Known Issues
- There might be occasional delays in fetching real-time data from the OpenWeatherMap API.
## Future Enhancements
- Include additional weather parameters such as pressure and visibility.
- Implement geolocation-based suggestions for city search.
- Provide an option for users to save their favorite cities.
Feel free to contribute to this project by forking and submitting a pull request. If you encounter any issues or have suggestions for improvement, please open an issue on the GitHub repository.
Enjoy the weather updates with our Weather Forecast Application!