Skip to content
Submitted over 2 years ago

Frontend Mentor | Interactive Rating Component

Josh•100
@j-likes-spicy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, and thank you for taking the time to visit my solution to the challenge. Although my solution was not entirely exact, I felt that this was a pretty comprehensive and rewarding challenge to take on. What I found most challenging was selecting a compound selector (which returns a NodeList), and adding and removing classes from the NodeList value. This is relatively straightforward when making changes on a single selector, however, I learned that in this type of scenario, the proper way is to loop through the NodeList and pass a value to extract the class to perform the change operation on. Also, since I decided to use flexbox on the card layouts, I could not get the margin exact on the completed card without breaking the layout; I decided to leave it as-is. This was a good learning experience to build and complete a project. Please let me know if there is anything I could have done differently or more efficiently; I'm always open to opportunities for improvement.

Community feedback

  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that all the content needs some margin from the left using margin-left. Secondly the background color of the button does not match the color specified in the style-guide.md file.

    I hope this helps

    Cheers

    Happy coding 👍

    Marked as helpful
    0
    Josh•100
    @j-likes-spicyPosted over 2 years ago

    @TheCoderGuru Thank you, I will make these changes and upload it ASAP.

    0
  • Ivan•2,630
    @isprutfromuaPosted over 2 years ago

    Hi there. You did a good job 😎

    keep improving your programming skills🛠️

    your solution looks great, however, if you want to improve it, you can follow these steps:

    ✅ you use different ways to get items (id, tags, classes)

    const button = document.getElementById("submit");
const activeClass = document.querySelector(".card");
const inactiveClass = document.querySelectorAll(".card.toggle");
let testArray = [...document.querySelectorAll("a.circle")];
const rating = document.querySelector(".showRating");
const errorMsg = document.querySelector(".errorMsg");

    ✅ testArray will not change, so it is also better to declare it with const

    ✅ why are you declaring another currentValue variable? you can assign text to finalValue variable at once

    let currentValue = item.textContent;
    finalValue = currentValue;

    I hope my feedback will be helpful. You can mark it as useful if so 👍

    Good luck and fun coding 🤝⌨️

    Marked as helpful
    0
    Josh•100
    @j-likes-spicyPosted over 2 years ago

    @isprutfromua Thank you, I went ahead and removed the unnecessary variable

    0
    Ivan•2,630
    @isprutfromuaPosted over 2 years ago

    @j-likes-spicy I am glad that my help was useful to you

    Cheers, peace and happy coding!

    0

Please log in to post a comment

Log in with GitHub

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