Skip to content
Submitted almost 2 years ago

Interactive rating component using css flex and js

Franklin kithaka•320
@frankbush-cloud
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey everyone,,I look forward for some feed back regarding improving my code

Community feedback

  • Adriano•39,130
    @AdrianoEscarabotePosted almost 2 years ago

    Hello Franklin kithaka, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number we can do this:

    rates.forEach((rate)=>{
  rate.addEventListener("click", ()=>{
    rating.innerHTML = rate.innerHTML;
    submitButton.addEventListener("click", ()=>{
      thanksContainer.classList.remove("hidden");
      mainContainer.style.display = "none";
    })
  })
})

    The remainder is excellent.

    I hope it's useful. 👍

    Marked as helpful
    0
    Franklin kithaka•320
    @frankbush-cloudPosted almost 2 years ago

    @AdrianoEscarabote Thanks

    0
  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    To improve your code, definitely start with using semantic HTML5 elements in your MarkUp (html). Not just <div> elements.

    About semantic elements

    Most of your errors in report are about that. This - "Document should have one main landmark" means just that, landmark means <main> semantic element. Also, this - "All page content should be contained by landmarks" means that no <div>s or other elements should be outside of those semantic elements, not directly inside of <body> element.

    About the headings. Headings are just <h1>, <h2>, <h3>... elements.

    Read more about headings

    Take a look, apply it, hope it helps!

    Marked as helpful
    0
    Franklin kithaka•320
    @frankbush-cloudPosted almost 2 years ago

    @SinisaVukmirovic Thanks

    0

Please log in to post a comment

Log in with GitHub

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