Movatterモバイル変換

[0]ホーム
URL:

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

Commit8811dbc

Browse files
update feedback UI project
1 parent8461294 commit8811dbc

File tree

6 files changed

+69
-120
lines changed

6 files changed

+69
-120
lines changed
-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
<metacharset="UTF-8"/>
55
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
66
<linkrel="stylesheet"href="style.css"/>
7-
<linkrel="icon"href="assets/review.png"/>
87
<title>Feedback UI</title>
98
</head>
109

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

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

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

46-
<scriptsrc="script.js"></script>
33+
<scriptsrc="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+
constratingEls=document.querySelectorAll(".rating");
2+
constratingsContainerEl=document.getElementById("ratings-container");
3+
constbtnEl=document.getElementById("btn");
4+
constcontainerEl=document.getElementById("container");
5+
letselectedRating="";
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+
functionremoveActive(){
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:015px25pxrgba(0,0,0,0.1);
18+
.container {
19+
background:rgba(255,255,255,0.3);
20+
box-shadow:05px10pxrgba(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-containerstrong {
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:20px0;
31+
padding:20px0;
6332
}
6433

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

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

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

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

8857
.rating:hoversmall,
8958
.rating.activesmall {
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:12px30px;
9969
cursor: pointer;
10070
}
10171

102-
.btn:focus {
103-
outline:0;
72+
.btn:hover {
73+
box-shadow:05px10pxrgba(0,0,0,0.3);
74+
transition: all300ms 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)
[8]ページ先頭
©2009-2025 Movatter.jp