JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<table>
    <tr>
        <td rowspan="2">
             <h4>Lives: 6</h4>

            <img src="file:///Users/joshkonowitz/Downloads/hangman.png" />
        </td>
        <td>
             <h3 id="spaces"></h3>

        </td>
    </tr>
    <tr>
        <td class="buttons">
            <input type="button" value="a" onclick="searchLetter(this)"></input>
            <input type="button" value="b" onclick="searchLetter(this)"></input>
            <input type="button" value="c" onclick="searchLetter(this)"></input>
            <input type="button" value="d" onclick="searchLetter(this)"></input>
            <input type="button" value="e" onclick="searchLetter(this)"></input>
            <input type="button" value="f" onclick="searchLetter(this)"></input>
            <input type="button" value="g" onclick="searchLetter(this)"></input>
            <input type="button" value="h" onclick="searchLetter(this)"></input>
            <input type="button" value="i" onclick="searchLetter(this)"></input>
            <input type="button" value="j" onclick="searchLetter(this)"></input>
            <input type="button" value="k" onclick="searchLetter(this)"></input>
            <input type="button" value="l" onclick="searchLetter(this)"></input>
            <input type="button" value="m" onclick="searchLetter(this)"></input>
            <input type="button" value="n" onclick="searchLetter(this)"></input>
            <input type="button" value="o" onclick="searchLetter(this)"></input>
            <input type="button" value="p" onclick="searchLetter(this)"></input>
            <input type="button" value="q" onclick="searchLetter(this)"></input>
            <input type="button" value="r" onclick="searchLetter(this)"></input>
            <input type="button" value="s" onclick="searchLetter(this)"></input>
            <input type="button" value="t" onclick="searchLetter(this)"></input>
            <input type="button" value="u" onclick="searchLetter(this)"></input>
            <input...

CSS

table {
    border: 4px solid black;
    width: 660px;
    height: 300px;
}
td {
    padding-right: 20px;
}
.buttons {
    margin-top: -20px;
}
td input {
    display: inline;
    height: 30px;
    width: 30px;
}
.buttons {
    height: 150px;
}
img {
    height: 200px;
    width: 150px;
}
#restart {
    height: 80px;
    width: 660px;
    font-family: Calibri;
    font-size: 40px;
    font-weight: bold;
}
#spaces {
    font-size: 50px;
    text-align:center;
}

JavaScript

var dictionary = ["apple", "astronomer", "animation", "animal", "axe", "america", "argentina", "baseball", "batman", "blueberry", "building", "beans", "bats", "bracket", "cat", "cherry", "chile", "cinderella", "dog", "dinner", "diner", "demon", "delta", "elephent", "fleven", "frankenstein", "fruit", "feet", "football", "game", "goat", "gasoline", "hat", "hill", "helium", "hangman", "indigo", "indonesia", "joke", "jealous", "joker", "killer", "konowitz", "knot", "knee", "loser", "language", "lion", "length", "mammoth", "moutain", "mixture", "nothing", "narrator", "neck", "octopus", "orange", "point", "powerful", "painting", "qoute", "quaker", "realistic", "red", "reader", "science", "scientist", "scene", "sword", "texture", "tiger", "torch", "uptown", "utility", "vacation", "velocity", "watchdog", "winner", "wardrobe", "winnebago", "wanderers", "xerox", "exodus", "zebra"];
 var word;
     var wordSpaces;
 function pickWord() {
     word = dictionary[Math.floor(Math.random() * dictionary.length)];
     wordSpaces = [];
     for (var i = word.length - 1; i >= 0; i--)
     wordSpaces.push("_ ");
     document.getElementById('spaces').innerHTML = wordSpaces.join('');

 }
 function searchLetter(obj) {
     var letter = obj.value;
     for (var i = 0; i <= word.length; i++) {
         if (word[i] == letter) {
             wordSpaces[i] = letter;
             document.getElementById('spaces').innerHTML = wordSpaces.join('');
             break;
         }
     }
 }