Passo 13

Instruções

Parece que as coisas estão funcionando, exceto por um pequeno problema. Se você editar uma nota e depois sair dessa nota, você deve ver a mensagem "Note saved successfully!". Mas se você tentar editar a nota novamente, a mensagem ainda estará sendo exibida. O comportamento desejado é que a mensagem desapareça quando o usuário focar no elemento. Você pode usar o evento focus para isso.

element.addEventListener("focus", () => {
  // do something here 
});

Anexe um addEventListener à variável noteEl. O primeiro argumento deve ser o evento "focus" e o segundo argumento deve ser uma função de callback. Dentro dessa função de callback, defina o statusEl.textContent como uma string vazia. Isso irá redefinir a região ao vivo quando a nota estiver focada. E com essa última alteração, seu workshop está completo!

O que fazer:

Testes:

Quando o usuário focar na nota, você deve definir o `statusEl.textContent` como uma string vazia.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Note taking app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <p class="helper-text">Click or tap on the card to edit your note.</p>

    <div id="note" class="note" contenteditable="true" aria-label="Note editor">
      Many languages have words that carry meanings so specific or culturally rooted that they can't be neatly translated into English. 
        
      One example is the Japanese word "tsundoku", which refers to the habit of acquiring books and letting them pile up unread, something many book lovers can relate to. Another is the Portuguese word "saudade", describing a deep, bittersweet longing for something or someone that is absent. Meanwhile, the French word "Dépaysement" captures the disorienting yet exciting feeling of being in a new place, far from home.
        
      These unique words remind us that language is more than vocabulary: it's a window into the values, habits, and emotions of the cultures that create it.
    </div>

    <div id="status" aria-live="polite"></div>
    
    <script src="script.js"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 2em;
  max-width: 700px;
  background-color: #f5f5f5;
}

.note {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1.5em;
  margin-bottom: 1em;
  line-height: 1.5;
  min-height: 250px;
  font-size: 16px;
  /* This is needed to preserve line breaks in the div */
  white-space: pre-wrap;
}

.note[contenteditable="true"] {
  caret-color: black;
}

.note:hover {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.helper-text {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5em;
  user-select: none;
  font-style: italic;
}

#status {
  color: #00471b;
  padding: 0 1em;
}

const noteEl = document.getElementById("note");
const statusEl = document.getElementById("status");

let currentContent = "";





noteEl.addEventListener("blur", () => {
  const newContent = noteEl.innerHTML;

  if (currentContent === newContent) {
    return;
  }

  currentContent = newContent;
  console.log(currentContent);

  statusEl.textContent = "Note saved successfully!";
});

window.addEventListener("DOMContentLoaded", () => {
  currentContent = noteEl.textContent;
});

Preview