Daily Weather Web App

Description

The Daily Weather Web App is a web application that fetches and displays weather data dynamically from the WeatherAPI. 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 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.

Installation

To run this application locally:

1. Clone the repository:

   git clone https://github.com/tonmoy7722/Daily-Weather.git

2. Open the index.html file in your browser to view the application locally.

Usage

To use the Daily Weather Web App:

1. Open the web application.
2. Enter the name of a city or location in the search bar.
3. Click the Search button to retrieve and display weather data.
4. Use the arrows in the 24-hour forecast section to navigate through the hourly forecast.
5. If you're done viewing the forecast, click the Back button to return to the search interface.

Screenshots

Contact

Tonmoy Day Sarkar

• GitHub: @Tonmoy7722
• Email: Your Email