https://github.com/alaeddinejebali/five-star-rating-component
Using CSS for the layout and JavaScript to get the result
https://github.com/alaeddinejebali/five-star-rating-component
css3 html-components rating-stars rating-system ratings
Last synced: 9 months ago
JSON representation
Using CSS for the layout and JavaScript to get the result
- Host: GitHub
- URL: https://github.com/alaeddinejebali/five-star-rating-component
- Owner: alaeddinejebali
- Created: 2014-12-27T18:50:48.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-08-16T10:50:14.000Z (almost 9 years ago)
- Last Synced: 2025-01-23T22:12:21.121Z (over 1 year ago)
- Topics: css3, html-components, rating-stars, rating-system, ratings
- Language: HTML
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Five star ratings component
## Using only CSS to build the component
```css
body {
color: #000;
background: #eaebef;
font: 700 16px/1.5 Verdana;
}
#section-result{
border-bottom: 1px solid #999;
margin-bottom: 50px;
}
#section-rating, h1{
text-align: center;
}
.set {
display: inline-block;
font-size: 3rem;
border: none;
}
.set:after {
content: "";
display: table;
clear: both;
}
.star {
float: right;
padding-left: 15px;
cursor: pointer;
color: #FFB300;
}
.star:last-child {
padding-left: 0;
}
.star:hover:before, .star:hover~.star:before, .rd:checked~.star:before {
content: "\f005";
}
.rd {
display: none;
}
.rating {
font-size: 0;
}
```
## Using JavaScript to get the selected value
```javascript
function showresult(res){
document.getElementById('result').innerText = "You selected the value: " + res;;
}
document.getElementById('rd1').addEventListener('click', function(){
showresult(1);
});
document.getElementById('rd2').addEventListener('click', function(){
showresult(2);
});
document.getElementById('rd3').addEventListener('click', function(){
showresult(3);
});
document.getElementById('rd4').addEventListener('click', function(){
showresult(4);
});
document.getElementById('rd5').addEventListener('click', function(){
showresult(5);
});
```