JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<form id="lbGame">
    <div class="gameTitle">
        <h2> Word Scrambler </h2>
        <h4> Created By Lyndsey Browning </h4>        
    </div>    
    <p> Here are your letters: </p>
    <div id="gameLetters"></div>
    <div id="gameWord">
        <input type="text" name="word" id="word" />
        <div><a href="#" class="lb-sort" id="sort" data-sort="az"> sort a-z </a></div>
        <div><a href="#" class="lb-sort" data-sort="random"> shuffle </a></div>
    </div>
    <div id="wordsFound">
        <span> Words Found (0/212) </span>
        <div>
            <table id="wordList" cellspacing="0">
                <tr>
                    <td> RELATES </td>
                    <td>........ 7</td>
                </tr>
                 <tr>
                    <td> STALER </td>
                    <td>........ 6</td>
                </tr>
                 <tr>
                    <td> STEALER </td>
                    <td>........ 7</td>
                </tr>
                 <tr>
                    <td> STEAL </td>
                    <td>........ 5</td>
                </tr>
                 <tr>
                    <td> LASTER </td>
                    <td>........ 6</td>
                </tr>
                <tr>
                    <td> TREES </td>
                    <td>........ 5</td>
                </tr>                
            </table>                
        </div>
    </div>
    <input type="button" id="reset_game" value=" New Letters " />
</form>
</div>

CSS

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body {
    font-family: 'Alegreya Sans';
}

h2,h3,h4 { 
    margin:0
}

input[type=text] { 
    outline-color: #3e3e3e; 
} 

input[type=submit] {
    cursor:pointer;
    outline:none;
}

.container {
    width:90%;
    margin:0 auto;   
}

.border {    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#lbGame .gameTitle {        
    background:#3e3e3e;
    color:white;
    padding:5px 0px;
    text-align:center;
}

#lbGame #gameWord {
    width:98%;    
    padding:1%;    
    margin: 10px 0;      
    text-align:center;
}

#lbGame #gameWord input[type=text], #lbGame #gameWord input[type=submit] {
    padding:1%;
    font-size:80%;
    border:1px grey solid;    
}

#lbGame #gameWord input[type=text] { 
    width:25%;
    font-size:18px;
    color:#3c71b7;    
    text-transform:uppercase;
    text-align:center;
}

#lbGame #gameWord input[type=submit] { 
    width: 18%;  
    background:#eeeeee;      
} 

p {
   font-size:17px;
}

#gameLetters ul { 
    list-style:none; 
    padding:0;
    margin:0;
    text-align:center; 
}

#gameLetters ul li {      
    display:inline-block;    
    font-size:1.9em;
    padding: 0 2%;
    margin: 0 4px;
}

#wordsFound span, #wordsFound div {
    width:50%;
    padding:1%;
}
#wordsFound span {
    display:block;
    background:#3e3e3e;
    color:white;    
}

#wordsFound div {
    height:150px;    
    border:1px #3e3e3e solid;  
}

#wordsFound #wordList {
    width:100%;    
}

#wordsFound #wordList tr:nth-child(even) {
    background:#eee;
}

#wordsFound #wordList tr td:nth-child(2) {
    float:right;
    color:#3c71b7;    
}

JavaScript

var lbGame = {   
    ltrWrap: document.getElementById('gameLetters'),
    words: document.getElementById('word'),
    letters: [], // this array will hold the random 7 letters
    reset: document.getElementById('reset_game'), //button that recreates game
    bgColor: 'rgb(60, 113, 183)',    
    init: function() { /* initialisation that controls all methods */
        var possible = "AAAAAAAAABBCCDDDDDEEEEEEEEEEEEEFFGGGHHHHIIIIIIIIJKLLLLMMNNNNNOOOOOOOOPPQRRRRRRSSSSSTTTTTTTUUUUVVWWXYYZ"; //102 letters        
        var tileDist = []; // this array will hold the possible letters 
        var ltrList = document.createElement('ul'); // the letter list container
        var ltrLength = 7; // how many letters we want the game to contain
           
        //push the possible letters in to the alphabet array       
        for (var i=0; i<possible.length; i++) {            
            tileDist.push(possible.charAt(i));    
        }
        
        //get 7 random letters from the tile distribution
        for(var l=0;l<ltrLength;l++) {
            //get random letter and push it in to the letters array            
            var rand = Math.floor(Math.random() * tileDist.length);
            lbGame.letters.push(tileDist[rand]); 
            
            //create the list that will hold the letters in            
            ltrList.innerHTML += '<li>' +  lbGame.letters[l] + '</li>';            
        }
        
        //append letters to the page
        this.ltrWrap.appendChild(ltrList); 
        
        //sort
        var sort = document.getElementsByClassName('lb-sort');
        for (var i = 0; i < sort.length; i++) {
            sort[i].onclick=function() {
                var attr = this.getAttribute('data-sort');
                lbGame.sort(attr);                   
            }
        }       
        
        //call the enter function
        this.enter();              

        //reset game
        this.reset.onclick = function() {            
    ...