-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5ff90c5
commit 6c717c9
Showing
1 changed file
with
45 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
# Daily Weather Web App | ||
|
||
## Description | ||
|
||
The **Daily Weather Web App** is a web application that fetches and displays weather data dynamically from the [WeatherAPI](https://www.weatherapi.com/). Built using HTML, CSS, and JavaScript, this app allows users to search for a city's weather, view current conditions, and access a 24-hour forecast with intuitive navigation. | ||
|
||
## Features | ||
|
||
- **Search Functionality**: Search for any city to get the current weather and a 24-hour forecast. | ||
- **Dynamic Weather Data**: Displays temperature, weather condition, precipitation, and cloud cover. | ||
- **24-Hour Forecast**: View detailed hourly forecasts with navigation arrows to browse through the data. | ||
- **Error Handling**: Meaningful error messages are displayed if the API request fails. | ||
- **Responsive Design**: Optimized for various screen sizes and devices. | ||
|
||
## Requirements | ||
|
||
1. **API**: Use [WeatherAPI](https://www.weatherapi.com/) for fetching weather data. | ||
2. **Technologies**: HTML, CSS, and JavaScript. | ||
3. **Data Retrieval**: Implement JavaScript `fetch()` for API calls. | ||
4. **Data Display**: Ensure data is well-formatted and easy to understand. | ||
5. **User-Friendly Features**: Include search functionality and future forecast with sorting options. | ||
6. **Error Handling**: Display meaningful error messages for API request failures. | ||
7. **Performance Optimization**: Ensure good load times and responsiveness. | ||
|
||
## How to Use | ||
|
||
1. **Search for Weather**: | ||
- Enter a city name in the search input field. | ||
- Click the "Search" button to fetch weather data. | ||
|
||
2. **View Forecast**: | ||
- Use the left and right arrow buttons to navigate through the 24-hour forecast. | ||
- The back button, positioned outside the forecast box, allows you to clear the search and refresh the app. | ||
|
||
## Live Demo | ||
|
||
You can view the live application here: [Daily Weather Web App](https://tonmoy7722.github.io/Daily-Weather/). | ||
|
||
## Installation | ||
|
||
To run this application locally: | ||
|
||
1. Clone the repository: | ||
```bash | ||
git clone https://github.com/tonmoy7722/Daily-Weather.git |