Objective: Create an application that recommends clothing based on the weather conditions.

Description: In this project, you will build a simple application that shows different clothing recommendations based on the current weather conditions. The app will render different outfits for sunny, rainy, snowy, and windy weather.

Instructions:

1. Setup Your Project:
   • Create a new React project using Vite.
   • Set up your project structure with a main <strong>App</strong> component and a <strong>WeatherWardrobe</strong> component.
2. Define Weather Conditions:
   • In the <strong>WeatherWardrobe</strong> component, create a piece of state to store the current weather condition.
   • Use a variable or hard-coded value for now (e.g., 'sunny', 'rainy', 'snowy', 'windy').
3. Render Different Outfits:
   • Based on the weather condition, render different outfits.
   • Use conditional rendering to show different images or descriptions for each weather type.
4. Styling:
   • Add some basic CSS to style your wardrobe items and make the app visually appealing.

Example Code:

import React, { useState } from 'react';
import './WeatherWardrobe.css';

function WeatherWardrobe() {
  const [weather, setWeather] = useState('sunny');

  let outfit;
  if (weather === 'sunny') {
    outfit = <div className="outfit">🌞 Wear sunglasses and a t-shirt!</div>;
  } else if (weather === 'rainy') {
    outfit = <div className="outfit">🌧️ Don't forget your umbrella and raincoat!</div>;
  } else if (weather === 'snowy') {
    outfit = <div className="outfit">❄️ Bundle up with a warm coat and gloves!</div>;
  } else if (weather === 'windy') {
    outfit = <div className="outfit">🌬️ A windbreaker and scarf will keep you cozy!</div>;
  }

  return (
    <div className="weather-wardrobe">
      <h1>Weather Wardrobe</h1>
      <div className="outfit-container">
        {outfit}
      </div>
    </div>
  );
}

export default WeatherWardrobe;

Styling (WeatherWardrobe.css):

.weather-wardrobe {
  text-align: center;
  font-family: Arial, sans-serif;
}

.outfit-container {
  margin-top: 20px;
}

.outfit {
  font-size: 24px;
  margin-top: 20px;
}

Detailed Walkthrough:

1. Setting Up the Project:
   • Use the command <strong>npm create vite@latest weather-wardrobe --template react</strong> to create a new Vite React project.
   • Navigate to your project directory and install the necessary dependencies using <strong>npm install</strong>.
2. Creating the <strong>WeatherWardrobe</strong> Component:
   • Create a new file named <strong>WeatherWardrobe.jsx</strong>.
   • Import <strong>useState</strong> from React and define the <strong>WeatherWardrobe</strong> function component.
3. Implementing Conditional Rendering:
   • Initialize the state for the current weather condition using <strong>useState</strong>.
   • Use conditional rendering (if-else statements or ternary operators) to render different outfits based on the weather condition.
4. Styling Your Application:
   • Create a CSS file named <strong>WeatherWardrobe.css</strong>.
   • Add basic styles to center your content and style the outfit recommendations.
5. Testing Your Application:
   • Test the application by manually changing the weather condition state and observing the rendered outfits.

By completing this project, you'll get hands-on experience with conditional rendering in React, making your learning experience both fun and practical.