Submitted almost 2 years ago

Daniel Daporta Rate Component

#jquery

Daniel Daporta• 110

@Daporta

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project? to active one button at a time

Which areas of your code are you unsure of? I would like to know if my code is efficient.

Do you have any questions about best practices? I would like to know how a high-level developer would solve the request.

Community feedback

Elaine• 11,420

@elaineleung

Posted almost 2 years ago

Hi Daniel, congratulations on completing your first challenge, and welcome to Frontend Mentor! 😊

This looks excellent for a first challenge, and looking at your code, I see that it's quite efficient, and variables are clearly named as well, so well done!

Two things you can consider:

Right now when I click the submit button without clicking on a rating, I still get the thank you page with a score of 0. Try seeing whether you can write some logic to prevent a user from submitting without a score.
I'd suggest decreasing the white space surrounding the span tag in the selected score for the Thank You box.

In case you're interested, I made some CodePens as examples of different approaches:

With a disabled button: https://codepen.io/elaineleung/pen/GRxBNpE
With an alert box: https://codepen.io/elaineleung/pen/xxWzZPv
Inactive until button selected https://codepen.io/elaineleung/pen/poLZrqK

Well done once again, and hope this gives you some ideas on what you can do!

Adarsh Rai• 560

@AdarshRai0

Posted almost 2 years ago

Hi Daniel, congratulations on your new challenge! You had done a great job !!! I took a look at your code and I have some tips for you. To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Document should have one main landmark

Context: <html lang="en">

All page content should be contained by landmarks div to Footer

Context:

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Daniel Daporta</a>.
  </div>

<footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Daniel Daporta</a>.
  </footer>

Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

<div class="starLogo">
      <span class='starBackground'>
        <div class="starImgHolder">
          <img src='./images/icon-star.svg' alt="" />
        </div>
      </span>
    </div>

Please log in to post a comment

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