Submitted almost 3 years ago

Interactive rating component with BEM, Scss and Javascript

bem, sass/scss

Marius•190

@MariusHor

A solution to the Interactive rating component challenge

Preview Code

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. 🙂

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Bruhat Melvin•110

@Azraude

Posted almost 3 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");
     }
 })```

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