JSFiddle - React, Tailwind, and code Playground

by JoshKono

HTML

<h1>Hang-Man</h1>

<table>
    <tr>
        <td rowspan="2">
             <h4>Lives:</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"></input>
            <input type="button" value="B"></input>
            <input type="button" value="C"></input>
            <input type="button" value="D"></input>
            <input type="button" value="E"></input>
            <input type="button" value="F"></input>
            <input type="button" value="G"></input>
            <input type="button" value="H"></input>
            <input type="button" value="I"></input>
            <input type="button" value="J"></input>
            <input type="button" value="K"></input>
            <input type="button" value="L"></input>
            <input type="button" value="M"></input>
            <input type="button" value="N"></input>
            <input type="button" value="O"></input>
            <input type="button" value="P"></input>
            <input type="button" value="Q"></input>
            <input type="button" value="R"></input>
            <input type="button" value="S"></input>
            <input type="button" value="T"></input>
            <input type="button" value="U"></input>
            <input type="button" value="V"></input>
            <input type="button" value="W"></input>
            <input type="button" value="X"></input>
            <input type="button" value="Y"></input>
            <input type="button" value="Z"></input>
        </td>
    </tr>
</table>
<button onclick="pickWord()" id="restart">Pick A Word</button>

CSS

h1 {
    text-size: 40px;
    color: #CD5C5C;
}
table {
    border: 4px solid black;
    width: 630px;
    height: 300px;
}
td input {
    display: inline;
    height: 30px;
    width: 30px;
}
.buttons {
    height: 150px;
}
img {
    height: 200px;
    width: 150px;
}
#restart {
    height: 80px;
    width: 630px;
    font-family: Calibri;
    font-size: 40px;
    font-weight: bold;
}

JavaScript

var dictionary = ["Apple", "Astronomer", "Animation", "Animal", "Axe", "America", "Argentina", "Baseball", "Batman", "Blueberry", "Beans", "Bats", "Bracket", "Cat", "Cherry", "Chile", "Dog", "Dinner", "Diner", "Demon", "Delta", "Elephent", "Eleven", "Frankenstein", "Fruit", "Feet", "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 wordSpaces = "_ _ _ _ _"

            function pickWord() {
                var word = dictionary[Math.floor(Math.random() * dictionary.length)];
                wordSpaces = "_" * word.length;
                document.getElementById('spaces').innerHTML = wordSpaces;

            }

            function searchLetter() {
                //Get Value
                //Search word arrray
                //if true change spaces array
                //else change images
            }