[Projeto] Código Lionel | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Fiz um exemplo de como o Lionel poderia ter resolvido, tive que pesquisar um pouco algumas coisas que ainda não abordamos no curso, como formulários, mas gostei bastante do resultado:

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form>
    <fieldset>
      <legend>Inserir senha para obter código</legend>
      <p>
        <label for="letra">Letra:</label>
        <input type="text" name="letra" id="letra" placeholder="atenção: case sensitive"/>
      </p>
      <p>
        <label for="letra">Número 1:</label>
        <input type="text" name="num1" id="num1" placeholder=""/>
      </p>
      <p>
        <label for="letra">Número 2:</label>
        <input type="text" name="num2" id="num2" placeholder=""/>
      </p>

      <button type="submit">Enviar</button>
    </fieldset>
  </form>

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

</html>

JS:

function geraCodigo(letra, num1, num2) {
  if (letra === "A" && parseInt(num1) === 20 && parseInt(num2) === 30) {
    return "GH1022";
  }
  return "Código inválido";
}

// A função que será chamada quando o formulário for submetido
function onSubmitForm(event) {
  event.preventDefault(); // Evita o comportamento padrão do formulário (recarregar a página)

  // Obtém os valores dos campos de entrada
  var letra = document.getElementById("letra").value;
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;

  // Gera o código com base nos valores dos campos
  var codigo = geraCodigo(letra, num1, num2);

  // Exibe o código gerado
  alert("Código gerado: " + codigo);
}

// Adiciona um ouvinte de evento para o formulário
document.querySelector("form").addEventListener("submit", onSubmitForm);