CODEWITHSUNDEEP
javascriptrandomrating
Anton Germoc
Anton Germoc

Reputation: 23

Random stars rating with javascript

i'm trying to make a random star-rating system by clicking on a button.

I would like to display a number of stars between 1 and 5 on the screen after clicking on a button.

When i click on the button a second time, i would like to reset the star rating but i can't. The rating is saved on the previous numbers of stars.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/5.15.3/css/all.min.css" />
   <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="note">

    <div class="stars">
        <i id="first-star" class="fas fa-star"></i>
        <i id="second-star" class="fas fa-star"></i>
        <i id="third-star" class="fas fa-star"></i>
        <i id="fourth-star" class="fas fa-star"></i>
        <i id="last-star" class="fas fa-star"></i>
    </div>

    <button id="btn">Change</button>
    
</div>




    <script src="main.js"></script>
</body>

</html>

JAVASCRIPT :

 let starsContainer = document.querySelector('.stars')
 starsContainer.style.color = "gray"

function starsNote (){

    let star1 = document.getElementById('first-star')
    let star2 = document.getElementById('second-star')
    let star3 = document.getElementById('third-star')
    let star4 = document.getElementById('fourth-star')
    let star5 = document.getElementById('last-star')

    let starArray = [star1, star2, star3, star4, star5]

// RANDOM NUMBER

    randomStarNumber = Math.ceil(Math.random() * 5)

// GET RANDOM STARS

    for (let i = 0; i < randomStarNumber; i++){
    starArray[i].style.color = "#FFB703"

    }


}



document.getElementById('btn').addEventListener('click', 
() => {
    starsNote()

})

Thank you !

Upvotes: 0

Views: 548

Answers (2)

Terry
Terry

Reputation: 66188

The problem is coming from you failing to reset the color of the stars to grey. This means that once a star color is set to yellow, it is stuck: therefore your star rating will only increase and never decrease.

A quick fix will be to simply reset the color before the for loop:

starsContainer.querySelectorAll('.fas').forEach(el => el.style.color = "gray");
for (let i = 0; i < randomStarNumber; i++) {
  starArray[i].style.color = "#FFB703";
}

However, there is a better way: instead of looping twice, you simply have to go through the array of stars and then assign them a color based on whether their index match the given star rating:

function starsNote() {
  // RANDOM NUMBER
  randomStarNumber = Math.ceil(Math.random() * 5);

  // GET RANDOM STARS
  starsContainer.querySelectorAll('.fas').forEach((el, i) => el.style.color = i <= randomStarNumber ? '#ffb703' : 'gray');
}

See proof-of-concept below:

let starsContainer = document.querySelector('.stars');
starsContainer.style.color = "gray";

function starsNote() {
  // RANDOM NUMBER
  randomStarNumber = Math.ceil(Math.random() * 5);

  // GET RANDOM STARS
  starsContainer.querySelectorAll('.fas').forEach((el, i) => el.style.color = i <= randomStarNumber ? '#ffb703' : 'gray');
}



document.getElementById('btn').addEventListener('click', () => {
  starsNote();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="note">

  <div class="stars">
    <i id="first-star" class="fas fa-star"></i>
    <i id="second-star" class="fas fa-star"></i>
    <i id="third-star" class="fas fa-star"></i>
    <i id="fourth-star" class="fas fa-star"></i>
    <i id="last-star" class="fas fa-star"></i>
  </div>

  <button id="btn">Change</button>

</div>

Upvotes: 1

phatfingers
phatfingers

Reputation: 10250

You just need to reset all the stars, including the background ones, with whatever technique you use.

for (let i = 0; i < 5; i++){
    starArray[i].style.color = i < randomStarNumber ? "#FFB703" : "gray";
}

Upvotes: 0

Related Questions