0% found this document useful (0 votes)
19 views

Sample CA 2 Questions

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views

Sample CA 2 Questions

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Build a simple counter application with buttons to increment and decrement a


value displayed on the screen.
2. Create a to-do list application where users can add new tasks, mark them as
complete, and filter by completed status.
3. Implement a real-time search component that filters a list of items based on user
input.

4. Develop a form that captures user information (name, email) and displays it back
after submission.
5. Fetch data from an API (e.g., weather data) and display it in a visually appealing
format.
6. Build a product card component that displays product details and allows users to
add the item to a shopping cart (using state management).

7. Create a component that displays a different message or UI element based on a


prop value (e.g., success/error message).
8. Implement a toggle switch component that changes its style and functionality
based on its state (on/off).
9. Build a dynamic list that renders different components for each item type (e.g.,
products, blog posts).

10. Create a custom hook that simplifies fetching data from an API and handling
loading/error states.
11. Develop a simple routing system using React Router to navigate between
different pages in your application.
12. Implement a photo carousel component that automatically transitions between
images with smooth animations.

Interactive Elements:

1. Greeting Component: Create a component that displays a greeting message ("Hello!")


that changes to "Goodbye!" when you click a button. (Uses state for interactivity)
2. Light Switch: Build a component that represents a light switch. Clicking it toggles
between a lit and unlit light bulb image. (Uses state to manage the switch state)

Data Display and Manipulation:

3. Number List: Create a component that displays a list of numbers (1-5). Clicking a
number changes the background color of the clicked item. (Uses state to keep track of
the selected number)
4. Simple Calculator: Develop a basic calculator component with buttons for addition,
subtraction, and displaying the current result. (Uses state to store the current value and
perform operations)
Conditional Rendering:

5. Login Form: Build a login form with username and password fields. Conditionally
display a success message if the username is "admin" and password is "secret".
6. Age Check: Create a component that asks for the user's age. Based on the input,
display a message like "Welcome!" (age >= 18) or "Sorry, you are too young" (age <
18).

Event Handling:

7. Color Picker: Implement a component with squares of different colors. Clicking a


square changes the background color of a separate display area. (Uses event handlers
on the color squares)
8. Image Gallery: Develop a simple image gallery where clicking on a thumbnail image
displays the larger version in a designated area. (Uses event handlers on the
thumbnails)

You might also like