diff --git a/feedback-ui-design/index.html b/feedback-ui-design/index.html new file mode 100644 index 0000000..1a64c49 --- /dev/null +++ b/feedback-ui-design/index.html @@ -0,0 +1,33 @@ + + + + + + + + Let Us Know Your Feedback + + +
+ How satisfied are you with our
customer support performance? +
+
+ + Unhappy +
+ +
+ + Neutral +
+ +
+ + Satisfied +
+
+ +
+ + + diff --git a/feedback-ui-design/script.js b/feedback-ui-design/script.js new file mode 100644 index 0000000..04c53b0 --- /dev/null +++ b/feedback-ui-design/script.js @@ -0,0 +1,29 @@ +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 + } +}) + +sendBtn.addEventListener('click', (e) => { + panel.innerHTML = ` + + Thank You! +
+ Feedback: ${selectedRating} +

We'll use your feedback to improve our customer support

+ ` +}) + +function removeActive() { + for(let i = 0; i < ratings.length; i++) { + ratings[i].classList.remove('active') + } +} \ No newline at end of file diff --git a/feedback-ui-design/style.css b/feedback-ui-design/style.css new file mode 100644 index 0000000..5b4ad46 --- /dev/null +++ b/feedback-ui-design/style.css @@ -0,0 +1,90 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #fef9f2; + font-family: 'Montserrat', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.panel-container { + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + border-radius: 4px; + font-size: 90%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 30px; + max-width: 400px; +} + +.panel-container strong { + line-height: 20px; +} + +.ratings-container { + display: flex; + margin: 20px 0; +} + +.rating { + flex: 1; + cursor: pointer; + padding: 20px; + margin: 10px 5px; +} + +.rating:hover, +.rating.active { + border-radius: 4px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.rating img { + width: 40px; +} + +.rating small { + color: #555; + display: inline-block; + margin: 10px 0 0; +} + +.rating:hover small, +.rating.active small { + color: #111; +} + +.btn { + background-color: #302d2b; + color: #fff; + border: 0; + border-radius: 4px; + padding: 12px 30px; + cursor: pointer; +} + +.btn:focus { + outline: 0; +} + +.btn:active { + transform: scale(0.98); +} + +.fa-heart { + color: red; + font-size: 30px; + margin-bottom: 10px; +}