Random Colorful Letters

Random Colorful letters

If result is a text then you need to wrap each letter with span..
do like code below:

<div  id="list" rows="10"></div>
<script>
  $(function() {
    setTime();
    function setTime() {
        $.ajax({
             url : "../abc.php",
             dataType: "text",
             success : function (result) {
                  $("#list").html(result);
                  $("#list")
                  .contents()
                  .filter(function(){
                    return this.nodeType !== 1;
                  })
                  .wrap( "<b class='colorful_text'></b>" );
                   $.each($(".colorful_text"), function(o, v){

                      var textEle = $(this).text()
                      console.log("textEle", textEle)
                      $(this).html("")
                      for(var n=0; n<textEle.length; n++) {
                            var randomColor = Math.floor(Math.random()*16777215).toString(16);
                            var color = '#' + randomColor
                            var ele = document.createElement("span")
                            ele.style.color = color
                            ele.innerText = textEle[n]        

                            $(this).append(ele)

                      }

                })
             }           
        });
       var date = new Date().getTime();
       setTimeout(setTime, 3000);
       $("#list").html();

       //Here  should call a function to color all the words of the div
    }

});
</script>

Randomize letter color in javascript

Not elegant, but try:

function changeColor() {
var paragraphs = document.getElementsByTagName("p");

for(var i = 0; i < paragraphs.length; i++)
{
    var innerText = paragraphs[i].innerHTML;
    var innerTextSplit = innerText.split("");
    paragraphs[i].innerText = "";

    var isHTMLElement = false;

    for(var j = 0; j < innerTextSplit.length; j++) {
        if(innerTextSplit[j] == "<")
          isHTMLElement = true;

        if(!isHTMLElement){
          var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ");"
          innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
        }

        if(innerTextSplit[j] == ">")
            isHTMLElement = false;

    }

    innerTextSplit = innerTextSplit.join('');
    paragraphs[i].innerHTML += innerTextSplit;
}
}

I am trying to generate random color codes using JavaScript

If i understood you correctly. Try below function. It returns you the collection of colors if you pass anything and random. But if you pass baseColor it will generate hue set of colors based on basedColor. hue defined base colors are : red,yellow,green,cyan,blue & magenta.

Usage

example: 1 - getRandomColors(10) or getRandomColors(10,'random') or getRandomColors(10,'anything besides Hue')

result : //(10) ["#C4AD05", "#B63DCB", "#22A9FE", "#59DCAC", "#986FFD", "#493E56", "#49693D", "#83029A", "#59E3C0", "#C6FB84"]

example: 2 - getRandomColors(10,'blue') //baseColor

result: //(10) ["hsl(240, 79%, 19%)", "hsl(240, 44%, 45%)", "hsl(240, 13%, 64%)", "hsl(240, 63%, 73%)", "hsl(240, 52%, 45%)", "hsl(240, 61%, 83%)", "hsl(240, 46%, 58%)", "hsl(240, 35%, 6%)", "hsl(240, 89%, 89%)", "hsl(240, 76%, 97%)"]

Code

function getRandomColors(len, baseColor = 'random') {
        var colors = [];
        var baseValue = getColorValue(baseColor);
        var execFn = getExecFn(baseValue);

        for (var i = 0; i < len; i++) {
            colors.push(execFn());
        }

        return colors;

        function getExecFn(baseColorValue) {
            if (baseColorValue == -1) {
                return getRandomColor;
            }
            else {
                return hueSet;
            }
        }

        function hueSet() {
            h = baseValue;
            s = Math.floor(Math.random() * 100);
            l = Math.floor(Math.random() * 100);
            return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
        }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function getColorValue(baseColor) {
            switch (baseColor.toLowerCase()) {
                case 'red':
                    return 0;
                case 'yellow':
                    return 60;
                case 'green':
                    return 120;
                case 'cyan':
                    return 180;
                case 'blue':
                    return 240;
                case 'magenta':
                    return 300;
                default:
                    return -1;
            }
        }
    }

Random characters and random colors generator

A random selection can contain duplicates. If you don't want duplicates, what you want is a shuffle.

Here's one way to do this.

package com.ggl.testing;

import java.awt.Color;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class ShuffleTest {

    private static boolean shuffleLetters = true;
    private static boolean shuffleColors = true;

    private static int shuffleLetterIndex = 0;
    private static int shuffleColorIndex = 0;

    private static List<Character> letters = new ArrayList<>();
    private static List<Color> colors = new ArrayList<>();

    public static void main(String[] args) {
        System.out.println(shuffleLetter());
        System.out.println(shuffleLetter());
        System.out.println(shuffleLetter());

        System.out.println(shuffleColor());
        System.out.println(shuffleColor());
        System.out.println(shuffleColor());
    }

    public static char shuffleLetter() {
        if (shuffleLetters) {
            int start = (int) 'a';
            int end = (int) 'z';
            for (int i = start; i <= end; i++) {
                letters.add(Character.valueOf((char) i));
            }
            Collections.shuffle(letters);
            shuffleLetters = false;
        }

        return letters.get(shuffleLetterIndex++);
    }

    public static Color shuffleColor() {
        if (shuffleColors) {
            colors.add(Color.RED);
            colors.add(Color.YELLOW);
            colors.add(Color.GREEN);
            colors.add(Color.BLUE);
            Collections.shuffle(colors);
            shuffleColors = false;
        }

        return colors.get(shuffleColorIndex++);
    }

}

---

Related Topics