JSFiddle - React, Tailwind, and code Playground

by veer712

HTML

<html>
<head><title> Test Sorting Image </title>
<script type="text/javascript">
function getimagename(){
    var imageArray = [];
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) 
    {
        var filename = getFileName(images[i].src);                
        imageArray.push({fn:filename,fsrc:images[i].src});
    }
    imageArray = imageArray.sort(function(a,b){
        var textA = a.fn.toUpperCase();
        var textB = b.fn.toUpperCase();
        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        //console.log('a:'+a.fn+'\nb:'+b.fn);
    });
    removeAllImages();
    reorderImage(imageArray);                 
}
function reorderImage(imgArray){   
    var divTag = document.getElementsByTagName('div');    
    for(var i = 0; i<imgArray.length;i++){
        var elem = document.createElement("img");
        elem.setAttribute("src", imgArray[i].fsrc);       
        divTag[0].appendChild(elem);
    }
}
function getFileName(url){
    var filename = url.substring(url.lastIndexOf('/')+1);
    return filename;
}
function removeAllImages(){
    var images = document.getElementsByTagName('img');
    var l = images.length;
    for (var i = 0; i < l; i++) {
        images[0].parentNode.removeChild(images[0]);
    }
}
</script>
</head>        
<body onload="getimagename();" > 
<div> 
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-grey/128/speech-balloon-white-d-icon.png"/>       
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-grey/128/speech-balloon-white-a-icon.png"/>
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-grey/128/speech-balloon-white-c-icon.png"/>     
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-grey/128/speech-balloon-white-b-icon.png"/> 
</div>      
</body>
</html>