yogeshtakeo commented 11 months ago

Full Stack Development Bootcamp - Weather Changing App

Task Description

In this task, you will build a weather UI application using React and the useState hook. The goal is to practice React component creation, state management, and dynamic UI rendering based on weather conditions. This task does not involve asynchronous data fetching.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js (at least version 14.0.0)
npm (Node Package Manager)
A code editor

Task Steps

Step 1: Set Up a React Project

Create a new React project directory for your weather app. You can use create-react-app or any similar tool.
Navigate to your project directory:
```
cd my-weather-app
```

Step 2: Create the Application Components

Create a new functional React component named WeatherApp in a suitable directory (e.g., src/components).
Inside WeatherApp, set up the initial state to store weather data (e.g., temperature, description, city name) and the current weather condition (e.g., sunny, rainy, cloudy). You can use the useState hook for this.
Render placeholders for the weather information (e.g., temperature, description) along with the city name.

Step 3: Define UI Elements for Weather Conditions

Create separate UI elements (e.g., images, icons, background colors) for different weather conditions. For example, you can have different images/icons for sunny, rainy, and cloudy weather.
Based on the current weather condition in your state, dynamically render the corresponding UI element in your WeatherApp component. For instance, if it's sunny, display a sun icon and a bright background; if it's rainy, display a raindrop icon and a rainy background.

Step 4: Style Your Application

Use CSS to style your WeatherApp component, including the UI elements for different weather conditions. Apply styles to make the application visually appealing and user-friendly.
Ensure that the styling complements the UI elements representing different weather conditions.

Step 5: Test Your Application

Start the development server by running:
```
npm start
```
Open your web browser and navigate to http://localhost:3000 to see your Weather UI app in action.
Verify that the UI elements change based on the weather condition and that the styling enhances the user experience.

Step 6: Documentation

Document the steps you took to build the Weather UI app, including any external libraries used, any additional features implemented, and how you handled different weather conditions.