Submitted almost 2 years ago

Interactive rating component

Sarah Hassan•145

@sarah27h

Preview site View code

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 almost 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 almost 2 years ago
Hi @naomi-pham, thanks for your recommendation, I will apply.
0

Adriano•38,100

@AdrianoEscarabotePosted almost 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

Sarah Hassan•145

@sarah27hPosted almost 2 years ago

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

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