Skip to content

Commit 420c6ab

Browse files
sahandghavidelsahandghavidel
committed
update the feedback ui project
1 parent 8811dbc commit 420c6ab

File tree

3 files changed

+32
-43
lines changed

3 files changed

+32
-43
lines changed

‎projects/feedback-ui/index.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,30 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="style.css" />
77
<title>Feedback UI</title>
8+
<link rel="stylesheet" href="style.css">
89
</head>
9-
1010
<body>
11-
<div id="container" class="container">
11+
<div class="container" id="container">
1212
<h1 class="heading">Feedback UI</h1>
13-
1413
<div class="ratings-container" id="ratings-container">
1514
<div class="rating">
1615
<img src="https://cdn-icons-png.flaticon.com/512/166/166527.png" />
1716
<small>Unhappy</small>
1817
</div>
19-
2018
<div class="rating">
21-
<img src="https://cdn-icons-png.flaticon.com/512/166/166536.png" />
19+
<img src="https://cdn-icons-png.flaticon.com/512/1791/1791385.png" />
2220
<small>Neutral</small>
2321
</div>
24-
2522
<div class="rating">
2623
<img src="https://cdn-icons-png.flaticon.com/512/166/166538.png" />
2724
<small>Satisfied</small>
2825
</div>
2926
</div>
3027
<button class="btn" id="btn">Send Review</button>
3128
</div>
32-
3329
<script src="index.js"></script>
3430
</body>
3531
</html>

‎projects/feedback-ui/index.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
const ratingEls = document.querySelectorAll(".rating");
2-
const ratingsContainerEl = document.getElementById("ratings-container");
32
const btnEl = document.getElementById("btn");
3+
44
const containerEl = document.getElementById("container");
5+
56
let selectedRating = "";
67

78
ratingEls.forEach((ratingEl) => {
8-
ratingEl.addEventListener("click", (e) => {
9+
ratingEl.addEventListener("click", (event) => {
910
removeActive();
10-
selectedRating = e.target.innerText || e.target.parentNode.innerText;
11-
e.target.parentNode.classList.add("active");
12-
e.target.classList.add("active");
11+
selectedRating =
12+
event.target.innerText || event.target.parentNode.innerText;
13+
event.target.classList.add("active");
14+
event.target.parentNode.classList.add("active");
1315
});
1416
});
1517

1618
btnEl.addEventListener("click", () => {
1719
if (selectedRating !== "") {
1820
containerEl.innerHTML = `
19-
<strong>Thank You!</strong>
21+
<strong>Thank you!</strong>
2022
<br>
2123
<br>
22-
<strong>Feedback : ${selectedRating}</strong>
24+
<strong>Feedback: ${selectedRating}</strong>
2325
<p>We'll use your feedback to improve our customer support.</p>
24-
`;
26+
`;
2527
}
2628
});
2729

‎projects/feedback-ui/style.css‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
body {
22
margin: 0;
3-
background: lightcyan;
3+
background-color: lightcyan;
44
color: darkgreen;
55
display: flex;
6-
align-items: center;
7-
justify-content: center;
86
min-height: 100vh;
7+
justify-content: center;
8+
align-items: center;
99
font-family: monospace;
1010
}
1111

12-
.heading {
13-
text-align: center;
14-
margin: 5px;
15-
font-size: 30px;
16-
}
17-
1812
.container {
1913
background: rgba(255, 255, 255, 0.3);
2014
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
2115
border-radius: 10px;
2216
padding: 20px;
23-
max-width: 400px;
2417
width: 85%;
18+
max-width: 400px;
2519
text-align: center;
2620
font-size: 20px;
2721
}
2822

23+
.heading {
24+
margin: 5px;
25+
font-size: 30px;
26+
}
27+
2928
.ratings-container {
3029
display: flex;
3130
padding: 20px 0;
@@ -38,30 +37,18 @@ body {
3837
}
3938

4039
.rating:hover,
41-
.rating.active {
40+
.rating.active
41+
{
42+
background: darkseagreen;
4243
border-radius: 10px;
4344
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
44-
background: darkseagreen;
45-
transition: all 300ms ease;
46-
}
47-
48-
.rating img {
49-
width: 40px;
50-
}
51-
52-
.rating small {
53-
margin: 5px 0;
54-
font-size: 18px;
55-
}
56-
57-
.rating:hover small,
58-
.rating.active small {
5945
color: aliceblue;
46+
transition: all 300ms ease;
6047
}
6148

6249
.btn {
6350
background-color: darkcyan;
64-
color: #fff;
51+
color: aliceblue;
6552
border: 0;
6653
margin: 10px;
6754
border-radius: 4px;
@@ -77,3 +64,7 @@ body {
7764
.btn:active {
7865
transform: scale(0.96);
7966
}
67+
68+
.rating img {
69+
width: 40px;
70+
}

0 commit comments

Comments
 (0)