ratings-app-vanillaJS-CSS/StarRatings.html at master · ruhichandra14/ratings-app-vanillaJS-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Ratings</title>
	<link rel="stylesheet" href="">
	<!-- <link href='//fonts.googleapis.com/css?family=Frijole' rel='stylesheet'> -->
	<style>

	body{
		margin: 50px 0 0 100px;
	}

	.rating-button{
		width: 25px;
		height: 25px;
		background-color: white;
	}
	.rating-button:hover{
		background-color: gold;
	}
	h3{
		color: steelblue;
		font-family: Comic Sans MS;
		font-size: 20px;
	}
	.active-rating{
		background-color: gold;
	}
	#result{
		font-family: Comic Sans MS;
		width: 150px;
		outline: 5px dashed gold;
		border: 2px dotted gold;
		animation: 5s animateBorder ease infinite;
	}

	@keyframes animateBorder {
		to {
		    box-shadow: 0 0 0 5px yellow;
		}
	}

	</style>
</head>
<body>

	<h3>RATINGS </h3>
	<br/>
	<br/>
	<button type="button" class="rating-button" value="1"></button>
	<button type="button" class="rating-button" value="2"></button>
	<button type="button" class="rating-button" value="3"></button>
	<button type="button" class="rating-button" value="4"></button>
	<button type="button" class="rating-button" value="5"></button>
	<br/>
	<br/>
	<br/>
	<br/>
	<div id = "result">Current Rating is 0</div>

<script>

	var star = document.getElementsByClassName('rating-button');
	var clicked = false;
	var ratings = 0;

	for(i=0;i<star.length;i++){
		star[i].addEventListener('click',function activeStar(event){
		        if(!this.classList.contains('active-rating')){
		            for(j=0;j<parseInt(event.target.value);j++){
			            console.log('Rated star was ',event.target.value);
			            console.log("entered for loop");
			            console.log("rated element are ",j);
			            console.log("clicked value ",j,clicked);
			            star[j].classList.add('active-rating');
			            console.log("clicked value for ",j ,clicked);

		            }
		            ratings = parseInt(event.target.value);
                }

			else{

		        console.log('Unrated star was ',event.target.value);
		        for(j=parseInt(event.target.value)-1;j<5;j++){
		        	console.log('unrated elements are ',j + 1);
		        	star[j].classList.remove('active-rating');
		        }
		        ratings = parseInt(event.target.value)-1;
			}
			document.getElementById('result').innerHTML = "Current Rating is " + ratings;
        });
	}


</script>
</body>
</html>