Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yevheniidatsenko/goit-react-woolf-hw-02-feedback
⚛️ React Hometask - Feedback Widget
https://github.com/yevheniidatsenko/goit-react-woolf-hw-02-feedback
css goit goit-react-woolf-hw-02-feedback javascript react
Last synced: 5 days ago
JSON representation
⚛️ React Hometask - Feedback Widget
- Host: GitHub
- URL: https://github.com/yevheniidatsenko/goit-react-woolf-hw-02-feedback
- Owner: yevheniidatsenko
- Created: 2024-02-11T18:08:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-11T21:41:19.000Z (10 months ago)
- Last Synced: 2024-02-12T19:59:04.166Z (10 months ago)
- Topics: css, goit, goit-react-woolf-hw-02-feedback, javascript, react
- Language: HTML
- Homepage: https://yevheniidatsenko.github.io/goit-react-woolf-hw-02-feedback/
- Size: 2.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Feedback Widget
This project is a simple feedback widget for collecting and displaying feedback
from customers of a cafe. It allows users to leave feedback categorized as
either good, neutral, or bad. The application provides statistics on the
collected feedback, including the total number of responses, the breakdown by
category, and the percentage of positive feedback.## Functionality
- Allows users to leave feedback as good, neutral, or bad.
- Displays the number of responses for each feedback category.
- Shows the total number of responses and the percentage of positive feedback.
- Provides a notification if there is no feedback yet.
- State management is handled in the root component ``, with feedback
statistics and options rendered in separate components.
- Utilizes helper methods for calculating total feedback and positive feedback
percentage.## Components
- ``: Root component managing the application state.
- ``: Renders a section with a title and children.
- ``: Renders buttons for leaving feedback.
- ``: Displays feedback statistics.
- ``: Displays a notification if there is no feedback yet.## Installation
1. Clone the repository.
2. Navigate to the project directory.
3. Run `npm install` to install dependencies.
4. Run `npm start` to start the development server.
5. Access the application in your browser at `http://localhost:3000`.## Usage
1. Click on the buttons labeled as 'Good', 'Neutral', or 'Bad' to leave
feedback.
2. View the updated statistics displayed below the feedback buttons.## Credits
This project was created as part of a coding challenge or educational exercise.
Feel free to contribute or use it for learning purposes.