diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..bc41f72 --- /dev/null +++ b/css/style.css @@ -0,0 +1,81 @@ +@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; + padding: 30px; + max-width: 400px; + text-align: center; +} +.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: 45px; +} +.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; + +} diff --git a/imoji/cool.png b/imoji/cool.png new file mode 100644 index 0000000..abe10ad Binary files /dev/null and b/imoji/cool.png differ diff --git a/imoji/neutral.png b/imoji/neutral.png new file mode 100644 index 0000000..e0afd1c Binary files /dev/null and b/imoji/neutral.png differ diff --git a/imoji/sad.png b/imoji/sad.png new file mode 100644 index 0000000..20176c4 Binary files /dev/null and b/imoji/sad.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8329b47 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + Feedback UI Design + + + +
+ How satisfied are you with our
customer support performance? +
+
+ + Unhappy +
+
+ + Neutral +
+
+ + Satisfied +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e7d7254 --- /dev/null +++ b/js/script.js @@ -0,0 +1,30 @@ +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