JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<span id="2g">2g</span>

JavaScript

(function ($) {

    $.fn.roundColorRating = function (options) { //width(30px), borderSize (2px), value (2), from (5) 
        
        this.width(options.width);
        this.borderSize(options.borderSize);
        this.css ('border-radius', width/2);
        
        
        const red = '#21BB0C';
        const yellow = '#FAD900';
        const green = '#ED4406';
        
        let color = yellow;
        if (options.from % options.value === 0){
            color = green;
        } else if (options.from / 2 > options.value){
            color = red;
        } 
        this.css ('color', color);
        this.css ('border', borderSize + 'px solid ' + color);
        
        let fromWord = 'from';
        if (options.localizedFromWord){
            fromWord = options.localizedFromWord;
        }
        this.attr('title', options.value + ' ' + fromWord + ' ' + options.from);

        return this;

    };

}(jQuery));

$('#2g').roundColorRating(30, 2, 2, 5);