Mi versión de INICIO DE SESIÓN | Lógica de programación: Conceptos primordiales | Alura Latam

Tal vez sea demasiado trabajo para algo sencillo, pero me parece interesante incorporarle cierta complejidad a las actividades y desafíos que se plantean. ¿Qué les parece? Pueden probar el código aquí https://jsfiddle.net/kbryo9xc/
<!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">
    <link href="https://fonts.googleapis.com/css?family=Truculenta:100,200,300,regular,500,600,700,800,900"
        rel="stylesheet" />
    <title>LOGIN</title>
    <style>
        :root {
            font-family: 'Truculenta';
            background-color: azure;
        }

        input[type="button"] {
            font-family: 'Truculenta';
            font-size: 15px;
        }

        ::placeholder {
            color: red;
        }

        h1 {
            color: red;
            /* text-decoration: underline wavy black; */
        }

        p {
            color: blue;
        }

        #ganaste {
            background-color: green;
            color: white;
        }


        #perdiste {
            background-color: red;
            color: white;
        }

        #sin_acierto {
            background-color: yellow;
            color: black;
        }

        #resultados {
            background-color: rgb(255, 255, 255);
        }

        #resultados:hover {
            text-decoration: underline dotted red;
        }

        #estrella {
            background-color: black;
            color: white;
        }
    </style>

</head>

<body>
    <h1>INICIO DE SESIÓN</h1>
    <script>
        function saltearLinea() {
            document.write(`<br>`);
        }

        function saltear3Lineas() {
            document.write(`<br>`);
            document.write(`<br>`);
            document.write(`<br>`);
        }

        function imprimir(frase) {
            document.write(frase);
        }

        function imprimir1(frase) {
            document.write(frase);
            saltearLinea();
        }

        function imprimir3(frase) {
            document.write(frase);
            saltear3Lineas();
        }
        function mostrarAlerta(mensaje) {
            alert(`*** ` + mensaje + ` ***`);
        }

        var inicioDeSesionRegistrado = `alura`;
        var contrasenhaRegistrada = `alura321`;
        var contadorIntentos = 1;

        while (contadorIntentos <= 3) {

            var inicioDeSesionIngresado = prompt(`Ingrese su usuario`);
            var contrasenhaIngresada = prompt(`Ingrese su contraseña`);

            if (inicioDeSesionRegistrado == inicioDeSesionIngresado && contrasenhaRegistrada == contrasenhaIngresada) {
                mostrarAlerta(`Bienvenido al Sistema ` + inicioDeSesionIngresado);
                imprimir(`<div id="ganaste"><big><strong>BIENVENIDO AL SISTEMA | Usuario: ` + inicioDeSesionIngresado + `</strong></big></div>`);
                imprimir1(`<div id="sin_acierto">Usted ingresó satisfactoriamente</div>`);
                imprimir(`<br><hr><input type="button" value="CERRAR SESIÓN" onClick="window.location.reload(true)">`);
                break;
            } else {
                mostrarAlerta("ERROR: Usuario y/o contraseña inválidos. Vuelva a intentarlo.");
                contadorIntentos++;
            }
        }
        if (inicioDeSesionRegistrado !== inicioDeSesionIngresado && contrasenhaRegistrada !== contrasenhaIngresada) {
            mostrarAlerta("Demasiados intentos. Revise su usuario y/o contraseña e intente nuevamente.");
            imprimir(`<div id="perdiste"><big><strong>ERROR</strong></big></div>`);
            imprimir1(`<div id="sin_acierto">Error al iniciar sesión</div>`);
            imprimir(`<br><hr><input type="button" value="VOLVER A INTENTAR" onClick="window.location.reload(true)">`);
        }

    </script>
</body>

</html>