forked from YadavAkhileshh/Alien-Invasion-Defense
-
Notifications
You must be signed in to change notification settings - Fork 0
/
rate.html
119 lines (113 loc) · 4.4 KB
/
rate.html
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rate Our Game</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link rel="stylesheet" href="style.css">
<style>
.rating-container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
text-align: center;
}
.stars {
font-size: 2em;
color: #ccc;
cursor: pointer;
}
.stars .fas {
color: gold;
}
#experienceInput {
width: 100%;
height: 100px;
margin-top: 20px;
padding: 10px;
box-sizing: border-box;
}
#submitRating {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#submitRating:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="rating-container">
<h2>Rate Our Game</h2>
<div id="ratingStars" class="stars">
<i class="far fa-star" data-rating="1"></i>
<i class="far fa-star" data-rating="2"></i>
<i class="far fa-star" data-rating="3"></i>
<i class="far fa-star" data-rating="4"></i>
<i class="far fa-star" data-rating="5"></i>
</div>
<p id="ratingMessage"></p>
<textarea id="experienceInput" placeholder="Please share your experience" style="display: none;"></textarea>
<button id="submitRating" style="display: none;">Submit Rating</button>
</div>
<script>
const ratingStars = document.querySelectorAll('#ratingStars i');
const ratingMessage = document.getElementById('ratingMessage');
const experienceInput = document.getElementById('experienceInput');
const submitRating = document.getElementById('submitRating');
let currentRating = 0;
ratingStars.forEach(star => {
star.addEventListener('click', () => {
currentRating = star.getAttribute('data-rating');
updateStars(currentRating);
ratingMessage.textContent = `You've selected ${currentRating} star${currentRating > 1 ? 's' : ''}. Please share your experience!`;
experienceInput.style.display = 'block';
submitRating.style.display = 'block';
});
star.addEventListener('mouseover', () => {
const hoverRating = star.getAttribute('data-rating');
updateStars(hoverRating);
});
star.addEventListener('mouseout', () => {
updateStars(currentRating);
});
});
submitRating.addEventListener('click', () => {
const experience = experienceInput.value.trim();
if (experience) {
// Here you would typically send the rating and experience to your server
console.log(`Rating: ${currentRating}, Experience: ${experience}`);
ratingMessage.textContent = "Thank you for your feedback!";
experienceInput.style.display = 'none';
submitRating.style.display = 'none';
// Optionally, redirect back to the main page after a short delay
setTimeout(() => {
window.location.href = 'index.html';
}, 2000);
} else {
ratingMessage.textContent = "Please share your experience before submitting.";
}
});
function updateStars(rating) {
ratingStars.forEach(star => {
const starRating = star.getAttribute('data-rating');
if (starRating <= rating) {
star.classList.remove('far');
star.classList.add('fas');
} else {
star.classList.remove('fas');
star.classList.add('far');
}
});
}
</script>
</body>
</html>