Bootstrap Snippet Java Script Random Color and number using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container display-inline">   
<input type="text" id="text-color" style="width:80%;display:inline-block" class="form-control" />
<input type="submit" id="btn" class="btn btn-danger" />
<ul id="ppp" class="paganation">
    
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
ul{margin-left:0;padding-left:0px;}
    li{font-weight:bold;font-size:40px;text-transform: capitalize;display:inline-block;border:1px solid #ccc;margin:5px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
        $('#btn').click(function(){
            var letters = /[^a-zA-Z0-9\-\/]/;
            
            //var x = $('#text-color').val().split(' ');
            var x = $('#text-color').val();
            
                    var text = "";
            
            for(i=0; i < x.length; i++)
            {
                var randomColor = "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});               
                //text += '<li style="color:#'+(parseInt(Math.random()*1000000)+100000)+';">'+x[i]+'</li>'; 
        
                text += '<li style="color:#'+randomColor+';border:'+parseInt(Math.random()*16)+'px solid #'+randomColor+';margin:'+parseInt(Math.random()*50)+'px;">·' + x[i] + '·</li>';
                document.getElementById("ppp").innerHTML=text;
            }
                
            
        });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Java Script Random Color and number"
Bootstrap 4.1.1 Snippet by sachin6185

Related: See More

Questions / Comments:

"Java Script Random Color and number" Bootstrap 4.1.1 Snippet by sachin6185

Related: See More

Questions / Comments:

"Java Script Random Color and number"
Bootstrap 4.1.1 Snippet by sachin6185