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

rating card component

@faheem4545

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


Problem in setting rating tag like 4 out of 5 or 2 out of 5 can anyone help me to solve this

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Faheem ismail, 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 make some changes:

ratingBtn.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const currentValue = e.currentTarget;
    ratingBtn.forEach((btn) => {
      btn.classList.remove("active");
    });
    btn.classList.add("active");
    const submitBtn = document.getElementById("submit");
      submitBtn.addEventListener("click", (e) => {
      location.href = "thankyou.html";
    });
  });
});

The rest is great!

I hope it helps... 👍

Marked as helpful

0

@faheem4545

Posted

@AdrianoEscarabote Thank you bro you are amazing You gave precious time to read my code and gave me a suggestion. It helped me to improve my code.

I need one more help from you To improve my project

In this project one thing is missing that I am trying to achieve but failed

Problem is you can see one piece of code is missing like you have selected 4 out 5 can you guide me how i can embed this code in my project.

I hope you notice that when user click on submit button also it should show "you have selected 3 out of 5."

I hope you noticed that missing piece of code

I am waiting for your guidance. Once again Thank you very much

1
Adriano 34,090

@AdrianoEscarabote

Posted

@faheem4545 right! as we are changing pages when we click on the submit button we will use localStorage, it allows us to be able to store data in the browser!

I added your html back:

<h6>You selected <span id="res"></span> out of 5</h6>

I will create another js file for the thanks page!

in this file I got the span in a variable!

const showRate = document.getElementById("res")

window.addEventListener("load", (() => {
  const value = localStorage.getItem("value")
  showRate.innerText = value
}))

and added an event that when the page loads we can get the value stored in our localStorage!

The only thing I changed in script.js was this:

const currentValue = e.currentTarget.innerText;
localStorage.setItem("value", currentValue)

this is inside the btn click event!

Marked as helpful

0

@faheem4545

Posted

@AdrianoEscarabote Once again thank you, your suggestion helped me to improve my code and I accomplished this challenge because of you. Your code gave me a lot of learning.

One thing I want to say you are amazing.

1
Adriano 34,090

@AdrianoEscarabote

Posted

@faheem4545 No problems! I'm glad I helped!!

1

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