Build a searchable study notebook

Start with a data contract

A note has an id and text. Search returns matching notes without editing the input. This lab uses a simple case-insensitive substring match. Run the working starting point, add a note, and try whitespace and an absent word.

Make it your project

Add tags to each note and extend the search to match either text or tags. Add a test that a search never mutates the original list. Then build an input and result list around this function in your own app. Keep user text as text rather than inserting it as HTML.

Explore Memos

Open the Memos repository to study how a full application handles notes, search and persistence. Its server is not running inside this exercise. Compare your small data contract with the production project and write down one feature that needs a backend.

Try it yourself

function searchNotes(notes, query) {
  const term = query.trim().toLowerCase();
  return notes.filter(note => note.text.toLowerCase().includes(term));
}
console.log(searchNotes([{id: 1, text: "Learn Python"}, {id: 2, text: "Study CSS"}], "python"));

Enable JavaScript for this interactive activity. You can read all lesson explanations above without it.