Skip to content

README.md

Latest commit

 

History

History
123 lines (89 loc) · 4.87 KB

README.md

File metadata and controls

123 lines (89 loc) · 4.87 KB

Frontend Mentor - Interactive rating component solution

This is my React solution to the Interactive rating component challenge on Frontend Mentor.

Note: I originally created this project in Vanilla JS and then completely refactored it to React to practice working with components and hooks.

Table of contents

Overview

The challenge

In this version, I focused on the transition from manual handling of the DOM to declarative programming in React. Users should be able to:

  • Choose a review (1-5)
  • Send rating by clicking on "Submit" (with protection against empty selection)
  • See "Thank you" tab with the selected number displayed
  • Go back to the selection via the "Thank You" button (Reset status)

Screenshot

Screenshot of the Solution

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties (Variables)
  • Flexbox & Responsive design (Clamp function)
  • React - JS Library
  • Vite - Frontend Tooling
  • Mobile-first workflow

What I learned

The main benefit of this project was understanding how React "thinks" through states. I no longer need to look for elements in HTML, just adjust the data in the "box" (state) and React itself repaints what needs to be done.

1. State Management (useState) I learned how to use hook useState to track user selection and to switch between two screens (Rating vs. Thank You).

const [isRating, setIsRating] = useState(null); 
const [isSubmit, setIsSubmit] = useState(false);

2. Array Mapping Instead of manually writing five buttons, I used the .map() method. This makes the code cleaner and easier to maintain.

{number.map((number) => (
    <button 
        key={number} 
        onClick={() => setIsRating(number)}>{number}
    </button>
))}

3. Conditional Classes I learned how to dynamically add a CSS class (e.g. .active) based on the current status:

className={`btn ${isRating === number ? 'active' : ''}`}

4. Data Protection (Validation) I have implemented a simple logic that prevents blank evaluation from being sent using the alert() window if the state is null.

else {
    alert("Please select a rating before submission!") 
}

Continued development

In the next steps, I want to focus on:

  • Components partition: Break one large file into smaller (e.g. RatingCard.jsx and ThankYouCard.jsx).
  • Framer Motion: Add fine animations when switching between cards.
  • Tailwind CSS: Try styling using a utility-first framework within React.

Useful resources

  • Variable Fonts Guide (MDN) - This guide helped me understand how to implement the Work Sans variable font and control font weights dynamically.
  • BEM Methodology - Using BEM helped me keep my CSS organized and avoid naming conflicts, which is crucial for larger projects.
  • Clamp Generator – This tool was essential for calculating fluid values for my layout, allowing the design to scale perfectly between mobile and desktop.
  • CSS Flexbox Layout Guide – This is my go-to reference for Flexbox. It helped me perfectly align the icons and headings within the accordion buttons.

AI Collaboration

This project was created in intensive cooperation with the AI Assistant (Gemini).

  • Refactoring: AI has helped me understand the difference between importing React and direct importing hooks.
  • Debugging: Together we solved the mystery of the paths to the pictures in Vita (importing assets vs. public folder).
  • Best Practices: AI guided me when using semantic tags like and name conditions correctly.

Author

Acknowledgments

I would like to thank the Frontend Mentor community for providing such great challenges to practice real-world web development skills.