JSFiddle - React, Tailwind, and code Playground

by joaovmvini

HTML

<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.layout.css" type="text/css" />
<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id='root'></div>
<script>
var Hangman = (function(container) {
    // Initializing self
    var self = {};
    // Propertie to store the number of user fails
    self.fails = 0;
    // Propertie to store the last user input 
    self.userInput = '';
    // Propertie to be the a clue of the word
    self.clue = 'FRUITS';
    // Propertie to store a random word of self.values
    self.currentWord = '';
    // Propertie to be used to apply some changes in the selected current word
    self.auxWord = '';
    // Propertie to store all the possibilities of words
    self.values = ['apple', 'banana', 'orange', 'pear', 'papaya', 'kiwi', 'lemon', 'mandarine', 'peach', 'raspberry', 'mango', 'fig', 'plum']
    // Propertie to store the element where the letters are
    self.lettersElement = null;

    // Generate a random word from self.values and appends the generated value to self word properties
    self.setWord = function() {
        self.currentWord = self.auxWord = self.values[Math.floor(Math.random() * self.values.length)];
    }

    // Renders the elements that will be the slots for each letter
    self.renderLetters = function(o) {
        // First we'll clear up the element
        o.innerHTML = '';
        // Setting a random word in our array of fruits 
        self.setWord();
        // Loop to create each letter element
        for (var i = 0; i < self.currentWord.length; i++) {
            var letterElement = document.createElement('span');
            o.appendChild(letterElement);
        }
    }

    // Display a letter
    self.showLetter = function(letter) {
        for (var i = 0; i < self.currentWord.length; i++) {
            if (self.currentWord[i] == letter) {
                self.lettersElement.children[i].textContent = letter;
            }
        }
    }

    // Shows a body part of the...