JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

<p id="p1">Make this paragraph colorful and light using the range option.</p>
<p id="p2">This paragraph contains only web-safe colors.</p>
<p class="pG">This paragraph is grey.</p>
<p class="pG">So is this one.</p>
<p>&nbsp;</p>
<p><a href="#" id="resetter">Click to reset first paragraph</a></p>
<p><a href="#" id="lighter">Click to make 2nd paragraph lighter</a></p>
<p><a href="#" id="darker">Click to make 2nd paragraph darker</a></p>

CSS

p {
    margin: 1em;
}

JavaScript

(function($) {
    var ptUtils = {
        websafe: [0,51,102,153,204,255]
    },
    TextPainter = {
        makeColor: function() {
            var num,
                color = [],
                rangeWidth = this.options.range.max - this.options.range.min;
            
            for(var i=0; i<3; i++) {
                if(this.options.websafe) {
                    num = ptUtils.websafe[Math.floor(Math.random()*(ptUtils.websafe.length))];
                } else {
                    num = Math.floor((Math.random()*rangeWidth)+this.options.range.min);
                }
                color.push(num);
                if(this.options.greyscale) {
                    color.push(num);
                    color.push(num);
                    break;
                }
            }
            return 'rgb('+color.join(',')+')';
            
        },
        
        doPaint: function() {
            var span, letters = this.el.innerHTML.split('');
            
            this.el.innerHTML = '';
            for(var i=0; i<letters.length; i++) {
                span = $('<span>');
                span.addClass(this.options.spanClass)
                    .css('color',this.makeColor())
                    .text(letters[i]);
                this.$el.append(span);
            }
        },
        
        unPaint: function() {
            var letters = [];
            
            this.$el.find('span.'+this.options.spanClass).each(function() { 
                letters.push(this.innerHTML);
            });
            this.el.innerHTML = letters.join('');
        },
        
        alterBrightness: function(amt) {
            var spans = this.$el.find('span.'+this.options.spanClass);
            spans.each(function(){
                var span = $(this),
                    color;

                color = span.css('color').substring(4,span.css('color').length-1).split(', ');
                color = $.map(color,function(c){ return parseInt(c,10)+amt; });
              ...