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

Interactive rating component Using Html, CSS & JavaScript

@TheRedBandiCoot

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


πŸ—― 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

Community feedback

@gbabohernest

Posted

Hey there πŸ‘‹ Great work on completing the challenge... I liked the amination effect on the thank you component. Great work 😊😊.

You can try and improve the HTML a little bit

-Try to wrap your contents in the main tag to avoid accessibility issues instead of a div.

-As for the JavaScript, it looks good, but yet still it can be improved by reducing some lines of code. I can see you selected so many elements. In my opinion, you needed only a few, like the .numbers & .btn. Always try to keep things as simple as possible you can and remember there are multiple ways to solve a problem. keep up the good work πŸ‘πŸ‘.

Happy Coding βœ”πŸ‘

Marked as helpful

0
Renan Tiscoskiβ€’ 1,240

@DonUggioni

Posted

Hey,

I think your solution looks great! I like the animation when you click the submit button, might even implement that on my own project 😁

A few things I can point out are:

  • Start using rem instead of px when styling. Px are a fixed measure, which means they will never change no matter the user settings or in case the page is responsive.

  • The submit button is a little too big, I would reduce the padding to maybe 10px/15px.

  • When using querySelectorAll, I like to use a for loop to go through the Array. When you select many elements with the same class using querySelectorAll, you get a node list which is similar to an array, so you can loop through it and save a few lines of code and make it easier to read.

But, there is always many ways to do the same thing, and it works which is what matters.

Other than that, it looks great!

Keep it up and hope to see more projects from you in the future!

Marked as helpful

0

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