ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project 2

Browse Source
This commit is contained in:
Karan 2021-11-24 22:51:28 +05:30 committed by GitHub
parent e54eaabf63
commit ec4ae6e57d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Chapter 11/Project 2 Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>Star Rater</title>
<style>
.stars ul {
list-style-type: none;
padding: 0;
}
.star {
font-size: 2em;
color: #ddd;
display: inline-block;
}
.orange {
color: orange;
}
.output {
background-color: #ddd;
}
</style>
</head>
<body>
<ul class="stars">
<li class="star">&#10029;</li>
<li class="star">&#10029;</li>
<li class="star">&#10029;</li>
<li class="star">&#10029;</li>
<li class="star">&#10029;</li>
</ul>
<div class="output"></div>
<script>
const starsUL = document.querySelector(".stars");
const output = document.querySelector(".output");
const stars = document.querySelectorAll(".star");
stars.forEach((star, index) => {
star.starValue = (index + 1);
star.addEventListener("click", starRate);
})
function starRate(e) {
output.innerHTML = `You Rated this ${e.target.starValue} stars`;
stars.forEach((star, index) => {
if (index < e.target.starValue) {
star.classList.add("orange");
} else {
star.classList.remove("orange");
}
})
}
</script>
</body>
</html>