JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<!--<div class="ficha">
    <div class="scramble">D</div>
</div>
-->



<span id="board"></span>
	<br /><br />
	<span id="assemble"></span>
	<br />
	<br />
		<span id="theWord"></span>
	<form>
	<input type="button" value="->See Word" onclick="showWord();" />
   <b style="visibility:hidden">__</b>
	<input type="button" value="Play Again!" onclick="javascript:history.go(0);" />
	
        
      
	</form>

CSS

a.scramble {
    background-color: #eee;
    width: 80px;
    height: 80px;
    color: #737373;
    font-family: century gothic;
    text-decoration: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    float: left;
    margin: 15px;
    -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.16);
}
.scramble{
    font-size:50px;
    padding:10px 0px 0px 0px;
    text-align:center;
}
.board{
    display:inline-block;
}

body {
		  text-align:center;
		 }

span#assemble {
						 font-weight:bold;
						 font-size:30;
						 position:relative;
						 }
span#theWord {
						 color:white;
						 background-color:black;
						 font-weight:bold;
						 font-size:30;
						 position:relative;
						 border:2 inset gray;
						 }
a.scramble:hover {
				  background-color:black;
					color:white;
				}

JavaScript

var word=new Array("ENLIGHTENING","MAJESTIC","DISRESPECT","SCULPTURE","BLUNTNESS","SECURITY","ADEPT","AWESOME");
var letter=new Array();
var rand;
var actual;
window.onload=main;
function main()
{
  getRand();
	scrambleWord();
	creatWord();
}
function scrambleWord()
{
 actual=word[rand];
 Temp=word[rand].length;
  for(var HUCKO=0;HUCKO<Temp+2;HUCKO++)
	{
	 RHUCKO1=HUCKO-1;
	  letter[HUCKO]=word[rand].substring(RHUCKO1,RHUCKO1-1)
	}
	letter.sort();
	word[rand]="";
	for(var HUCKO=0;HUCKO<Temp+2;HUCKO++)
	word[rand]+=letter[HUCKO];
}
function getRand()
{
  rand=Math.floor(Math.random()*word.length);
}
function creatWord()
{
 for(var x=0;x<word[rand].length+2;x++)
 {
  RHUCKO1=x-1;
  a=document.createElement('a');
	a.id="aid"+x;
	a.className="scramble";
	a.innerHTML=word[rand].substring(RHUCKO1,RHUCKO1-1);
	a.href="javascript:append('"+x+"');";
	document.getElementById('board').appendChild(a);
 }
}
function creatWord2(x)
{
  RHUCKO1=x-1;
  a=document.createElement('a');
	a.id="aid2"+x;
	a.className="scramble";
	a.innerHTML=word[rand].substring(RHUCKO1,RHUCKO1-1);
	a.href="javascript:retract('"+x+"');";
	document.getElementById('assemble').appendChild(a);

}
function append(RHUCKO1)
{
  document.getElementById('aid'+RHUCKO1).style.visibility="hidden";
	//document.getElementById('assemble').innerHTML+=document.getElementById('aid'+RHUCKO1).innerHTML;
	creatWord2(RHUCKO1);
}
function retract(RHUCKO1)
{
  document.getElementById('aid'+RHUCKO1).style.visibility="visible";
	elem=document.getElementById('aid2'+RHUCKO1);
	document.getElementById('assemble').removeChild(elem);
}
function showWord()
{
  document.getElementById('theWord').innerHTML=actual;
}
function emptyChecker(){
    if($("letter").html() == ""){
        this.hide();
    }
}