JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<body>
    <div id="main-stuff">
        <p>
        There is some stuff in your main div<br>
        Probably your hangman figure and the<br>
        parts of the word that have been correctly guessed.
        </p>
    </div>
</body>

CSS

#main-stuff {
  margin: 1rem;
  padding: 0.8rem 1.5rem;
  border: 1px dotted black;
  background-color: antiquewhite;
}

.letter-button {
  /* of course you'd probably want to style the buttons too. */
  background-color: honeydew;
}

JavaScript

console.log('Adding the buttons');
for (let i = 0; i < 26; i++) {
   let button = document.createElement("BUTTON");
   button.classList.add('letter-button');
   let letter = String.fromCharCode(97+i);
   let txt = document.createTextNode(letter);
   button.appendChild(txt);
   document.body.appendChild(button);
}