Cheosphere• 1,040
@Cheosphere
Submitted
...made with a lot of love 🤘🏻🙂
kimchiver
@kimchiver
All comments
- kimchiver• 90
@kimchiver
Posted
Congratulations for the next level! The result is as always perfect.
3 - Mateusz• 150
@matsta92
Submitted
Hello, please rate my project and give me any tips if I could have done something much better :)
kimchiver• 90@kimchiver
Posted
I might suggest using variables in css to declare colors, font sizes, etc
I can't understand the meaning of ids and tabindexes in rating divs.
But the js code is WOW! I assume, this is the best solution!
Marked as helpful
0 - Svitlana Suslenkova• 3,490
@SvitlanaSuslenkova
Submitted
Will be glad to receive any advice on my js code.
kimchiver• 90@kimchiver
Posted
Hello!
Your coding of design is excellent. (I like your
History Backstyle!)I'd like to add a few js issues to the above:
--
"blur"event does not work properly with button elements, at least in Safari /Version 16.6/. I suggest to doinactive-button.classList.remove("selected")for all buttons inside a"click"callback-function of the active element (like @RalfiSlask noticed)-- it's better to use
add/remove(class)instead oftoggle(). When the user clicks the same number twice, toggle() switches off the active mode.It may seems overwhelming today, but don't give up and keep up! In case you get into this, I'd like to recommend a really good source for web-development learning - www.w3schools.com
Marked as helpful
0 - PArianna Choza• 220
@unachoza
Submitted
kimchiver• 90@kimchiver
Posted
document.querySelectorAllreturns an array, so you can check each element of the array ( ifdocument.querySelectorAll(".rating-value")[i].classList.contains("active")). otherwise you can store a reference to the previous selected item in a global variable:let previousSelected = null ratingsContainer.addEventListener('click', (e) => { ... if ( previousSelected ) previousSelected.classList.remove('active'); previousSelected = e.target; e.target.classList.add('active') ... }Marked as helpful
0
