Frontend Mentor - Interactive rating component solution

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned about using pseudo-selectors to apply styles and the importance of the `name` and `value` attributes in radio buttons.

<input type="radio" id="option1" name="option" value="1">
<label for="option1">1</label>

<input type="radio" id="option2" name="option" value="2">
<label for="option2">2</label>

input[type="radio"]{
    display: none;
}
input[type="radio"]:checked + label{
    background-color: var(--Orange);
    color: var(--DarkBlue);
}

I implemented a validation mechanism that requires the user to choose an option before proceeding. If no option is selected, an alert message is shown.

if (!optionSelected) {
        alert("Please choose an option");
    } else {
        raitingState(optionSelected.value)
        document.body.classList.add('hide');
    }

Continued development

Advanced CSS Techniques:

I want to explore more advanced pseudo-selectors and combinators. I also aim to learn about CSS Grid and Flexbox to handle more complex layouts.

JavaScript Enhancements:

I plan to practice handling different user inputs and validation scenarios. I want to refine my understanding of JavaScript events and form handling.

Accessibility Improvements:

I need to ensure that my forms and interactive elements are accessible to all users, including those using assistive technologies.

Responsive Design:

I’ll work on making my designs responsive to different screen sizes and devices.