i'm working on a ratings project, where I need to get values from 1 to 5 represented with stars. in my code I already have the design working.
How can I get a value to then save with POST?
when marking the stars i need to obtain a value and then save it with the POST method.
PD: i am working with laravel 8
const ratingStars = [...document.getElementsByClassName("rating__star")];
const ratingResult = document.querySelector(".rating__result");
printRatingResult(ratingResult);
function executeRating(stars, result) {
const starClassActive = "rating__star fas fa-star";
const starClassUnactive = "rating__star far fa-star";
const starsLength = stars.length;
let i;
stars.map((star) => {
star.onclick = () => {
i = stars.indexOf(star);
if (star.className.indexOf(starClassUnactive) !== -1) {
printRatingResult(result, i + 1);
for (i; i >= 0; --i) stars[i].className = starClassActive;
} else {
printRatingResult(result, i);
for (i; i < starsLength; ++i) stars[i].className = starClassUnactive;
}
};
});
}
function printRatingResult(result, num = 0) {
result.textContent = `${num}/5`;
}
executeRating(ratingStars, ratingResult);
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
body {
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}
.rating {
position: relative;
width: 180px;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
gap: .3em;
padding: 5px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 2px #b3acac;
}
.rating__result {
position: absolute;
top: 0;
left: 0;
transform: translateY(-10px) translateX(-5px);
z-index: -9;
font: 3em Arial, Helvetica, sans-serif;
color: #ebebeb8e;
pointer-events: none;
}
.rating__star {
font-size: 1.3em;
cursor: pointer;
color: #dabd18b2;
transition: filter linear .3s;
}
.rating__star:hover {
filter: drop-shadow(1px 1px 4px gold);
}
<div class="rating">
<span class="rating__result"></span>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire