Skip to content

Commit 1bcceb3

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #2145 from meetarora10/star-branch
Added Star Rating Component
2 parents 73f5cce + 2349a01 commit 1bcceb3

File tree

6 files changed

+297
-0
lines changed

6 files changed

+297
-0
lines changed

‎Star Rating Component/images/icon-star.svg

Lines changed: 1 addition & 0 deletions
Loading

‎Star Rating Component/images/illustration-thank-you.svg

Lines changed: 1 addition & 0 deletions
Loading

‎Star Rating Component/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Star Rating Extension</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="icon">
12+
<img src="./images/icon-star.svg" alt="">
13+
</div>
14+
<h2 class="head">How did we do ?</h2>
15+
<p class="para">Please let us know how we did with your support <br> request.All feedback is appreciated to help us <br> improve our offering!</p>
16+
<button class="but one" onclick="stars()">1</button>
17+
<button class="but two" onclick="stars2()">2</button>
18+
<button class="but three" onclick="stars3()">3</button>
19+
<button class="but four" onclick="stars4()">4</button>
20+
<button class="but five" onclick="stars5()">5</button>
21+
<button class="submit" onclick="hide()">SUBMIT</button>
22+
</div>
23+
<div class="container2">
24+
<img src="./images/illustration-thank-you.svg" alt="" class="thank">
25+
<h2 class="head2">Thank you!</h2>
26+
<div class="msg"><p class="display"></p></div>
27+
<p class="message">We appreciate you taking the time to give a rating. <br> If you ever need more support, don't hesitate to <br> get in touch!</p>
28+
</div>
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎Star Rating Component/manifest.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Star Rating Component",
4+
"version": "1.0",
5+
"description": "Displays a random advice and refreshes with a new advice when the button is pressed.",
6+
"action": {
7+
"default_popup": "index.html",
8+
"default_icon":"images/icon-star.svg"
9+
},
10+
"icons": {
11+
"16": "images/icon-dice.svg",
12+
"48": "images/illustration-thank-you.svg"
13+
},
14+
"permissions": ["activeTab"],
15+
"background": {
16+
"service_worker": "script.js"
17+
}
18+
}

‎Star Rating Component/script.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
function stars(){
3+
value=1;
4+
const select=document.querySelector('.one');
5+
select.classList.add('change');
6+
const show=document.querySelector('.display');
7+
show.innerHTML=`You selected ${value} out of 5`;
8+
9+
}
10+
function stars2(){
11+
value=2;
12+
const select=document.querySelector('.two');
13+
select.classList.add('change');
14+
const show=document.querySelector('.display');
15+
show.innerHTML=`You selected ${value} out of 5`;
16+
}
17+
18+
function stars3(){
19+
value=3;
20+
const select=document.querySelector('.three');
21+
select.classList.add('change');
22+
23+
const show=document.querySelector('.display');
24+
show.innerHTML=`You selected ${value} out of 5`;
25+
}
26+
function stars4(){
27+
value=4;
28+
const select=document.querySelector('.four');
29+
select.classList.add('change');
30+
const show=document.querySelector('.display');
31+
show.innerHTML=`You selected ${value} out of 5`;
32+
}
33+
function stars5(){
34+
value=5;
35+
const select=document.querySelector('.five');
36+
select.classList.add('change');
37+
const show=document.querySelector('.display');
38+
show.innerHTML=`You selected ${value} out of 5`;
39+
}
40+
function hide(){
41+
const sel=document.querySelector('.container');
42+
const sel2=document.querySelector('.container2');
43+
sel.style='visibility:hidden';
44+
sel2.style='visibility:visible';
45+
}

