Skip to content
Submitted about 2 years ago

Interactive rating component

Sarah Hassan•145
@sarah27h
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

Hi alI,
I have some questions about best practices. 1- For the icon alt attribute, I have added it like that but for the other image I have left it blank

<img src="./images/icon-star.svg" alt="rating star" class="card__icon">

<img src="./images/illustration-thank-you.svg" alt="" class="card__img">

Should I have used SVG instead of img tag?

2- I have added an event listener on ul and another one for submit button Is it better to use only one on the out container and then check the target one?

<section class="card__container js-card__container">
      <img src="./images/icon-star.svg" alt="rating star" class="card__icon">
      <h1 class="card__heading">
        How did we do?
      </h1>
      <p class="card__text">
        Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
      </p>
      <ul class="card__rating js-card__rating">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <button class="card__btn js-card__btn">Submit</button>
    </section>

Community feedback

  • Naomi Pham•180
    @naomi-phamPosted about 2 years ago

    Hi, your site looks great! Love that you added some transition to the rating circle.

    About your question on the image tag, I think it's better to add the alt tag so that visitors can know what your image is about when it fails to load.

    I also have a small recommendation regarding the position of your card. You can add display: flex and min-height: 100vh to the body to put the card in center of the page:

    body {
   display:flex; 
   justify-content: center;
   align-items: center;
   min-height: 100vh;

    Happy coding! 😊

    Marked as helpful
    1
    Sarah Hassan•145
    @sarah27hPosted about 2 years ago

    Hi @naomi-pham, thanks for your recommendation, I will apply.

    0
  • Adriano•38,160
    @AdrianoEscarabotePosted about 2 years ago

    Hi Sarah Hassan, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

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

    cardRatingList.addEventListener('click', (e) => {
    if (e.target.nodeName.toLowerCase() == 'li') {
        cardBtn.addEventListener('click', (e) => {
            cardContainer.classList.add('hidden');
            thankCard.classList.remove('hidden');
            cardRatingValue.innerHTML = rateValueSelectedByUser;
        })

        rateValueSelectedByUser = Number(e.target.innerHTML);
        Array.from(ratingListItems).forEach((item) => {
            item.classList.remove('active');     
            if(item === e.target && !e.target.classList.contains('active')) {
                e.target.classList.add('active');  
            }
        })
    }
})

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    1
    Sarah Hassan•145
    @sarah27hPosted about 2 years ago

    Hi @AdrianoEscarabote, Thanks for your tips, I will update my code.

    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