Design comparison
Solution retrospective
Hello guys,
I've just done this project ! It was a great one since I thought I would be in trouble building this one (especialy with the JS part) but I never really got stuck on a problem which was a real surprise. So I only have two quick questions:
- How may I improve my code ? (I am almost 100% sure how I handle it wasn't at all optimal).
- How can I keep the style of my ":active" state when the user click to give a note ? I tried to use ":focus" state but I lost the style's change...
Have a good one :D !
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Bryan, congrats on finishing the challenge! your component looks really good, let me see if I can help you with your questions
- You could add a validation to make the user select a rating before submitting, instead of just displaying 0 (imagine that the user clicked submit by mistake, the rating will be 0). You can do this easily in your Javascript:
function displayRating() { if(note === 0) return alert('Please select a rating before submitting!') if(userNote == 0) return; displayMainContainers(); }
Another advice is that you should never use html onclicks, they are a bad practice that can cause a lot of bugs, instead of that use an addEventListener to that element in your JS file:
const submitButton = document.querySelector('#submit-button') submitButton.addEventListener('click', () => { if(note === 0) return alert('Please select a rating before submitting!') userNote.innerText = note; displayMainContainers(); })
- Just use Javascript, with CSS it can clash with your other pseudoelements like
:hover
and can get buggy, also with:focus
if the user clicks outside the button it will lose the focus, you can select all your buttons and remove / add styles at the same time.
Just take as an important part of this feedback that you should never use html functions calls like
onclick
,onsubmit
.Hope my feedback helps you, if you have any questions don't hesitate to ask! great work
0 - @hmadamkPosted about 2 years ago
this one is a little bit tricky but it's actually a javaScript it could by done with css but it's easier with js I will share with you the js solution if you want the css approach let me know ok so you need to modify the inside of your js and html a liitle bit you need to do what's called a dom manipulation basically what you will do is
- call the rating divs as a list of dom element like so
cosnt list = document.querySelectorAll('.note')
- then you will loop throught them and add an event listener like so
list.forEach(note=>{ note.addEventListener('click', handleClick) }) function handleClick(clickedNote){ list.forEach(e=>{e.style.backgroundColor = "#7C8798"}) clickedNote.style.backgroundColor = '#FC7614' }
if you want an in depth description how this work or want to know how to do it in pure css please let me know I will help if you have any question just let me know if this comment was useful consider marking it as helpful
0 - call the rating divs as a list of dom element like so
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