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 JavaScript

Hale 330

@halelite

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


any tips on how to write my code more efficiently would be appreciated.

Community feedback

@yefreescoding

Posted

After checking out your solution, I have to say it looks pretty good. Everything works as expected, and the design is almost identical to the original. Just a couple of tips to make your code more semantic, accessible, and better structured.

  • <div> tags are super useful, but you should only use them in very specific situations. There are semantic tags that would make your code more readable and accessible. A good practice would be changing:
<div class="rating-section content-container">

for a:

<main class="rating-section content-container"></main>
  • Other case where you should change <div> tags in your code will be this one:
<div class="buttons">
<div id="1" class="btn">1</div>
<div id="2" class="btn">2</div>
<div id="3" class="btn">3</div>
<div id="4" class="btn">4</div>
<div id="5" class="btn">5</div>
</div>
<button type="submit">Submit</button>
  • Notice that this component, at first glance, isn't very clear about what it is meant to do. There's a <div> container and five more <div> elements inside of it, which does not make too much sense. A good way to make this component more semantic, accessible, and well-structured is like this:
<form id="form" class="buttons_container">
<div class="btn">
<input type="radio" value="1" name="oneStar" class="radio_input" checked>1</input>
<label for="oneStar">Huey</label>
</div>
<div class="btn">
<input type="radio" value="2" name="twoStar" class="radio_input">1</input>
<label for="oneStar">Huey</label>
</div>
<div class="btn">
<input type="radio" value="3" name="threeStar" class="radio_input">1</input>
<label for="oneStar">Huey</label>
</div>
<div class="btn">
<input type="radio" value="4" name="fourStar" class="radio_input">1</input>
<label for="oneStar">Huey</label>
</div>
<div class="btn">
<input type="radio" value="5" name="fiveStar" class="radio_input">1</input>
<label for="oneStar">Huey</label>
</div>
<button type="submit">Submit</button>
</div>

Of course, this will require you to do some tweaks to your JavaScript and CSS to make it work and look good. But these are just some examples of how you should approach this type of challenge.

Overall, you're going in the right direction. Keep it up!

Marked as helpful

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