☕ Homework 2 — Feedback Widget (Events & Component State)

This project is part of the React homework series and focuses on events handling, component state, and state persistence. The application collects user feedback for Sip Happens Café and displays statistics based on user interaction.

---

📌 Repository Information

• Repository name: goit-react-hw-02
• Technologies: React, Vite
• Deployment: Vercel

The homework submission includes two links:

• GitHub repository with source code
• Live deployed version on Vercel

---

🎯 Project Goal

• Practice React events handling
• Work with component state (useState)
• Implement conditional rendering
• Persist application state using localStorage

---

🛠️ Technologies & Concepts Used

• React — Component-based UI
• Vite — Project setup and build tool
• useState — Managing component state
• useEffect — Synchronizing state with localStorage
• Events — Handling user interactions
• Conditional Rendering — Showing UI based on state
• CSS Modules — Component-scoped styling
• Prettier — Code formatting

---

🖥️ Application Description

☕ Sip Happens Café

Please leave your feedback about our service by selecting one of the options below.

The application collects feedback in three categories:

• Good
• Neutral
• Bad

---

🧩 Component Structure

All components are rendered inside the App component. Each component has its own folder inside src/components.

src/
 └── components/
     ├── Description/
     │   ├── Description.jsx
     │   └── Description.module.css
     ├── Options/
     │   ├── Options.jsx
     │   └── Options.module.css
     ├── Feedback/
     │   ├── Feedback.jsx
     │   └── Feedback.module.css
     └── Notification/
         ├── Notification.jsx
         └── Notification.module.css

---

🪜 Implementation Steps

Step 1 — Feedback State

• Create state in App to store feedback counts
• Initialize state with good, neutral, and bad set to 0

Step 2 — Events & State Updates

• Implement updateFeedback(feedbackType)
• Pass the function to the Options component
• Update state when buttons are clicked

Step 3 — Conditional Rendering

• Calculate total feedback
• Render Feedback only when feedback exists
• Show Notification if no feedback is given

Step 4 — Reset Button

• Add a Reset button inside Options
• Reset feedback state to initial values
• Display Reset button only when feedback exists

Step 5 — Statistics

• Display total feedback count
• Calculate and show positive feedback percentage

Step 6 — State Persistence

• Save feedback state to localStorage
• Restore state on page reload
• Initialize state with stored data or default values

---

📌 Final Notes

The application works without console errors or warnings. All components use default exports, clean JavaScript code, and optional styling with CSS Modules.

This homework demonstrates a solid understanding of React events, component state management, and basic application persistence.

Happy coding! 🚀