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

Commit420c6ab

Browse files
update the feedback ui project
1 parent8811dbc commit420c6ab

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
<htmllang="en">
33
<head>
44
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
56
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6-
<linkrel="stylesheet"href="style.css"/>
77
<title>Feedback UI</title>
8+
<linkrel="stylesheet"href="style.css">
89
</head>
9-
1010
<body>
11-
<divid="container"class="container">
11+
<divclass="container"id="container">
1212
<h1class="heading">Feedback UI</h1>
13-
1413
<divclass="ratings-container"id="ratings-container">
1514
<divclass="rating">
1615
<imgsrc="https://cdn-icons-png.flaticon.com/512/166/166527.png"/>
1716
<small>Unhappy</small>
1817
</div>
19-
2018
<divclass="rating">
21-
<imgsrc="https://cdn-icons-png.flaticon.com/512/166/166536.png"/>
19+
<imgsrc="https://cdn-icons-png.flaticon.com/512/1791/1791385.png"/>
2220
<small>Neutral</small>
2321
</div>
24-
2522
<divclass="rating">
2623
<imgsrc="https://cdn-icons-png.flaticon.com/512/166/166538.png"/>
2724
<small>Satisfied</small>
2825
</div>
2926
</div>
3027
<buttonclass="btn"id="btn">Send Review</button>
3128
</div>
32-
3329
<scriptsrc="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
constratingEls=document.querySelectorAll(".rating");
2-
constratingsContainerEl=document.getElementById("ratings-container");
32
constbtnEl=document.getElementById("btn");
3+
44
constcontainerEl=document.getElementById("container");
5+
56
letselectedRating="";
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>ThankYou!</strong>
21+
<strong>Thankyou!</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:05px10pxrgba(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:20px0;
@@ -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:0010pxrgba(0,0,0,0.3);
44-
background: darkseagreen;
45-
transition: all300ms ease;
46-
}
47-
48-
.ratingimg {
49-
width:40px;
50-
}
51-
52-
.ratingsmall {
53-
margin:5px0;
54-
font-size:18px;
55-
}
56-
57-
.rating:hoversmall,
58-
.rating.activesmall {
5945
color: aliceblue;
46+
transition: all300ms 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+
.ratingimg {
69+
width:40px;
70+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp