curriculum/challenges/english/blocks/workshop-note-taking-app/68814221fc4752e17b9696bd.md
When the user clicks on the note, makes edits and then clicks outside of the note, you will need a way to get that newly edited version. You can accomplish this by using the blur event. This event fires when an element loses focus. Here is an example:
element.addEventListener("blur", () => {
// do something here
});
Attach an addEventListener method to the noteEl variable. The first argument should be the "blur" event and the second argument should an arrow function. Inside of the body of that arrow function, use const to create a new variable called newContent and assign it the value of noteEl.innerHTML.
innerHTML is used here to help preserve spacing and formatting for the note.
You should attach an addEventListener method to the noteEl variable.
assert.match(code, /noteEl\.addEventListener/);
Your addEventListener method should have a first argument of the "blur" event.
assert.match(code, /noteEl\.addEventListener\(['"]blur['"],/);
Inside of the body of the arrow function, you should use const to create a new variable called newContent and assign it the value of noteEl.innerHTML.
assert.match(code, /noteEl\.addEventListener\(['"]blur['"],\s*\(\)\s*=>\s*{[^}]*const\s+newContent\s*=\s*noteEl\.innerHTML[^}]*}\)/);
<!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 = "";
--fcc-editable-region--
--fcc-editable-region--
window.addEventListener("DOMContentLoaded", () => {
currentContent = noteEl.textContent;
});