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.
@shashreesamuel
Posted
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
@j-likes-spicy
Posted
@TheCoderGuru Thank you, I will make these changes and upload it ASAP.
@isprutfromua
Posted
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
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
