Skip to content

Commit 536af9e

Browse files
solygambassolygambas
committed
add feedback UI design
1 parent eabffc4 commit 536af9e

File tree

4 files changed

+163
-3
lines changed

4 files changed

+163
-3
lines changed

‎43-feedback UI design/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Let Us Know Your Feedback</title>
14+
</head>
15+
<body>
16+
<div id="panel" class="panel-container">
17+
<strong>How satisfied are you with our <br/>
18+
customer support performance?</strong>
19+
<div class="ratings-container">
20+
<div class="rating">
21+
<img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="">
22+
<small>Unhappy</small>
23+
</div>
24+
25+
<div class="rating">
26+
<img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/>
27+
<small>Neutral</small>
28+
</div>
29+
30+
<div class="rating active">
31+
<img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/>
32+
<small>Satisfied</small>
33+
</div>
34+
</div>
35+
<button class="btn" id="send">Send Review</button>
36+
</div>
37+
</div>
38+
<script src="script.js"></script>
39+
</body>
40+
</html>

‎43-feedback UI design/script.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const ratings = document.querySelectorAll(".rating");
2+
const ratingsContainer = document.querySelector(".ratings-container");
3+
const sendButton = document.getElementById("send");
4+
const panel = document.getElementById("panel");
5+
let selectedRating = "Satisfied";
6+
7+
const removeActive = () => {
8+
for (let i = 0; i < ratings.length; i++) {
9+
ratings[i].classList.remove("active");
10+
}
11+
};
12+
13+
ratingsContainer.addEventListener("click", (e) => {
14+
if (e.target.parentNode.classList.contains("rating")) {
15+
removeActive();
16+
e.target.parentNode.classList.add("active");
17+
selectedRating = e.target.nextElementSibling.innerHTML;
18+
}
19+
});
20+
21+
sendButton.addEventListener("click", (e) => {
22+
panel.innerHTML = `
23+
<i class="fas fa-heart"></i>
24+
<strong>Thank You!</strong>
25+
<br>
26+
<strong>Feedback: ${selectedRating}</strong>
27+
<p>We'll use your feedback to improve our customer support</p>
28+
`;
29+
});

‎43-feedback UI design/style.css

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fef9f2;
9+
font-family: "Montserrat", sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.panel-container {
19+
background-color: #fff;
20+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
21+
border-radius: 4px;
22+
font-size: 90%;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
text-align: center;
28+
padding: 30px;
29+
max-width: 400px;
30+
}
31+
32+
.panel-container strong {
33+
line-height: 20px;
34+
}
35+
36+
.ratings-container {
37+
display: flex;
38+
margin: 20px 0;
39+
}
40+
41+
.rating {
42+
flex: 1;
43+
cursor: pointer;
44+
padding: 20px;
45+
margin: 10px 5px;
46+
}
47+
48+
.rating:hover,
49+
.rating.active {
50+
border-radius: 4px;
51+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.rating img {
55+
width: 40px;
56+
}
57+
58+
.rating small {
59+
color: #555;
60+
display: inline-block;
61+
margin: 10px 0 0;
62+
}
63+
64+
.rating:hover small,
65+
.rating.active small {
66+
color: #111;
67+
}
68+
69+
.btn {
70+
background-color: #302d2b;
71+
color: #fff;
72+
border: 0;
73+
border-radius: 4px;
74+
padding: 12px 30px;
75+
font-family: inherit;
76+
cursor: pointer;
77+
}
78+
79+
.btn:focus {
80+
outline: none;
81+
}
82+
83+
.btn:active {
84+
transform: scale(0.98);
85+
}
86+
87+
.fa-heart {
88+
color: red;
89+
font-size: 30px;
90+
margin-bottom: 10px;
91+
}

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@
4545
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/37-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) |
4646
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
4747
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
48-
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3d%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
49-
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-ui) | [Live Demo](/verify-account-ui/) |
48+
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3D%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
49+
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-UI) | [Live Demo](/verify-account-ui/) |
5050
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](/live-user-filter/) |
51-
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/feedback-ui-design) | [Live Demo](/feedback-ui-design/) |
51+
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](/feedback-ui-design/) |
5252
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/custom-range-slider) | [Live Demo](/custom-range-slider/) |
5353
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/netflix-mobile-navigation) | [Live Demo](/netflix-mobile-navigation/) |
5454
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/quiz-app) | [Live Demo](/quiz-app/) |

0 commit comments

Comments
 (0)