Skip to content

Commit a52cc8d

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1510 from MisterMickey/issue-1135
Add rating component
2 parents 9ff7eba + 985101b commit a52cc8d

7 files changed

Lines changed: 235 additions & 0 deletions

File tree

‎Projects/RatingComponent/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Rating Card Component
2+
3+
The Rating Component is a customizable HTML and CSS component that allows users to rate and review products. It provides an intuitive interface for users to express their opinions and give ratings to products they have experienced.
4+
5+
## Features
6+
7+
User-friendly interface for rating and reviewing products.
8+
Customizable appearance to match your website's design.
9+
Smooth animations and transitions for a delightful user experience.
10+
Mobile-responsive design for seamless usage on different devices.
11+
Easy integration into any HTML-based website or web application.

‎Projects/RatingComponent/images/favicon-32x32.png‎

1.04 KB
Loading

‎Projects/RatingComponent/images/icon-star.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RatingComponent/images/illustration-thank-you.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RatingComponent/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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"> <!-- displays site properly based on user's device -->
6+
<title>Interactive rating component</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<!-- Font Awesome Kit -->
9+
<script src="https://kit.fontawesome.com/c04965d3c1.js" crossorigin="anonymous"></script>
10+
</head>
11+
<body>
12+
13+
<main>
14+
<!-- Rating state start -->
15+
<div class="main container">
16+
<img class="star" src="images/icon-star.svg" alt="star-icon">
17+
<h1>How did we do?</h1>
18+
<p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
19+
<div class="ratingChoices">
20+
<button class="choice icon">1</button>
21+
<button class="choice icon">2</button>
22+
<button class="choice icon">3</button>
23+
<button class="choice icon">4</button>
24+
<button class="choice icon">5</button>
25+
</div>
26+
<button class="submit">SUBMIT</button>
27+
</div>
28+
29+
30+
<!-- Rating state end -->
31+
32+
<!-- Thank you state start -->
33+
<div class="container thankYou hidden" id="thankYou">
34+
<img src="images/illustration-thank-you.svg" alt="" class="thankYou">
35+
<div class="rating">
36+
You selected <span class="rating"></span> out of 5
37+
</div>
38+
<h1 class="thankYou">Thank you!</h1>
39+
<p class="thankYou">We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in touch!</p>
40+
</div>
41+
<!-- Thank you state end -->
42+
43+
</main>
44+
45+
<footer>
46+
<div class="attribution">
47+
Coded by <a href="https://github.com/MisterMickey">Master Mickey</a>.
48+
</div>
49+
</footer>
50+
51+
<script src="index.js"></script>
52+
</body>
53+
</html>

‎Projects/RatingComponent/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const mainContainer = document.querySelector(".main")
2+
const thanksContainer = document.getElementById("thankYou")
3+
const submit = document.querySelector(".submit")
4+
const rating = document.querySelector("span.rating")
5+
const rateButton = document.querySelectorAll(".choice")
6+
7+
rateButton.forEach((rate)=>{
8+
rate.addEventListener("click",()=>{
9+
rating.innerHTML = rate.innerHTML
10+
})
11+
})
12+
13+
submit.addEventListener("click",()=>{
14+
mainContainer.classList.add("hidden")
15+
thanksContainer.classList.remove("hidden")
16+
})
17+

‎Projects/RatingComponent/styles.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root{
10+
--White: hsl(0, 0%, 100%);
11+
--LightGrey : hsl(217, 12%, 63%);
12+
--MediumGrey: hsl(216, 12%, 54%);
13+
--DarkBlue: hsl(213, 19%, 18%);
14+
--VeryDarkBlue: hsl(216, 12%, 8%);
15+
--Orange: hsl(25, 97%, 53%);
16+
}
17+
18+
body{
19+
font-size: .9375rem;
20+
font-family: 'Overpass', sans-serif;
21+
margin: 2rem;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
height: 100vh;
27+
background-color: var(--VeryDarkBlue);
28+
}
29+
30+
img{
31+
max-width: 100%;
32+
}
33+
34+
.container{
35+
border-radius: 1.5rem;
36+
background-color: var(--DarkBlue);
37+
padding: 1.5rem;
38+
margin-bottom: 2rem;
39+
}
40+
41+
img.star{
42+
background-color: hsl(212, 22%, 24%);
43+
padding: .5rem;
44+
border-radius: 2rem;
45+
margin-bottom: 1rem;
46+
}
47+
48+
.icon{
49+
background-color: hsl(212, 22%, 24%);
50+
border-radius: 50%;
51+
height: 2.5rem;
52+
width: 2.5rem;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
padding: .3rem 0 0;
57+
margin-bottom: 1rem;
58+
}
59+
60+
h1{
61+
color: var(--White);
62+
margin-bottom: 1rem;
63+
}
64+
65+
p{
66+
color: var(--MediumGrey);
67+
margin-bottom: 2rem;
68+
line-height: 1.5rem;
69+
}
70+
71+
.ratingChoices{
72+
display: flex;
73+
justify-content: space-between;
74+
margin-bottom: 1rem;
75+
}
76+
77+
button.choice{
78+
color: var(--MediumGrey);
79+
font-family: 'Overpass';
80+
font-weight: 700;
81+
border: 0;
82+
cursor: pointer;
83+
}
84+
85+
button.choice:focus{
86+
background-color: var(--LightGrey);
87+
color: var(--White);
88+
}
89+
90+
button:hover{
91+
background-color: var(--Orange);
92+
color: var(--White);
93+
}
94+
95+
.submit{
96+
border-radius: 5rem;
97+
border: var(--Orange);
98+
background-color: var(--Orange);
99+
color: var(--White);
100+
font-family: 'Overpass', sans-serif;
101+
width: 100%;
102+
padding: 1rem 0;
103+
font-weight: 700;
104+
letter-spacing: .2rem;
105+
cursor: pointer;
106+
}
107+
108+
.submit:hover{
109+
background-color: var(--White);
110+
color: var(--Orange);
111+
}
112+
113+
.thankYou{
114+
display: flex;
115+
flex-direction: column;
116+
justify-content: center;
117+
align-items: center;
118+
text-align: center;
119+
}
120+
121+
.thankYou img{
122+
margin-bottom: 2rem;
123+
}
124+
125+
div.rating{
126+
background-color: hsl(212, 22%, 24%);
127+
padding: .2rem .7rem .1rem;
128+
color: var(--Orange);
129+
border-radius: 2rem;
130+
font-size: .9rem;
131+
margin-bottom: 2rem;
132+
}
133+
134+
.hidden{
135+
display: none;
136+
}
137+
138+
.attribution
139+
{
140+
font-size: 11px; text-align: center;
141+
color: var(--White);
142+
}
143+
.attribution a{
144+
color: hsl(228, 45%, 44%);
145+
text-decoration: none;
146+
}
147+
148+
@media screen and (min-width: 450px) {
149+
.container{
150+
max-width: 400px;
151+
}
152+
}

0 commit comments

Comments
 (0)