@pablorodriguez-tk
@annapmarin
Submitted
This is my solution for this challenge 💫👩🏻💻
Built with: -SASS (my first time) -JavaScript (vanilla)
Any suggestions on how I can improve and reduce unnecessary code are welcome! (javascript in particular)
Thank you! 🙏🏻
@pablorodriguez-tk
Posted
To reduce unnecessary code on JS , you can do this. Add to every clickable item, the class "list-item" on html
Then, you can use this solution using JavaScript (vanilla). i add some comment to try to explain the code
// Get all the elements on the DOM with class "list-item"
const listItem = document.getElementsByClassName("list-item");
for (const item of listItem) {
const onLabelClicked = () => {
// if the clicked element has the active class, remove it
if (item.classList.contains("active")) {
item.classList.remove("active");
return;
}
//remove active class from all elements
if (document.querySelector(".active")) {
document.querySelector(".active").classList.remove("active");
}
// add active class to the clicked element
item.classList.add("active");
};
item.addEventListener("click", onLabelClicked);
}
You can see my code solution here GITHUB-LINK
Marked as helpful