Ratings

basic rating

                
                <div class='dis-inblock pd-md'>
                    <span id='star-icon' class='material-icons txt-off-secondary' data-value='1'>
                        star
                    </span>
                    <span id='star-icon' class='material-icons txt-off-secondary' data-value='2'>
                        star
                    </span>
                    <span id='star-icon' class='material-icons txt-off-secondary' data-value='3'>
                        star
                    </span>
                    <span id='star-icon' class='material-icons txt-off-secondary' data-value='4'>
                        star
                    </span>
                    <span id='star-icon' class='material-icons txt-off-secondary' data-value='5'>
                        star
                    </span>
                </div>
                
            

rating css

                
                #star-icon:hover {
                    cursor: pointer;
                }
                
            

rating js

                
                const starIcons = document.querySelectorAll('#star-icon')

                starIcons.forEach(starIcon => {
                    starIcon.addEventListener('click', (e) => {
                        const maxRating = e.target.dataset.value
                        starIcons.forEach(star => {
                            if(star.dataset.value <= maxRating) {
                                star.classList.add('txt-warn')  
                            } else {
                                star.classList.remove('txt-warn')
                                star.classList.add('txt-off-secondary')  
                            }
                        })
                    })
                })