Desafio: hora da prática | Lógica de programação: explore funções e listas

Estou realizando o "Desafio: hora da prática" do curso "Lógica de programação: explore funções e listas", mas estou com dificuldades em entender porque meu código nao esta funcionando. Com as alterações que fiz ( que inclusive verifiquei, bate com opinião do instrutor), não esta funcionando os botoes na pagina web.

Enunciado: Faça o download de outro projeto clicando neste link e abra no Visual Studio Code. Altere o conteúdo da tag h1 com document.querySelector e atribua o seguinte texto: Hora do Desafio. Crie uma função que exiba no console a mensagem O botão foi clicado sempre que o botão Console for pressionado. Crie uma função que exiba um alerta com a mensagem: Eu amo JS, sempre que o botão Alerta for pressionado.

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1></h1>
    </header>
    <main class="container">
      <button onclick="mensagemConsole" class="button">Console</button>
      <button onclick="mensagemAlert" class="button">Alert</button>
      <button onclick="" class="button">Prompt</button>
      <button onclick="" class="button">Soma</button>
    </main>

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

Código JS:

let titulo = document.querySelector("h1");
titulo.innerHTML = "Hora do desafio";

function mensagemConsole() {
  console.log("O botao foi clicado");
}
function mensagemAlert() {
  alert("Eu amo JS");
}

Alguém poderia me ajudar a entender, para que eu de continuidade ao desafio, são 4 botões, mas nao sei se vale continuar sem antes entender o ocorrido.