Following the tutorial https://www.youtube.com/watch?v=u3rylF3y3og&ab_channel=TraversyMedia
I'm coding something that has a Star review feature. I want to change the width (through document.querySelector('').style.width = starPercentage) of elements to determine how many stars a review gave:
function getRatings() {
for (let rating in ratings) {
// Get percentage
const starPercentage = (ratings[rating] / starsTotal) * 100;
// Round to nearest 10
const starPercentageRounded = `${Math.round(starPercentage / 10) * 10}%`;
// Set width of stars-inner to percentage
document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
// Add number rating
document.querySelector(`.${rating} .number-rating`).innerHTML = ratings[rating];
}
}
But instead of the hard-coded values I'm getting the data from mongoose and express. What's the best way to manipulate the stars of each review?
The following article contains simple technique for filling star ratings in Javascript. https://webdesign.tutsplus.com/tutorials/a-simple-javascript-technique-for-filling-star-ratings--cms-29450
CSS
and add the correct css to the html class tag for example ( , ....)