Skip to content

Commit 8811dbc

Browse files
sahandghavidelsahandghavidel
committed
update feedback UI project
1 parent 8461294 commit 8811dbc

File tree

6 files changed

+69
-120
lines changed

6 files changed

+69
-120
lines changed

‎projects/feedback-ui/assets/review.png‎

-1.76 KB
Binary file not shown.

‎projects/feedback-ui/font/sans.ttf‎

-54.5 KB
Binary file not shown.

‎projects/feedback-ui/index.html‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,32 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="style.css" />
7-
<link rel="icon" href="assets/review.png" />
87
<title>Feedback UI</title>
98
</head>
109

1110
<body>
12-
<h1>Feedback Design UI</h1>
13-
<div id="panel" class="panel-container box">
14-
<h3>
15-
How satisfied are you with our <br />
16-
customer support performance?
17-
</h3>
18-
<div class="ratings-container">
11+
<div id="container" class="container">
12+
<h1 class="heading">Feedback UI</h1>
13+
14+
<div class="ratings-container" id="ratings-container">
1915
<div class="rating">
20-
<img
21-
src="https://cdn-icons-png.flaticon.com/512/166/166527.png"
22-
alt=""
23-
/>
16+
<img src="https://cdn-icons-png.flaticon.com/512/166/166527.png" />
2417
<small>Unhappy</small>
2518
</div>
2619

2720
<div class="rating">
28-
<img
29-
src="https://cdn-icons-png.flaticon.com/512/166/166536.png"
30-
alt=""
31-
/>
21+
<img src="https://cdn-icons-png.flaticon.com/512/166/166536.png" />
3222
<small>Neutral</small>
3323
</div>
3424

3525
<div class="rating">
36-
<img
37-
src="https://cdn-icons-png.flaticon.com/512/166/166538.png"
38-
alt=""
39-
/>
26+
<img src="https://cdn-icons-png.flaticon.com/512/166/166538.png" />
4027
<small>Satisfied</small>
4128
</div>
4229
</div>
43-
<button class="btn" id="send">Send Review</button>
30+
<button class="btn" id="btn">Send Review</button>
4431
</div>
4532

46-
<script src="script.js"></script>
33+
<script src="index.js"></script>
4734
</body>
4835
</html>

‎projects/feedback-ui/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const ratingEls = document.querySelectorAll(".rating");
2+
const ratingsContainerEl = document.getElementById("ratings-container");
3+
const btnEl = document.getElementById("btn");
4+
const containerEl = document.getElementById("container");
5+
let selectedRating = "";
6+
7+
ratingEls.forEach((ratingEl) => {
8+
ratingEl.addEventListener("click", (e) => {
9+
removeActive();
10+
selectedRating = e.target.innerText || e.target.parentNode.innerText;
11+
e.target.parentNode.classList.add("active");
12+
e.target.classList.add("active");
13+
});
14+
});
15+
16+
btnEl.addEventListener("click", () => {
17+
if (selectedRating !== "") {
18+
containerEl.innerHTML = `
19+
<strong>Thank You!</strong>
20+
<br>
21+
<br>
22+
<strong>Feedback : ${selectedRating}</strong>
23+
<p>We'll use your feedback to improve our customer support.</p>
24+
`;
25+
}
26+
});
27+
28+
function removeActive() {
29+
ratingEls.forEach((ratingEl) => {
30+
ratingEl.classList.remove("active");
31+
});
32+
}

‎projects/feedback-ui/script.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎projects/feedback-ui/style.css‎

Lines changed: 28 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,79 @@
1-
* {
2-
padding: 0;
3-
box-sizing: border-box;
4-
font-family: "sans";
5-
}
6-
7-
@font-face {
8-
font-family: "sans";
9-
src: url(font/sans.ttf);
10-
}
11-
121
body {
13-
overflow: hidden;
14-
background: #19172e;
15-
color: #fff;
2+
margin: 0;
3+
background: lightcyan;
4+
color: darkgreen;
165
display: flex;
176
align-items: center;
187
justify-content: center;
198
min-height: 100vh;
9+
font-family: monospace;
2010
}
2111

22-
footer, a, h3,small {
23-
color: #fff;
24-
}
25-
26-
h1 {
27-
color: #fff;
12+
.heading {
2813
text-align: center;
29-
position: absolute;
30-
left: 0;
31-
right: 0;
32-
top: 0;
33-
padding-top: 10px;
14+
margin: 5px;
15+
font-size: 30px;
3416
}
3517

36-
.box {
37-
background: rgba(255, 255, 255, 0.05);
38-
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
18+
.container {
19+
background: rgba(255, 255, 255, 0.3);
20+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
3921
border-radius: 10px;
40-
backdrop-filter: blur(20px);
41-
padding: 1rem;
42-
width: 400px;
43-
text-align: center;
44-
}
45-
46-
.panel-container {
47-
display: flex;
48-
flex-direction: column;
49-
justify-content: center;
50-
align-items: center;
51-
text-align: center;
52-
padding: 30px;
22+
padding: 20px;
5323
max-width: 400px;
54-
}
55-
56-
.panel-container strong {
57-
line-height: 20px;
24+
width: 85%;
25+
text-align: center;
26+
font-size: 20px;
5827
}
5928

6029
.ratings-container {
6130
display: flex;
62-
margin: 20px 0;
31+
padding: 20px 0;
6332
}
6433

6534
.rating {
66-
flex: 1;
6735
cursor: pointer;
68-
padding: 20px;
36+
padding: 10px;
6937
margin: 10px 5px;
7038
}
7139

7240
.rating:hover,
7341
.rating.active {
74-
border-radius: 4px;
42+
border-radius: 10px;
7543
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
76-
background: salmon;
44+
background: darkseagreen;
45+
transition: all 300ms ease;
7746
}
7847

7948
.rating img {
8049
width: 40px;
8150
}
8251

8352
.rating small {
84-
display: inline-block;
85-
margin: 10px 0 0;
53+
margin: 5px 0;
54+
font-size: 18px;
8655
}
8756

8857
.rating:hover small,
8958
.rating.active small {
90-
color: green;
59+
color: aliceblue;
9160
}
9261

9362
.btn {
94-
background-color: #302d2b;
63+
background-color: darkcyan;
9564
color: #fff;
9665
border: 0;
66+
margin: 10px;
9767
border-radius: 4px;
9868
padding: 12px 30px;
9969
cursor: pointer;
10070
}
10171

102-
.btn:focus {
103-
outline: 0;
72+
.btn:hover {
73+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
74+
transition: all 300ms ease;
10475
}
10576

10677
.btn:active {
107-
transform: scale(0.98);
78+
transform: scale(0.96);
10879
}
109-
110-
.fa-heart {
111-
color: red;
112-
font-size: 30px;
113-
margin-bottom: 10px;
114-
}
115-
116-
footer {
117-
text-align: center;
118-
position: absolute;
119-
bottom: 0;
120-
}

0 commit comments

Comments
 (0)