JSFiddle - React, Tailwind, and code Playground

by tenold

HTML

<div class="scramble">
    development
</div>

<div class="debugging"></div>

CSS

.scramble {
    border:2px solid black;
    display:inline-block;
    position:relative;
    width:200px;
    height:200px;
    padding:20px;
    box-sizing:border-box;
    font-family:sans-serif;
    font-size:40px;
    text-transform:uppercase;
    text-align:justify;
}

JavaScript

(function($) {
    
     // The main function    
    $.fn.scramble = function() {
	    // Loop over elements we are scrambling.
        $(this).each(function(){	        
	        that = this;	        
	        // Get div dimensions.
	        var w = $(this).width();
	        var h = $(this).height();
	        var p = parseInt($(this).css('padding'));
            var f = parseInt($(this).css('font-size'));
	        $('.debugging').append('w: ' + w + '<br/>');
	        $('.debugging').append('h: ' + h + '<br/>');
	        $('.debugging').append('p: ' + p + '<br/>');
	        
	        // Set explicit width and height on our element.
	        $(this).width(w);
	        $(this).height(h);
	        
	        // Put letters into an array.
	        var letters = $(this).text().trim(); // remove any whitespace
	        letters = letters.replace(/\s/g, ''); // remove spaces between any words
	        letters = letters.split(''); // create an array of the letters
	        $('.debugging').append('a: ' + letters + '<br/>');
	        
	        // Empty our div.
	        $(this).empty();
	        
	        // Loop over our letters and add a random position for each.
	        $.each( letters, function( i, val ) {
	            var span = $('<span>' + val + '</span>');
	            var styles = {
	                position: "relative",
	                padding: 0,
	                //left : $.getRandomInt(p,w-p),
	                top : $.getRandomInt(p,(h-p-f))
	            };
	            span.css(styles);
	            $(that).append(span);
	        });         
        }); 
    }
    
    // Get a random integer.  
    $.getRandomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    
    // Call the function.    
    $('.scramble').scramble();
    
})(jQuery);