Tutorial Promises - Uciel Sola

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tutorial Promises - Uciel Sola</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 1.5rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            color: #fff;
            border-color: #fff;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(56, 56, 56);
        }

        input {
            color: #000;
            padding: 0.25rem;
            border-radius: 0.25rem;
        }

        input[type="submit"] {
            background-color: rgb(56, 56, 56);
            color: #fff;
            cursor: pointer;
        }

        .contenedor {
            display: grid;
            place-content: center;
            min-height: 30vh;
        }

        .row {
            display: flex;
        }

        .row * {
            margin-inline: 0.25rem;
        }

        .contenedor * {
            margin-block: 0.5rem;
        }

        .hidden {
            visibility: hidden;
        }
    </style>
    <body>
        <div class="contenedor">
            <h1>Ingrese palabra secreta</h1>
            <form class="row">
                <input type="text" /><input type="submit" value="Enviar" />
            </form>
            <h1>Estado de la operación:</h1>
            <p>Sin datos...</p>
        </div>
    </body>

    <script>
        const input = document.querySelector("input");
        const estado = document.querySelector("p");
        const form = document.querySelector("form");

        form.addEventListener("submit", (event) => formSubmit(event));

        function formSubmit(event) {
            event.preventDefault();

            const input = event.target[0];
            estado.innerHTML = "Revisando palabra...";

            APIPalabraSecreta(input.value)
                .then((res) => (estado.innerHTML = res))
                .catch((err) => {
                    estado.innerHTML = err;
                    input.focus();
                });
        }

        // esto que sigue sucedería en un backend / API

        function APIPalabraSecreta(palabra) {
            const secreto = "javascript";

            return new Promise((resolve, reject) => {
                // simulamos 3 segundos de demora
                setTimeout(() => {
                    if (palabra === secreto) {
                        resolve("Palabra correcta!");
                    } else {
                        reject("Palabra incorrecta!");
                    }
                }, 3000);
            });
        }
    </script>
</html>