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

cleanup

Browse Source
This commit is contained in:
Karan 2021-11-25 19:55:16 +05:30 committed by GitHub
parent 1db7080e34
commit 534252fbfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
Chapter 9/star project
View File

@ -1,55 +0,0 @@
<!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>