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 basic Css and Javascript.

Atul kumar 200

@AtulKumar0001

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


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

Community feedback

yishak abrham 2,150

@yishak621

Posted

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

@AtulKumar0001

Posted

@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

@yishak621

Posted

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

0
yishak abrham 2,150

@yishak621

Posted

@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
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