JSFiddle - React, Tailwind, and code Playground
by velo_ninja
HTML
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
var buttons = alphabet.map(function(letter) {
var button = document.createElement('button');
button.innerHTML = letter;
button.onclick = function() {
alert(letter);
};
return button;
});
buttons.forEach(function(button) {
document.body.appendChild(button);
});
var style = document.createElement('style');
style.innerHTML = 'button { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; }';
document.head.appendChild(style);
style.innerHTML = 'button { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; color: red; }';
var row1 = document.createElement('div');
var row2 = document.createElement('div');
var row3 = document.createElement('div');
buttons.slice(0, 9).forEach(function(button) {
row1.appendChild(button);
});
buttons.slice(9, 18).forEach(function(button) {
row2.appendChild(button);
});
buttons.slice(18, 26).forEach(function(button) {
row3.appendChild(button);
});
document.body.appendChild(row1);
document.body.appendChild(row2);
document.body.appendChild(row3);
var hangman = document.createElement('img');
hangman.src = 'https://media.istockphoto.com/illustrations/simple-illustration-of-hangman-game-illustration-id1196954772?k=20&m=1196954772&s=612x612&w=0&h=nzsr9bCwxp9xW3dp-nBJeXE7TVGqnWtdJpbaXvEyl3E=';
hangman.style.width = '50%';
hangman.style.float = 'right';
document.body.appendChild(hangman);
var container = document.createElement('div');
container.appendChild(row1);
container.appendChild(row2);
container.appendChild(row3);
container.appendChild(hangman);
document.body.appendChild(container);
var word = 'hello';
var wordDisplay = document.createElement('div');
wordDisplay.innerHTML = word.split('').map(function() {
return '_';
}).join(' ');
document.body.appendChild(wordDisplay);
var guesses = [];
buttons.forEach(function(button) {
...