Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8811dbc

Browse files
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 15px25px rgba(0, 0, 0, 0.1);
18+
.container {
19+
background: rgba(255, 255, 255, 0.3);
20+
box-shadow: 0 5px10px 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:10px00;
53+
margin:5px0;
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)

AltStyle によって変換されたページ (->オリジナル) /