Skip to content
Submitted 5 months ago

rating preview

NayyabAqib•650
@nayyabaqib
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I successfully completed this project using only HTML and CSS. It was a great experience that helped me improve my front-end development skills. If I were to do this project again, I would add JavaScript to make the component more interactive and enhance the user experience.

What challenges did you encounter, and how did you overcome them?

i faced some challenges with CSS positioning and properly aligning the elements. Responsive design and button interactions were also a bit tricky. To overcome these challenges, I studied documentation, watched online tutorials, and used CSS Flexbox and Grid to fix the alignment issues.

What specific areas of your project would you like help with?

Through this project, I learned how to design interactive UI elements and gained a better understanding of advanced CSS concepts like Flexbox and Grid. Additionally, I realized the importance of proper spacing and alignment for a good user experience. In the future, I plan to integrate JavaScript to add more interactive features.

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel Ayeni•1,240
    @Dannimations

    It looks like you've got a good handle on CSS. That's very good. What u need to do now is add the Java-script to add functionality.

    What I'd suggest is making the user's choice into a variable, let var userInput

    then implementing that variable in a p element in the html that changes with regard to the change in the user's choice, so that when the user clicks on something, it changes the userInput.

    You can always achieve this using event listeners

    Remember that you'll also need to get the id's of each of the buttons, and then call them in the JS file

    const buttonOne = doccument.getelementbyID('buttonOne')

    this is if the button one has an id of 'buttonOne'. You can do that for the rest of the buttons. Then add an event listener:

    buttonOne.addeventlistener('click', =>{ })

    and in the event listener, set the innertext of the p element to be the value of that particular button.

    I know it's a bit confusing, but a tutorial should help more :)

  • Fehmidatanzeel•570
    @Fehmidatanzeel

    awesome

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