JAVASCRIPT create star rating javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create star rating using javascript


 585

JAVASCRIPT


3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html
{
width: 100%;
height: 100%;
overflow: hidden;
background: #383838;
}

#rating
{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
}

#rating span
{
cursor: pointer;
font-size: 50px;
padding: 0 10px;
color: #fff;
opacity: .5;
transition: all 150ms;
display: inline-block;
transform: rotateX(45deg);
transform-origin: center bottom;
}

#rating span.hover
{
color: #ff0;
opacity: 1;
transform: rotateX(0deg);
text-shadow: 0 0 10px #ffc;
}

#rating span.selected
{
color: #ff0;
opacity: 1;
transform: rotateX(0deg);
text-shadow: 0 0 30px #ffc;
}
</style>

</head>
<body>

<div id="rating">
<span class="selected" data-count='1' title='Poor'>★</span>
<span data-count='2' title='Fair'>★</span>
<span data-count='3' title='Good'>★</span>
<span data-count='4' title='Excellent'>★</span>
<span data-count='5' title='WOW!!!'>★</span>
</div>

<script>
document.getElementById('rating').onmouseover = function () {

let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onmouseover = function () {

let onStar = this.getAttribute('data-count');

for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('hover');
}

for (i = 0; i < onStar; i++) {
stars[i].classList.add('hover');
}

}
}
}
document.getElementById('rating').onmouseout = function () {

let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onmouseout = function () {

let onStar = this.getAttribute('data-count');

for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('hover');
}

}
}
}
document.getElementById('rating').onclick = function () {

let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onclick = function () {

let onStar = this.getAttribute('data-count');

for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('selected');
}

for (i = 0; i < onStar; i++) {
stars[i].classList.add('selected');
}

}
}
}
</script>

</body>
</html>


By     Created   
The power of the user (%)
65%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  3.9K     367

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  2.1K     249

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  1.3K     152

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  690     74

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  520     69

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  469     67

How replace reverse solidus using javascript ?How replace reverse solidus using javascript ?JAVASCRIPT

Click to see more ...

  327     54

get current url using javascriptget current url using javascriptJAVASCRIPT

Click to see more ...

  305     52

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  295     45

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  277     43