JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div {margin-bottom: 30px;}
      
    </style>
    </head>
    
    <body>
        <div id="cameraRatingWidget"></div>
        <div id="value4MoneyRatingWidget"></div>
         <div id="batteryRatingWidget"></div>
        <div id="specScoreRatingWidget"></div>
        <div id="chipsetRatingWidget"></div>
        <div id="ramRatingWidget"></div>

        <script src="js/vendor/jquery/jquery.min.js"></script>
        <script src="js/vendor/jquery/jquery.colorrating.js"></script>


    </body>

</html>

JavaScript

(function ($) {

    $.fn.colorRating = function (options) {
        
        this.width(options.width);
        this.height(options.height);
        
        const red = 'rgb(250, 75, 0)';
        const yellow = 'rgb(250, 150, 0)';
        const green = 'rgb(0, 150, 0)';
        
        const redRed = 250;
        const redGreen = 50;
        const yellowRed = 250;
        const yellowGreen = 150;
        const greenRed = 0;
        const greenGreen = 150;
        
        let rgbColor;
        if (options.score == 0){
            rgbColor = red;
        }
        if (options.score == 5){
            rgbColor = yellow;
        }
        if (options.score == 10){
            rgbColor = green;
        }
        if (options.score > 0 && options.score < 5){
            rgbColor =  'rgb(250, ' + (75 + options.score * 7.5) + ', 0)';
        }
        if (options.score > 5 && options.score < 10){
            rgbColor =  'rgb(' + (250 - (options.score - 5) * 25) + ' ,150, 0)';
        }
        //this.find('.color').css('background-color', rgbColor);
        this.append ('<div style=" float: left; background-color: '+rgbColor+'; width: '+options.score * options.width/10+'px; height: '+options.height+'px"></div>');
                        
        
        
        this.append ('<div style="float: right; background-color: #eee; '
                                          + 'width: '+ (10 - options.score) * options.width/10+'px; height: '+options.height+'px"></div>');

        

        return this;

    };

}(jQuery));

 $('#cameraRatingWidget').colorRating({width:400, height:20, score:1.7});
            $('#value4MoneyRatingWidget').colorRating({width:400, height:20, score:3.7});
            $('#batteryRatingWidget').colorRating({width:400, height:20, score:5});
            $('#specScoreRatingWidget').colorRating({width:400, height:20, score:6.7});
            $('#chipsetRatingWidget').colorRating({width:400, height:20, score:8.7});
           ...