Interactive rating component Using Html, CSS & JavaScript

🗯 In every project I've got a lot of ideas to put in but due to a lack of knowledge in coding and the right time to use the right logic to accomplish the idea I thought it very hard for me to achieve.

➡ In this particular project using javascript to make this page interactive is the most challenging part for me honestly.

➡ Later while working on making the animated submit button & use the Transform CSS property to make the after submitting animation more interactable is quite a challenging part for me but also interesting at the same time.

🗯 In Some of the areas in the javascript part of the code I'm quite unsure whether the logic is right or wrong Please Check This Code Snippets Out And Help Me Out 👇👇👇👇👇👇👇👇👇👇👇👇👇👇 Repository URL for All Code Snippets

btn.addEventListener("click", (e)=>{
        buttonColorChange.forEach((e)=>{
          if (e.classList.length === 2) {
            setTimeout(() => {
              forNoneAdder()
              isShow.classList.remove("fornone")
              add.innerHTML = e.innerHTML
            }, 250);
            container.classList.add("isShow")
          } else{
            btn.classList.add("ani")
            setTimeout(()=>{
              btn.classList.remove("ani") 
            },500)
          }
        })
      })

➡ Here In This part of the code, when I click the button ani class add to the button but it will get removed after 500ms but when I again click the button and check the element tab from developer tools in google I see the ani class already there and in the console, panel show me 5 buttons when I console.log(btn)

➡ I also apply the ani class in the else condition when the button got clicked without selecting the rating number but the class also added in if condition I don't why PLEASE CHECK THIS OUT this problem

🗯 I gonna check out more projects to work on in Frontendmentor.io

⌘This Is RedBandiCoot Signing Off

stay hungry stay foolish—Stewart Brand