50projects50days/feedback-ui-design/script.js
2021-08-03 12:13:11 -07:00

35 lines
1.1 KiB
JavaScript

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
}
})
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')
}
}