Build a Note Taking App - Step 9

JavaScript
1

Tell us what’s happening:

i did what it asked but i keep seeing the same error

Your code so far

<!-- file: index.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>

/* file: styles.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;
}

/* file: script.js */
const noteEl = document.getElementById("note");
const statusEl = document.getElementById("status");

let currentContent = "";


// User Editable Region

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

// User Editable Region


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Note Taking App - Step 9

2

What error do you see?

3

assign newContent to currentContent.

If I said “Assign the value 1 to the variable a” how would you write that code?

4

a = 1
thats exactly what i did

5

newContent = currentContent;

or is there something im missing

6 
1. You should assign newContent to currentContent inside of the event listener.
7

oh my goodness :joy:

i switched it and it worked

thanks a lot damn

currentContent = newContent

8

assign new content to current content

current content is the variable

1 Like
9

It’s easy to mix up when you are following instructions like that.

Not sure if it helps to conceptualize it but you can think of the right hand side going to (assigned to, or going into) the left hand side

a <== 1
currentContent <== newContent

You want the new content to go into the current content variable

1 Like