Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kmonika26/react-usestate-hook


https://github.com/kmonika26/react-usestate-hook

Last synced: 3 days ago
JSON representation

Awesome Lists containing this project

README 

        
# REACT-USESTATE-HOOK



## State Management Techniques and useState Hook ##



#### 1. Color Picker



This is a simple interactive color picker application built with React. It allows users to input a HEX color value and see a live preview of the color. If the input is not a valid HEX color code, an error message is displayed.



## Features



1. Input field for entering HEX color values.

2. Live preview of the color based on the input value.

3. Error message for invalid HEX color codes.



## Technologies Used



1. React

2. JSX

3. JavaScript

4. HTML

5. CSS



## Setup



- Clone the repository:

    * git clone (https://github.com/KMONIKA26/REACT-USESTATE-HOOK/blob/main/Interactive%20colour%20picker.html)



- Install dependencies:

    * cd color-picker

    * npm install



- Run the application:

    * npm start



## Usage



1. Enter a valid HEX color code (e.g., #FF0000 for red) in the input field.

2. See the live preview of the color in the color preview box.

3. If the entered value is not a valid HEX color code, an error message will be displayed.



## License



This project is licensed under the `MIT License` - see the LICENSE file for details.



#### 2. Dynamic Form with React useState Hook



## Overview



This project demonstrates the use of React's `useState` hook to create a dynamic form that allows users to add or remove input fields for entering multiple hobbies. The form maintains an array of hobbies as its state and provides functionality to add new hobbies, remove existing ones, and submit the form data.



## Features



- Initial Form State: Start with a single input field for entering a hobby.

- Dynamic Input Fields: Add or remove input fields for hobbies as needed, except for the first input field.

- State Management: Uses the `useState` hook to manage the array of hobbies.

- Form Submission: Logs the array of hobbies to the console when the submit button is clicked.

- User-Friendly UI: Provides clear indications for adding/removing inputs and a visible submit button.



## Usage



1. Clone the repository or download the project files.

2. Open the project in your preferred code editor.

3. Run `npm install` to install the necessary dependencies.

4. Start the development server with `npm start`.

5. Open your web browser and navigate to `http://localhost:3000` to view the application.



## Implementation Details



The `HobbyForm` component manages the state of the hobbies array using the `useState` hook. It renders input fields for each hobby in the array and provides buttons to add new hobbies or remove existing ones. The form also includes a submit button that logs the array of hobbies to the console when clicked.



## Technologies Used



- React

- JavaScript

- JSX

- CSS



## License



This project is licensed under the `MIT License` - see the [LICENSE](LICENSE) file for details.



#### 3. Interactive Quiz Application



This project is an interactive quiz application built with React. It demonstrates the use of React functional components and state management using the useState hook. The application allows users to answer multiple-choice questions, submit their answers, view their score, and restart the quiz.



## Table of Contents



1. Overview

2. Features

3. Setup and Installation

4. Usage

5. License



## Overview



- The interactive quiz application includes:



    1. A series of multiple-choice questions.

    2. State management for selected answers and the final score using the useState hook.

    3. Form submission to calculate and display the user's score.

    4. Functionality to restart the quiz after submission.



## Features



React Functional Components: The application is built using React functional components.

State Management: Utilizes the useState hook for managing quiz answers and score.

Form Handling: Handles user input and form submission to calculate and display the quiz score.

Quiz Restart: Allows users to restart the quiz after viewing their score.



## Setup and Installation



1. Prerequisites: Ensure you have a modern web browser (e.g., Google Chrome, Firefox, Safari).

2. Text Editor: Use any text editor of your choice (e.g., VS Code, Sublime Text, Atom).

3. Clone the Repository: (Assuming you have a repository)

    * git clone: (https://github.com/KMONIKA26/REACT-USESTATE-HOOK/blob/main/Interactive%20Quiz%20Application.html) 



## Usage



Open the index.html file in your web browser to view and interact with the quiz application.



## License



This project is licensed under the `MIT License`.



#### 4. Todo List Application



This is a simple Todo List application built using React. It allows users to add new tasks, mark tasks as completed, and remove tasks. The application also provides filtering functionality to view all tasks, only active tasks, or only completed tasks.



## Features



- Add new tasks

- Mark tasks as completed

- Remove tasks

- Filter tasks by status (All, Active, Completed)

- User-friendly interface



### Prerequisites



- A modern web browser (Google Chrome, Firefox, Safari, etc.)

- A text editor (VS Code, Sublime Text, Atom, etc.)



## Usage



- **Add a Task:**

  - Type a task into the input field and click the "Add Task" button.



- **Mark a Task as Completed:**

  - Click on a task to toggle its completion status. Completed tasks will be displayed with a line-through style.



- **Remove a Task:**

  - Click the "Remove" button next to a task to delete it from the list.



- **Filter Tasks:**

  - Use the "All", "Active", and "Completed" buttons to filter the displayed tasks based on their completion status.



## Built With



- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.

- [Babel](https://babeljs.io/) - A JavaScript compiler.



## License



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.



## Contributing



Contributions are welcome! Please fork the repository and submit a pull request with your changes.



## Credits



This project was created by [K MONIKA]. You can find me on [https://github.com/KMONIKA26].