Design comparison
Solution retrospective
I had the help of a tutor to do the bit where you select the rating and it goes into the thank you card, any suggestion on where I can get documentation to look into it further-or any other way that could have been tackled is appreciated!!!
Community feedback
- @Osama-ElshimyPosted almost 2 years ago
Nice Work!
You asked for a way to implement the select rate part. Here is how I did it:
- Give the span element an
id
or aclass
like you did, you gave it anid='rate'
- Select the element in JavaScript:
const rate = doqument.getElementById('rate')
- Select all the button elements like you did my friend:
const btns = doqument.querySelectorAll('.btn')
- Add event listener to a common parent element
btn-list
document.querySelector('.btn-list').addEventListener('click', function(e)) { // Determine what element caused the event - what button was clicked const clicked = e.target.closest(".btn"); // return if no button is clicked - if the user clicks on the list button but NOT on a button if (!clicked) { return } // Assign the value of the clicked button to the span element rate.textContent = clicked.textContent // No space // You can add space before the number by using bracket notations like this: rate.textContent = ` ${clicked.textContent}` // There is a space } }
- Final step: When you click the submit button. You have to make sure that the user chooses a rating:
// return if NO rating was chosen - No button is clicked // If no rating was selected, then the value will be null if (!rate.textContent) { return }
The UI is very nice, but you must improve the semantic HTML. Use
form
instead oful
If you need more help on the JavaScript part, feel free to reply and I'll be glad to help.
Happy coding :)
0 - Give the span element an
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