@Osama-Elshimy
Posted
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 of ul
If you need more help on the JavaScript part, feel free to reply and I'll be glad to help.
Happy coding :)