Code Editor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description"
        content="El típico juego del ahorcado en el que se deben ir introduciendo letras para adivinar una palabra, programado con Javascript">
    <meta name="robots" content="noindex, follow">
    <title>Juego del ahorcado con Javascript</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <div class="col info">
            <h1>Juego del ahorcado con Javascript</h1>
            <p class="hiddenWord"></p>
            <p>Introduzca una letra:</p>
            <input type="text"><br />
            <button>Verificar letra</button>
        </div>
        <div class="col">
            <div class="ahorcado"></div>

        </div>
    </div>

    <script src="javascript.js"></script>

</body>

</html>

@font-face {
  font-family: myFont;
  src: url(https://pablomonteserin.com/res/javascript-es6/ex/ahorcado//Poppins-Regular.ttf);
}

.container {
  margin: auto;
  max-width: 700px;
  display: flex;
  font-family: myFont;
}

.container .col {
  flex: 1;
}

.ahorcado {
  background-image: url('https://pablomonteserin.com/res/javascript-es6/ex/ahorcado/hangman-game_pm.png');
  width: 300px;
  height: 330px;
}

button {
  background-color: #F77754;
  color: white;
  font-weight: bold;
  border-radius: 20px;
  border: none;
  padding: 7px 15px;
  margin-top: 15px;
}

input {
  padding: 7px;
  border-radius: 6px;
  border: 1px solid gray;
}

.hiddenWord {
  font-weight: bold;
  font-size: 2rem;
}

const replaceAt = (string, character, index) => {
    return string.substring(0, index) + character + string.substring(index + character.length);
}

const words = ['casa', 'perro', 'gato', 'coche'];
const secretWord = words[Math.floor(Math.random() * words.length)];
let hiddenWord = secretWord.replace(/./g, "_ ");
document.querySelector('.hiddenWord').innerHTML = hiddenWord;
let errorCounter = 0;
const evaluateWord = () => {
    const letter = document.querySelector('input').value;
    document.querySelector('input').value = '';
    let error = true;
    for (let i = 0; i < secretWord.length; i++) {
        if (secretWord[i] === letter) {
            hiddenWord = replaceAt(hiddenWord, letter, i * 2);
            error = false;
        }
    }
    document.querySelector('.hiddenWord').innerHTML = hiddenWord;

    if (error) {
        errorCounter++;
        document.querySelector('.ahorcado').style.backgroundPosition = -errorCounter * 300 + 'px';
        if (errorCounter === 4) {
            document.querySelector('.info').innerHTML = 'Has perdido';
        }
    }
    if (!hiddenWord.includes("_")) {
        document.querySelector('.info').innerHTML = 'Has ganado';
    }


}

document.querySelector('button').addEventListener('click', evaluateWord);