Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive-rating-component using HTML, vanilla CSS and JS

shalomkerryā€¢ 260

@shalomkerry

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


getting the interactivity was the difficult part. It took sometime but I managed. Would be nice to get your comments on how you handle buttons.

Community feedback

Marcos Travagliniā€¢ 4,920

@Blackpachamame

Posted

Greetings! you have done a great job šŸ˜Ž

šŸ“Œ Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="ratingbox"> to a <main class="ratingbox"> and the <div class="attribution"> to a <footer class="attribution">

šŸ“Œ Some suggestions

  • This looks too small, you can barely see what the content says
  • Instead of using position to center your content in the center of the screen, you can use the flexbox properties in the body:
body {
    background: #141519;
    font-family: 'Overpass';
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Separate the main from the footer */
}

Marked as helpful

1

shalomkerryā€¢ 260

@shalomkerry

Posted

@Blackpachamame thank you for your suggestions. On the screenshots its makes it really small when I go diretly to the site tho it function well. I am gonna use the body to center it and see if their are changes with the screen shots

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord