리뷰 평점 매기거나, 별점 매길때 재사용하기 좋은 코드..
- 기능 1) 마우스 Hover 시 색 들어옴
- 기능 2) 별점 클릭시 JavaSciprt로 value 전송
👉 예시 사진
👉 HTML 파일
<html>
<body>
<div class="star-rating space-x-4 mx-auto">
<input type="radio" id="5-stars" name="rating" value="5" onclick='getRating(event)'/><label for="5-stars">★</label>
<input type="radio" id="4-stars" name="rating" value="4" onclick='getRating(event)'/><label for="4-stars">★</label>
<input type="radio" id="3-stars" name="rating" value="3" onclick='getRating(event)'/><label for="3-stars">★</label>
<input type="radio" id="2-stars" name="rating" value="2" onclick='getRating(event)'/><label for="2-stars">★</label>
<input type="radio" id="1-stars" name="rating" value="1" onclick='getRating(event)'/><label for="1-stars">★</label>
</div>
</body>
</html>
👉 CSS 파일
.star-rating {
display: flex;
flex-direction: row-reverse;
font-size: 2.25rem;
line-height: 2.5rem;
justify-content: space-around;
padding: 0 0.2em;
text-align: center;
width: 5em;
}
.star-rating input {
display: none;
}
.star-rating label {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2.3px;
-webkit-text-stroke-color: #2b2a29;
cursor: pointer;
}
.star-rating :checked ~ label {
-webkit-text-fill-color: gold;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
-webkit-text-fill-color: #fff58c;
}
👉 JavaScript 코드
<script>
function getRating() {
const rating = document.getElementsByName('rating');
rating.forEach((star) => {
if(star.checked) {
console.log(star.value);
}
})
}
</script>
👉 전체 Full 코드
<html>
<head>
<style>
.star-rating {
display: flex;
flex-direction: row-reverse;
font-size: 2.25rem;
line-height: 2.5rem;
justify-content: space-around;
padding: 0 0.2em;
text-align: center;
width: 5em;
}
.star-rating input {
display: none;
}
.star-rating label {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2.3px;
-webkit-text-stroke-color: #2b2a29;
cursor: pointer;
}
.star-rating :checked ~ label {
-webkit-text-fill-color: gold;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
-webkit-text-fill-color: #fff58c;
}
</style>
<script>
function getRating() {
const rating = document.getElementsByName('rating');
rating.forEach((star) => {
if(star.checked) {
console.log(star.value);
}
})
}
</script>
</head>
<body>
<div class="star-rating space-x-4 mx-auto">
<input type="radio" id="5-stars" name="rating" value="5" onclick='getRating(event)'/><label for="5-stars">★</label>
<input type="radio" id="4-stars" name="rating" value="4" onclick='getRating(event)'/><label for="4-stars">★</label>
<input type="radio" id="3-stars" name="rating" value="3" onclick='getRating(event)'/><label for="3-stars">★</label>
<input type="radio" id="2-stars" name="rating" value="2" onclick='getRating(event)'/><label for="2-stars">★</label>
<input type="radio" id="1-stars" name="rating" value="1" onclick='getRating(event)'/><label for="1-stars">★</label>
</div>
</body>
</html>'HTML, CSS, JS' 카테고리의 다른 글
| [JavaScript, JQuery] Window.onload() vs $(document).ready() (0) | 2022.06.15 |
|---|---|
| [HTML, CSS] Loading Bar - Animation 예제 (0) | 2022.06.12 |
| [HTML] 검색되는 Dropdown Input Bar (0) | 2022.06.12 |
| [HTML, JavaScript] Video src 변경 방법 (Vanila JS, JQuery) (0) | 2022.05.27 |
| [CSS] 문제의 div 정렬 - Flex (1) | 2022.05.02 |