50projects50days/feedback-ui-design/script.js

35 lines
1.1 KiB
JavaScript
Raw Normal View History

2020-10-13 20:58:20 +00:00
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const panel = document.querySelector('#panel')
let selectedRating = 'Satisfied'
ratingsContainer.addEventListener('click', (e) => {
if(e.target.parentNode.classList.contains('rating')) {
removeActive()
e.target.parentNode.classList.add('active')
selectedRating = e.target.nextElementSibling.innerHTML
}
if(e.target.classList.contains('rating')) {
removeActive()
e.target.classList.add('active')
selectedRating = e.target.nextElementSibling.innerHTML
}
2020-10-13 20:58:20 +00:00
})
sendBtn.addEventListener('click', (e) => {
panel.innerHTML = `
<i class="fas fa-heart"></i>
<strong>Thank You!</strong>
<br>
<strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support</p>
`
})
function removeActive() {
for(let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active')
}
}