Weather App

A React-based web application that allows users to search for and view current weather information for a specific city. It fetches weather data from the OpenWeatherMap API and displays relevant details such as the city name, temperature, climate, and an icon representing the current weather conditions.

Features

• User input field to enter a city name
• Fetches weather data from the OpenWeatherMap API based on the entered city
• Displays the city name, temperature, climate, and an icon representing the current weather conditions
• Shows the current date and time, updating every second
• Handles loading and error states during the API request
• Responsive design for optimal viewing experience on different devices

Technologies Used

• React
• React Hooks (useState, useEffect)
• OpenWeatherMap API
• react-icons library

Demo

Live Demo

Prerequisites

• Node.js (>=14.0.0)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/weather.git

2. Navigate to the project directory:

   cd weather

3. Install the dependencies:

   npm install

   or

   yarn install

4. Create a .env file in the root directory and add your OpenWeatherMap API key:

   REACT_APP_API_KEY=your_openweathermap_api_key

Running the App

1. Start the development server:

   npm start

   or

   yarn start

2. Open your browser and navigate to http://localhost:3000 to see the application in action.

Usage

1. Enter the name of a city in the input field.
2. Click the "Go" button to fetch the weather data for the entered city.
3. The app will display the current weather information, including the city name, temperature, climate, and an icon representing the weather conditions.
4. The current date and time will be displayed and updated every second.

Project Structure

• src/
  • components/
    • WeatherInput.jsx
    • WeatherStatus.jsx
    • WeatherInfo.jsx
  • image/
    • ...
  • App.js
  • index.js
  • styles.css
  • WeatherApp.jsx

Components

• WeatherApp: The main component that manages the state and contains the logic for fetching the weather data.
• WeatherInput: A component for the input field and button.
• WeatherStatus: A component for displaying loading and error messages.
• WeatherInfo: A component for displaying the weather information.

Acknowledgements

• OpenWeatherMap
• React Icons
• Weather App by Ali Turkaman