Tutorial 2
Part 1
1. Make a list of recipes from this array! For each recipe in the array, display its name as an
<h2> and list its ingredients in a <ul>.
2. Create a LikeButton component that displays a button with the
initial text "0 Likes". With each click, the number of Likes should
increase.
Implement the background color change on each click. You can use
the following array of
colors: ['purple','blue','green','yellow','orange','red']
Example:
<LikeButton />
3. Create a ClickablePicture component that displays a picture. On
each click, the picture should toggle between the two images
passed through the props.
Example:
<ClickablePicture
img='[Link]'
imgClicked='[Link]'
/>
Expected Output:
4. Create a Carousel component that displays an image and two
buttons (Left and Right), which change the picture on each click,
respectively.
The component should take 1 prop:
images: An array of strings. Each string should be an image URL.
Example:
<Carousel
images={[
'[Link]',
'[Link]',
'[Link]',
'[Link]'
]}
/>
5. Create a NumbersTable component that displays a list of numbers
between 1 and the limit. Even numbers must be colored in red.
The component should take 1 prop:
limit: A number.
Example:
<NumbersTable limit={12} />
6. Develop a web application or widget that displays current weather
information in a compact format:
Show the current temperature, including units (Celsius or
Fahrenheit).
Provide a brief weather description (e.g., Sunny, Rainy, Clouds).
Optionally, include additional information like humidity, wind speed,
or forecast icons.
Part II
1. Create a web page which asks the user for the following information
and then prints the summary of the information on the same page.
2. Create a web page, which will allow the user to order pizza. Provide
validations for user input – email with @character, numbers for contact
number etc. Display the summary and a picture of the pizza ordered.
Limited images can be used for the broad category of the pizzas.
3. Create a SignupPage component with the following elements:
An input of type "email" (bonus: make the input green/red
when the email is valid/invalid)
An input of type "password" (bonus: make the input green/red
when the password is strong/weak)
A select input, used for selecting a nationality, with possible
options/values: "en", "de", "fr"
mparanjape@[Link]
A paragraph displaying "Hello", "Hallo" or "Bonjour" based on
the selected nationality
A text "Your email is john@[Link]"
For this, you will need 3 state variables:
email
password
nationality
If you want to include Bootstrap with Reactstrap, you should
run
npm install reactstrap bootstrap
And add the following line in src/[Link]
import 'bootstrap/dist/css/[Link]';
Example
<SignupPage />
Expected Output
4. Create a quiz application, which asks multiple choice questions to the
user. The application will start with questions at first and the score will
be displayed at the end, based on the answers provided by the user.
Initially there should be at least 5 questions but you can keep adding
more questions to make the quiz interesting.