Build a Note Taking App - Step 7

JavaScript
1

Tell us what’s happening:

1

The wording about assignment or reassignment is inaccurate.

…reassign currentContent to the value of noteEl.textContent

It means

noteEl.textContent = currentContent;

It seems to me both

…reassign the value of noteEl.textContent to currentContent

and

…reassign currentContent the value of noteEl.textContent

are grammatical.

Both mean

currentContent = noteEl.textContent;

2

The expected body of the arrow function should be

currentContent = noteEl.textContent;

but according to the above instruction we have

noteEl.textContent = currentContent;

Either way could lead us pass the Step 7.

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

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Challenge Information:

Build a Note Taking App - Step 7
https://www.freecodecamp.org/learn/full-stack-developer/workshop-note-taking-app/step-7

2

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like
3

Ok.

4

Thanks for this. He’s right, FCC wants noteEl.textContent = currentContent; instead of the otherway around, and most people would understand “. Inside the body of the arrow function, assign the value of noteEl.textContent to currentContent.” as currentContent = noteEl.textContent.

EDIT: And then on the next step I see that the code is currentContent = noteEl.textContent;

Yeahhhh please fix this, thanks.

5

The issue described above has been complete and closed.

If you have another issue Please open a new thread or open an issue as described above.

7

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.