Open yogeshtakeo opened 11 months ago
Name: Bikalp Timalsina
Task 13: Weather Changing App
Git URL: https://github.com/Youngbikalp/task13_weatherApp_Manoj/tree/master
Name: Narayan Adhikari
Task 13: Weather Changing App
URL: https://github.com/Narayanadhikari9/task13_weatherApp-Monoj/tree/master
Name: Santona Subedi
Team: 4
github repo: https://github.com/sansubed/ReactViteAppTask13.git
Name: Manoj Basnet Task:13 Weather app GitHub: https://github.com/mbasnet123456/task13_weatherApp.git
Task 13
weather app
Chij Team1 Shanti Task 13 Weather changing App
Name: Anil Timalsina Task 13: Weather Changing App Github Link : https://github.com/aniltimalsina/weather-changing-app.git
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:
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:
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 theuseState
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:
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