https://edtechbooks.org/js/etb/starRating.js

1class StarRating {
2    constructor(value = null) {
3        this.value = value;
4    }
5    RenderForm(chapter_id, rendering_classes = '') {
6        let e = this.Render(null, rendering_classes);
7        $(e).find('span').first().attr('data-bs-title','Click to submit your rating').attr('data-bs-placement','bottom');
8        $(e).find('span').first().css({cursor: 'pointer'});
9        if(this.value!==null) {
10            this.pvalue = this.value/5;
11            this.UpdateCSS($(e).find('span').first());
12        }
13        $(e).find('span').first().on('mousemove', (event) => {
14            if(this.value===null || this.value===0) {
15                this.pvalue = 100*event.offsetX/$(event.target).width();
16                this.UpdateCSS(event.target); 
17            }
18        });
19        $(e).find('span').first().on('mouseleave', (event) => {
20            if(this.value===null || this.value===0) {
21                this.pvalue = 0;
22                this.UpdateCSS(event.target);
23            }
24        });
25        $(e).find('span').first().on('click', (event) => {
26            this.pvalue = 100*event.offsetX/$(event.target).width();
27            this.UpdateCSS(event.target);
28            this.value = this.pvalue*5/100;
29            Rate(chapter_id, this.value);
30        });
31        return e;
32    }
33    UpdateCSS(e) {
34        $(e).css({background: 'linear-gradient(90deg, #ffd700 ' + this.pvalue + '%, #e5e5e5 ' + (this.pvalue + 1) + '%)'}); 
35    }
36    Render(total = null, rendering_classes = '') {
37        let c = $('<div></div>').addClass('d-flex flex-row align-items-center');
38        let i = $('<span></span>').appendTo(c).addClass(rendering_classes);
39        i.css({ width: '250px', height: '40px', 'margin-right': '10px' });
40        if (this.value === null) this.value = 0;
41        this.pvalue = 100 * parseFloat(this.value) / 5;
42        $(i).css({
43            background: 'linear-gradient(90deg, #ffd700 ' + this.pvalue + '%, #e5e5e5 ' + (this.pvalue + 1) + '%)',
44            '-webkit-mask-image': 'url(/images/star-mask-single.svg)',
45            'mask-image': 'url(/images/star-mask-single.svg)'
46        });
47        if (total !== null) {
48            let t = $('<span></span>').addClass('mx-3 me-auto opacity-50').appendTo(c);
49            $(t).text(parseInt(total).toLocaleString());
50        }
51        return c[0];
52    }
53}