--description--

Right now, currentContent is initialized with the value of an empty string. But the desired result would be to have currentContent hold the value of the current note text.

In an earlier lesson, you learned how to work with the DOMContentLoaded event like this:

window.addEventListener("DOMContentLoaded", () => {
  // Do stuff here
});

When everything in the HTML document has been loaded and parsed, you will be able to access the noteEl safely.

Start by attaching an addEventListener method to the window object. The first argument for the addEventListener method should be the "DOMContentLoaded" event. The second argument should be an arrow function. Inside the body of the arrow function, assign the value of noteEl.textContent to currentContent.

--hints--

You should attach an addEventListener method to the window object.

assert.match(code, /window\.addEventListener/);

Your event listener should listen for the "DOMContentLoaded" event.

assert.match(code, /window\.addEventListener\(['"]DOMContentLoaded['"]\,/);

Inside the body of the arrow function, assign the value of noteEl.textContent to currentContent.

const event = new Event("DOMContentLoaded");
window.dispatchEvent(event);

assert.equal(currentContent, noteEl.textContent);

--seed--

--seed-contents--

html

<!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>

css

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 = "";

--fcc-editable-region--

--fcc-editable-region--

Step 7

--description--

--hints--

--seed--

--seed-contents--