Skip to content

Instantly share code, notes, and snippets.

@cagataycali

cagataycali/index.html

Created November 24, 2021 04:03
Show Gist options
  • Save cagataycali/121b1bdfdd38f23fc6cac45858d97d18 to your computer and use it in GitHub Desktop.
Save cagataycali/121b1bdfdd38f23fc6cac45858d97d18 to your computer and use it in GitHub Desktop.
Download ZIP
Star component - simple
Raw
index.html
<html>
<head>
<title>Star component</title>
<style>
.star-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.star {
text-decoration: none;
width: 50px;
height: 50px;
display: inline-block;
margin-right: 20px;
border: 1px solid red;
}
.five-stars:hover,
.five-stars:hover ~ .four-stars,
.five-stars:hover ~ .three-stars,
.five-stars:hover ~ .two-stars,
.five-stars:hover ~ .one-star,
.four-stars:hover,
.four-stars:hover ~ .three-stars,
.four-stars:hover ~ .two-stars,
.four-stars:hover ~ .one-star,
.three-stars:hover,
.three-stars:hover ~ .two-stars,
.three-stars:hover ~ .one-star,
.two-stars:hover,
.two-stars:hover ~ .one-star,
.one-star:hover {
background: red;
}
</style>
</head>
<body>
<header>
<h1>Star component</h1>
</header>
<main>
<div class="star-wrapper">
<a class="star five-stars" data-count="5">&nbsp;</a>
<a class="star four-stars" data-count="4">&nbsp;</a>
<a class="star three-stars" data-count="3">&nbsp;</a>
<a class="star two-stars" data-count="2">&nbsp;</a>
<a class="star one-star" data-count="1">&nbsp;</a>
</div>
<div id="status"></div>
</main>
<script>
document.addEventListener("click", handleClick);
const statusElement = document.getElementById("status");
function handleClick(e) {
if (e.target.tagName === "A" && e.target.dataset.count) {
statusElement.innerText = `${e.target.dataset.count} selected`;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment