Passo 4

Instruções

No ouvinte do evento, você precisa atualizar o texto do elemento result. Você pode usar um operador ternário para realizar essa tarefa. Aqui está um exemplo de atribuição do resultado de um operador ternário ao conteúdo de texto de um elemento:

el.textContent = condition ? "Use this text if the condition is true" : "Use this text if the condition is false";

Após a declaração if, atualize o texto do elemento result com base na veracidade da chamada isSpam() com messageInput.value como argumento. Se verdadeiro, defina a propriedade textContent no elemento result para "Oh no! This looks like a spam message.". Caso contrário, defina-o como "This message does not seem to contain any spam." Então defina a propriedade value do elemento messageInput como uma string vazia.

O que fazer:

Testes:

Quando você clicar no seu `checkMessageButton` e o `isSpam(messageInput.value)` for verdadeiro, você deve definir a propriedade `textContent` de `result` para `"Oh no! This looks like a spam message."`.
Quando você clicar no seu `checkMessageButton` e o `isSpam(messageInput.value)` for falso, você deve definir a propriedade `textContent` de `result` para `"This message does not seem to contain any spam."`.
Após definir o `textContent` de `result`, você deve redefinir a propriedade `value` no elemento `messageInput` para uma string vazia.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Learn Regular Expressions by Building a Spam Filter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <header class="main-text">
      <h1 class="title">Is this Spam?</h1>
      <p class="description">
        Enter a phrase to check if it would be marked as spam or not.
      </p>
    </header>

    <main>
      <label class="message-label" for="message-input">Message: </label>
      <textarea
        placeholder="Enter message here"
        value=""
        type="text"
        name="message"
        id="message-input"
        rows="10"
        cols="40"
      ></textarea>
      <button class="btn" id="check-message-btn" type="button">
        Check message
      </button>
      <p id="result-message"></p>
    </main>

    <footer class="footer">&copy; G.E.A.R ACADEMY</footer>
    <script src="./script.js"></script>
  </body>
</html>

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --gold: #feac32;
  --orange: #ffac33;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
  color: var(--light-grey);
}

body,
#message-input:placeholder-shown {
  text-align: center;
}

textarea {
  max-width: 90%;
}

.main-text {
  margin: 25px 0;
}

.title {
  font-size: 2.5rem;
}

.description {
  margin-top: 15px;
  font-size: 1.4rem;
}

.message-label {
  display: block;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

#message-input:placeholder-shown,
textarea {
  font-size: 1.1rem;
}

.btn {
  display: block;
  cursor: pointer;
  width: 200px;
  margin: 10px auto;
  color: var(--dark-grey);
  background-color: var(--gold);
  background-image: linear-gradient(var(--golden-yellow), var(--orange));
  border-color: var(--gold);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

#result {
  font-size: 2rem;
  margin: 20px 0;
}

.footer {
  margin-top: 10px;
}

const messageInput = document.getElementById("message-input");
const result = document.getElementById("result-message");
const checkMessageButton = document.getElementById("check-message-btn");

const isSpam = (msg) => false;


checkMessageButton.addEventListener("click", () => {
  if (messageInput.value === "") {
    alert("Please enter a message.");
    return;
  }


});

Preview