Submitted over 2 years ago

Interactive rating component with BEM, Scss and Javascript

Marius•190

@MariusHor

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This was my first Javascript project on Frontendmentor after learning and doing some smaller projects on my own with js.

I think my solution is very close to the original and the js that I have implemented seems to work well. I had to look up for ways to make it work but I would say that I now understand what is the purpose of each variable, function or loop but I would definitely need more practice.

Please let me know what you think about my solution and if I can improve it somehow. 🙂

Community feedback

Bruhat Melvin•110

@AzraudePosted over 2 years ago

You should use preventDefault(), it prevent browser from refreshing.

Here is a simple solution for example, but yours is good too !

form.addEventListener('submit', function(e){
    e.preventDefault();
    const checkbox = "input[name=rating1]:checked";
    const checked = document.querySelector(checkbox);
    console.log(checkbox);
     if(checked !== null){
         let ratingselected = document.querySelector('.ratingselected');
        ratingselected.textContent =  'You selected ' + checked.getAttribute('value')+ ' out of 5'
         cardform.classList.add("hidden");
         cardthanks.classList.remove("hidden");
     }
 })```

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