Day 18 of 100days of code

First, I'm going to create an Exercise folder and then cd into it. In the Exercise folder, I'm going to create a new React app using Vite.

Exercise 1: Counter

In this exercise, your task is to create a simple Counter component that increments or decrements a number every time a button is clicked.

I'll Begin by cleaning up the App.jsx file and create a Counter component to render in it.

Solution:

2. Controlled Input Field

Create an input field component that allows a user to type in text and displays the text in real-time.

• Every time the user types something in the input field, the text should update in the text element

• You should use the useState hook to keep track of the text state

Solution:

3. Toggle Visibility

In this exercise, you're tasked with creating a component that toggles the visibility of a piece of text when a button is clicked. Expectations:

• Initially, the text should be hidden

• When the button is clicked, the text should become visible if it was hidden, and hidden if it was visible

• Use the useState hook to manage the visibility state

Solution:

4. Character Counter

Create a simple Character Counter component that allows users to type in text and displays the number of characters in real-time.

Expectations:

• Create a textarea element for users to type in text

• Display the character count below the textarea in real-time

• Use the useState hook to manage the text state.

Solution:

5. Todo List

In this exercise, you are tasked with creating a simple Todo List component that allows users to add new items to the list and delete items once they are completed. The Todo List should have the following features:

• An input field for adding new todo items

• A button to submit the new todo item

• Display the list of todo items

• A delete button next to each todo item to remove it from the list

• Use the useState hook to manage the todo list state

Solution:

6. Color Switcher

In this exercise, you are tasked with creating a simple Color Switcher component that allows users to change the background color of a div by selecting a color from a dropdown list.

Expectations:

• Create a dropdown list with a few color options (e.g., red, blue, green, yellow)

• When a color is selected from the dropdown, the background color of the div should change to the selected color

• Use the useState hook to manage the background color state.

Solution:

7. Search Filter

In this exercise, you are tasked with creating a simple Search Filter component that allows users to filter a list of items based on their search input.

Expectations:

• Create an input field for users to type in their search query

• Display the list of items and filter them based on the user's search input

• Use the useState hook to manage the search input state.

Solution: