Submitted 2 months ago

Interactive Rating Component using HTML, CSS, and JavaScript

Selasi•100

@Sussana7

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

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

I am most proud of how I was able to create a seamless user experience, where the user selects a rating, submits it, and then sees a personalized thank-you message. The JavaScript functionality combined with clean styling helped me achieve a polished final product. If I were to do this again, I would improve accessibility features.

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

One challenge I faced was ensuring the images would display properly on the hosted site after deployment. After some troubleshooting, I realized the issue was related to incorrect file paths. I corrected the paths and ensured they matched the structure of my deployed project.

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

I would like help with improving the accessibility of my project. Specifically, I want to ensure that all interactive elements are keyboard accessible and that screen readers can clearly describe the content.

Code

Please log in to post a comment

Community feedback

Marzia Jalili•8,410
@MarziaJalili
Posted 2 months ago
Fantasticoo! 💯

✅ In order to move the attribution to the bottom of the card consider the following:

1️⃣ Make sure that the body element has only one child element by wrapping it with the main element:
```
<body>
  <main>
    
  </main>
</body>
```
2️⃣ Now, in css change flex-direction to column. And you have the job done, buddy.

😎😎😎
Marked as helpful

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