‎Star Rating Component/style.css

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
body{
2+
background-color: black;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
width: 100vw;
8+
overflow: hidden;
9+
}
10+
.container{
11+
position: relative;
12+
left: 175px;
13+
width: 420px;
14+
height: 350px;
15+
border-radius: 10px;
16+
background-color: rgb(46, 46, 55);
17+
box-shadow:inset 2px 2px 10px white;
18+
19+
}
20+
.icon{
21+
height: 40px;
22+
width: 41px;
23+
border-radius: 20px;
24+
background-color: rgb(55, 47, 66);
25+
box-shadow: inset 1px 1px 6px white;
26+
27+
position: relative;
28+
top: 30px;
29+
left: 36px;
30+
text-align: center;
31+
}
32+
.icon img{
33+
height: 14px;
34+
width: 18px;
35+
position: relative;
36+
top: 12px;
37+
}
38+
.head{
39+
color: white;
40+
position: relative;
41+
left: 36px;
42+
top: 24px;
43+
font-family: Arial, Helvetica, sans-serif;
44+
}
45+
.para{
46+
color: white;
47+
position: relative;
48+
left: 36px;
49+
top: 24px;
50+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
51+
}
52+
.but{
53+
height: 45px;
54+
width: 45px;
55+
border-radius: 30px;
56+
border: none;
57+
background-color: rgb(55, 47, 66);
58+
box-shadow: inset 1px 1px 6px white;
59+
color: white;
60+
margin-left: 20px;
61+
position: relative;
62+
left: 16px;
63+
top: 24px;
64+
opacity: 0.7;
65+
cursor: pointer;
66+
}
67+
.but:hover{
68+
opacity: 1;
69+
color: white;
70+
background-color: rgb(255, 136, 0);
71+
box-shadow: none;
72+
}
73+
.submit{
74+
background-color: rgb(255, 136, 0);
75+
color: white;
76+
cursor: pointer;
77+
position: relative;
78+
left: 31px;
79+
top: 44px;
80+
width: 330px;
81+
height: 43px;
82+
border: none;
83+
border-radius: 26px;
84+
letter-spacing: 2px;
85+
}
86+
.submit:hover{
87+
background-color: white;
88+
color: rgb(255, 136, 0);
89+
}
90+
.change{
91+
background-color: rgb(177, 177, 177);
92+
}
93+
.container2{
94+
display: flex;
95+
position: relative;
96+
right: 200px;
97+
flex-direction: column;
98+
justify-content: center;
99+
width: 420px;
100+
height: 350px;
101+
border-radius: 10px;
102+
background-color: rgb(46, 46, 55);
103+
box-shadow:inset 2px 2px 10px white;
104+
text-align: center;
105+
visibility: hidden;
106+
}
107+
.thank{
108+
width: 75px;
109+
height: 70px;
110+
position: relative;
111+
left: 168px;
112+
113+
}
114+
.head2{
115+
color: white;
116+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
117+
}
118+
.display{
119+
color: rgb(255, 136, 0);
120+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
121+
}
122+
.message{
123+
color: white;
124+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
125+
}
126+
.msg{
127+
background-color: rgb(198, 198, 198);
128+
129+
border-radius: 30px;
130+
width: 208px;
131+
height: 52px;
132+
position: relative;
133+
left: 110px;
134+
opacity: 0.8;
135+
padding-bottom: 4px;
136+
box-sizing: border-box;
137+
}
138+
@media (max-width:770px) {
139+
.container{
140+
left: 121px;
141+
bottom:7px;
142+
width: 1771px;
143+
height: 460px;
144+
145+
}
146+
.container2{
147+
right: 206px;
148+
width: 1350px;
149+
height: 460px;
150+
}
151+
.submit{
152+
left: 30px;
153+
}
154+
.thank{
155+
left: 120px;
156+
}
157+
.msg{
158+
left: 53px;
159+
}
160+
.head2{
161+
position: static;
162+
}
163+
}
164+
@media (max-width:676px){
165+
.container{
166+
width: 770px;
167+
height: 149vh;
168+
left:111px;
169+
font-size: 23px;
170+
top:140px;
171+
padding-right:28px ;
172+
}
173+
.but{
174+
margin-left: 7px;
175+
}
176+
.submit{
177+
left: 20px;
178+
}
179+
.icon img{
180+
top: 5px;
181+
}
182+
}
183+
@media (max-width:650px) {
184+
.msg{
185+
left: 7px;
186+
width: 272px;
187+
height: 65px;
188+
}
189+
.thank{
190+
left:98px;
191+
}
192+
.container2{
193+
width: 600px;
194+
height: 94vh;
195+
196+
font-size: 21px;
197+
top:-4px;
198+
box-sizing: border-box;
199+
padding-right:16px ;
200+
}
201+
}

0 commit comments

Comments
 (0)