A high-performance, responsive feedback component featuring a seamless state transition between rating selection and "Thank You" confirmation. Built with a focus on Type-Safe DOM manipulation and modular SCSS.
- Logic Engine: TypeScript ensures strict type-safety for DOM element selection and event handling.
- State Management: Dynamic UI updates handled via JavaScript/TypeScript to transition between the rating and success states without a page reload.
- Styling Architecture: Modular SCSS following the BEM (Block Element Modifier) methodology for component encapsulation.
- Modern CSS: Utilises CSS Grid for circular button alignment and Flexbox for centring layout distribution.
- Accessibility: ARIA-compliant interactive states and high-contrast hover/active feedback for improved user experience.
Unlike static components, this interactive piece relies on robust logic to handle user input:
- Dynamic DOM Swapping: Implemented a logic layer that listens for submission, captures the selected value, and injects it into the "Thank You" state while toggling component visibility.
- Input Validation: TypeScript ensures the submission handler only executes when a valid rating has been selected, preventing empty or erroneous states.
- Event Delegation: Optimised event listeners to handle rating selections with minimal performance overhead.
The visual architecture is engineered for integration and performance:
- BEM Methodology: Encapsulates styles within the
.rating-cardblock, preventing style "leakage" when used within larger applications. - Hover & Active States: Custom-engineered transitions for the rating circles, providing clear visual affordance and immediate feedback to user interaction.
- Mobile-First Responsiveness: Utilises a fluid layout approach that gracefully scales the card dimensions and typography for mobile and desktop viewports.
- Layout Engine: Leveraging CSS Grid to manage the 1-through-5 rating scale, ensuring perfect circular geometry and spacing.
- Contrast & Legibility: Designed to meet WCAG standards for text and interactive element contrast, ensuring usability across various lighting conditions.
- Live Site: https://interactive-rating-component.seanbuckle.com
- Source Code: https://github.com/seanbuckle/interactive-rating-component
To run this project locally:
- Clone the repository:
git clone https://github.com/seanbuckle/interactive-rating-component.git- Navigate to the directory:
cd interactive-rating-component- Open the project: Simply open
index.htmlin your preferred browser.
Sean Buckle
Frontend Mentor Profile LinkedIn
This project is licensed under the MIT License - see the LICENSE file for details.
Note: This project was built as a solution to a Frontend Mentor challenge.