Skip to content

Commit

Permalink
Feat(JS) Update and add stars
Browse files Browse the repository at this point in the history
  • Loading branch information
YNazymko12 committed Dec 15, 2023
1 parent 25bb664 commit baf2780
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 30 deletions.
21 changes: 16 additions & 5 deletions src/css/layout/05-modal-exercise.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
.modal-exercises {
position: relative;
z-index: 100;
/* overflow-y: auto; */
overflow: auto;
max-width: 100%;

Expand Down Expand Up @@ -141,20 +140,32 @@
}
}

.icon-star {
/* .icon-star {
padding: 2px;
width: 18px;
height: 18px;
fill: var(--color-yellow);
}
fill: rgba(244, 244, 244, 0.2);
} */

.icon-star-empty {
/* .icon-star-empty {
padding: 2px;
width: 18px;
height: 18px;
fill: rgba(244, 244, 244, 0.2);
} */

/* .icon-star:nth-child(3n + 1) {
fill: var(--color-yellow);
}
.icon-star:nth-child(3n + 2) {
fill: var(--color-yellow);
}
.icon-star:nth-child(3n) {
fill: var(--color-yellow);
} */

.modal-exercises__block {
margin-bottom: 40px;
}
Expand Down
64 changes: 39 additions & 25 deletions src/js/05-modal-exercises.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ const listItem = document.querySelector('.js-list');
listItem.addEventListener('click', onExercisesCardClick);

async function onExercisesCardClick(event) {
if (!event.target.closest('.filters__btn-second')) {
if (!event.target.closest('.card__btn')) {
return;
}

try {
const exerciseID = event.target
.closest('.filters__btn-second')
.closest('.card__btn')
.getAttribute('data-id');

const exerciseData = await apiService.getExercisesById(exerciseID);
Expand Down Expand Up @@ -43,34 +43,48 @@ function updateModal(markup) {
}

function createRating(rating) {
const maxRating = 5;
const filledStars = Math.floor(rating);
const remainder = rating - filledStars;

const filledStarsHTML =
'<svg class="icon-star"><use href="./img/sprite.svg#icon-star"></use></svg>'.repeat(
filledStars
);

const partialStarHTML = '';
if (remainder > 0) {
const roundedRemainder = Math.round(remainder * 10) / 10;
partialStarHTML = `<svg class="icon-star" style="width: ${
roundedRemainder * 100
}%"><use href="./img/sprite.svg#icon-star"></use></svg>`;
const starColor = '#EEA10C';
const emptyStarColor = '#F4F4F4';
const totalStars = 5;

let stars = '';
for (let i = 0; i < totalStars; i++) {
const gradientId = `starGradient${i}`;
const fillPercentage =
i + 1 <= rating ? 100 : i < rating ? (rating % 1) * 100 : 0;

const gradientStops = [
{ offset: '0%', color: starColor, opacity: '1' },
{ offset: `${fillPercentage}%`, color: starColor, opacity: '1' },
{
offset: `${fillPercentage + 1}%`,
color: emptyStarColor,
opacity: '0.20',
},
];

// Генерація linearGradient
const linearGradient = `
<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="0%">
${gradientStops
.map(
stop =>
`<stop offset="${stop.offset}" style="stop-color:${stop.color};stop-opacity:${stop.opacity}" />`
)
.join('')}
</linearGradient>
`;

const fill = `url(#${gradientId})`;

stars += `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">${linearGradient}<path d="M6.04894 0.927052C6.3483 0.0057416 7.6517 0.00574088 7.95106 0.927052L8.79611 3.52786C8.92999 3.93989 9.31394 4.21885 9.74717 4.21885H12.4818C13.4505 4.21885 13.8533 5.45846 13.0696 6.02786L10.8572 7.63525C10.5067 7.8899 10.3601 8.34127 10.494 8.75329L11.339 11.3541C11.6384 12.2754 10.5839 13.0415 9.80017 12.4721L7.58779 10.8647C7.2373 10.6101 6.7627 10.6101 6.41222 10.8647L4.19983 12.4721C3.41612 13.0415 2.36164 12.2754 2.66099 11.3541L3.50604 8.75329C3.63992 8.34127 3.49326 7.8899 3.14277 7.63525L0.930391 6.02787C0.146677 5.45846 0.549452 4.21885 1.51818 4.21885H4.25283C4.68606 4.21885 5.07001 3.93989 5.20389 3.52786L6.04894 0.927052Z" fill="${fill}" fill-opacity="1"/></svg>`;
}

const emptyStarsHTML =
'<svg class="icon-star-empty"><use href="./img/sprite.svg#icon-star"></use></svg>'.repeat(
maxRating - filledStars
);

const ratingText = Number.isInteger(rating)
? `${rating}.0`
: `${rating}.toFixed(1)`;
const starsHTML = `${filledStarsHTML}${partialStarHTML}${emptyStarsHTML}`;
: rating.toFixed(1);

const ratingWithStars = `${ratingText} ${starsHTML}`;
const ratingWithStars = `${ratingText} ${stars}`;

return ratingWithStars;
}
Expand Down

0 comments on commit baf2780

Please sign in to comment.