Skip to content

Commit dfa435b

Browse files
HuXn-WebDevHuXn-WebDev
committed
Feedback UI Using JS
1 parent 155dc0d commit dfa435b

File tree

3 files changed

+149
-0
lines changed

3 files changed

+149
-0
lines changed

‎50. Feedback/app.js‎

Lines changed: 29 additions & 0 deletions
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 sendBtn = document.querySelector("#send");
4+
const panel = document.querySelector("#panel");
5+
6+
let selectedRating = "Satisfied";
7+
8+
ratingsContainer.addEventListener("click", (e) => {
9+
if (e.target.parentNode.classList.contains("rating")) {
10+
removeActives();
11+
e.target.parentNode.classList.add("active");
12+
selectedRating = e.target.nextElementSibling.innerHTML;
13+
}
14+
});
15+
16+
sendBtn.addEventListener("click", () => {
17+
panel.innerHTML = `
18+
<p class="heart">💖</p>
19+
<strong>Thank You! </strong>
20+
<br>
21+
<strong>Feedback: ${selectedRating} </strong>
22+
`;
23+
});
24+
25+
function removeActives() {
26+
for (let i = 0; i < ratings.length; i++) {
27+
ratings[i].classList.remove("active");
28+
}
29+
}

‎50. Feedback/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Feedback</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="panel-container" id="panel">
11+
<strong>Your Feedback 😉</strong>
12+
<div class="ratings-container">
13+
<div class="container">
14+
<div class="rating">
15+
<div class="icon">😒</div>
16+
<small>Unhappy</small>
17+
</div>
18+
<div class="rating">
19+
<div class="icon">😐</div>
20+
<small>Neutral</small>
21+
</div>
22+
<div class="rating">
23+
<div class="icon">😆</div>
24+
<small>Satisfied</small>
25+
</div>
26+
</div>
27+
</div>
28+
<button class="btn" id="send">Send Feedback</button>
29+
</section>
30+
31+
<script src="app.js"></script>
32+
</body>
33+
</html>

‎50. Feedback/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background: rgb(26, 25, 25);
7+
font-family: sans-serif;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
overflow: hidden;
13+
margin: 0;
14+
}
15+
16+
.panel-container {
17+
background-color: #1d1c1c;
18+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
19+
border-radius: 4px;
20+
font-size: 90%;
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
padding: 30px;
26+
width: 700px;
27+
color: #fff;
28+
}
29+
30+
.ratings-container {
31+
display: flex;
32+
margin: 20px 0;
33+
}
34+
35+
.container {
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
text-align: center;
40+
width: 500px;
41+
}
42+
43+
.rating {
44+
flex: 1;
45+
padding: 20px;
46+
margin: 10px 5px;
47+
cursor: pointer;
48+
}
49+
50+
.rating:hover,
51+
.rating.active {
52+
border-radius: 4px;
53+
background-color: #ccc;
54+
transition: 1s ease;
55+
}
56+
57+
.rating .icon {
58+
width: 40px;
59+
font-size: 5rem;
60+
margin-right: 10px;
61+
}
62+
63+
.rating small {
64+
color: #fff;
65+
display: inline-block;
66+
margin: 10px 0 0;
67+
}
68+
69+
.btn {
70+
background: #fff;
71+
color: #000;
72+
border: 0;
73+
border-radius: 4px;
74+
padding: 12px 30px;
75+
cursor: pointer;
76+
outline: 0;
77+
}
78+
79+
.btn:active {
80+
transform: scale(0.98);
81+
}
82+
83+
/* JavaScript */
84+
.heart {
85+
font-size: 3rem;
86+
margin-bottom: 10px;
87+
}

0 commit comments

Comments
 (0)