Przejdź do głównej zawartości
Codex13

05. Notatnik

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz notatnik — tworzenie, edycja, usuwanie notatek z automatycznym zapisem w localStorage. Szybki, prosty i użyteczny.

Czego się nauczysz?

  • Autosave — zapisywanie przy każdej zmianie (debounce)
  • Zarządzanie listą notatek z CRUD
  • Wyszukiwanie i sortowanie
  • Praca z textarea i contenteditable

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista notatek w localStorage
  • Tworzenie nowej notatki (tytuł + treść)
  • Edycja wybranej notatki
  • Usuwanie z potwierdzeniem
  • Autosave po 1 sekundzie od ostatniej zmiany (debounce)
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”
// Autosave z debounce
function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}


// W komponencie edytora:
const debouncedContent = useDebounce(content, 1000);
useEffect(() => {
  saveNote(noteId, debouncedContent);
}, [debouncedContent]);

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Notatnik to projekt, który musi działać szybko i płynnie. Autosave z debounce jest kluczowy — bez niego zapisywanie przy każdym wciśnięciu klawisza byłoby za wolne. Zrób to dobrze!