Skip to content
Submitted about 2 years ago

Interactive rating component using basic Css and Javascript.

Atul kumar•200
@AtulKumar0001
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Updated the javascript code so that no one can submit before rating.

Community feedback

  • yishak abrham•2,150
    @yishak621Posted about 2 years ago

    Hey congrats for completing the project ...my first comment will be the rating card is not responsive for small screens so test for the Small screens and fix it ...and also if the user didn't click on the submit btn the result card shouldn't be open...and also i didn't understand ur question do u want to center the elements vertically or horizontally ???

    0
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    @yishak621 Thanks for your reply. I just remembered that I have to add media queries as well, and my question is why I am unable to center elements horizontally using justify-content:center; in the body. And without pressing the submit button, the result card is not opening.

    0
    yishak abrham•2,150
    @yishak621Posted about 2 years ago

    @AtulKumar0001 sorry i want to say that without selecting the rating btn(number)

    0
    yishak abrham•2,150
    @yishak621Posted about 2 years ago

    @AtulKumar0001 ok so in the body create a main container that holds the card so that u can center it or add any property as u can for example ....

      <body> 
     <main class="main-container">......

    Css

    /*main container*/ 
 .main-container { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   height: 100vh; 
   background-color: var(--color-very-dark-blue); 
 }
    0

Please log in to post a comment

Log in with GitHub

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