Design comparison
Solution retrospective
This is my first challenge that includes JS. I am still rather new to writing JS code, but I do feel like I have a decent solution. If you have any comments on how I could improve my JS code or general advice that would very appreciated!
Community feedback
- @yishak621Posted almost 2 years ago
And also guys i think these will help u too but did u notice the hover property is working in pc but for mobile that color is printed as active color? 👉thats because mobile and tabs doesn't have hover property they only accept it as an active color so to solve that in css write a media query
@media (hover: hover) { .btn-rating:hover { background-color: var(--color-light-grey); color: var(--color-white); } } @media (hover: none) { /*targets only medias that can not be hover for mobile devices or tabs <!--TODO:*/ .btn-rating:hover { background-color: var(--color-Orange); color: var(--color-white); } }
0 - @MasonBoomPosted almost 2 years ago
Hi Issac,
Your web application looks great and functions perfectly, but I did notice that there was some code that was a bit repetitive. In the future, I would implement the use of a for loop or a forEach function.
Here is an example of what I did to reset my rating button classes when one of the buttons is clicked:
const toggleButton = index => { const buttons = document.getElementsByClassName('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); } buttons[index].classList.add('active'); setRating(index + 1); }
the setRating function there is a function that I used to update my rating, but what this function is doing is finding all of my buttons (1-5) and removing the 'active' class and setting the one I clicked on to active.
You can also set multiple variables to the same value with one line, so instead of this,
let rating = 0 let rating1 = false let rating2 = false let rating3 = false let rating4 = false let rating5 = false let ratingSelected = false
you can do this instead and it does the same thing:
let rating, rating1 rating2, rating3, rating4, rating5, ratingSelected = false
I think you'll eventually get better at writing more efficient javascript code with practice, keep up the good work :)
0@yishak621Posted almost 2 years ago@MasonBoom hey mason thats possible but also there is a cool method for these type of things ...just give the elments an
data-id
add a event listener for the parent container and when a user clicks on that container area theforEach
method will look for if that place have an id ...if it have it will add that functionality if it hasnt it will not add that functionality for more check my result that will help u in future works//logic-when we click on the btns container[ratingbtns] ratingBtns.addEventListener('click', (e) => { const id = e.target.dataset.id; console.log(id); if (id) { //remove active state from btns eachBtns.forEach((btn) => { btn.classList.remove('btn-active'); e.target.classList.add('btn-active'); textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result }); } });
1
Please log in to post a comment
Log in with GitHubJoin 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