Projekt: Knihovna

Dec 22, 2025

Projekt: Knihovna

Prosinec 2025

Po základních JavaScriptových projektech přišel na řadu komplexnější úkol - knihovna. Aplikace, kde můžeš přidávat knihy, sledovat, jestli jsi je četl, a mazat je ze sbírky.

Co projekt dělá

Jednoduchá aplikace pro správu osobní knihovny:

• Přidávání knih pomocí formuláře (autor, název, počet stránek, přečteno)
• Zobrazení všech knih v knihovně
• Označení knihy jako přečtené/nepřečtené
• Smazání knihy ze sbírky

Konstruktor a pole objektů

Každá kniha je objekt vytvořený konstruktorem Book. Všechny knihy se ukládají do pole myLibrary:

const myLibrary = [];

function Book(title, author, pages, read) {
  this.id = crypto.randomUUID();
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.read = read;
}

Každá kniha má unikátní id vygenerované pomocí crypto.randomUUID(). Tohle zajišťuje, že každá kniha má stabilní identifikátor, což je důležité při mazání nebo přesouvání knih.

Přidávání knih

Funkce addBookToLibrary() vytvoří novou knihu z parametrů a uloží ji do pole:

function addBookToLibrary(title, author, pages, read) {
  const newBook = new Book(title, author, pages, read);
  myLibrary.push(newBook);
  displayBooks();
}

Formulář používá event.preventDefault() na zabránění defaultního chování submit tlačítka, které by jinak poslalo data na server.

Zobrazení knih

Funkce displayBooks() prochází pole a vytváří DOM elementy pro každou knihu. Každý element má data-id atribut odpovídající id knihy:

function displayBooks() {
  const container = document.getElementById('library');
  container.innerHTML = '';
  
  myLibrary.forEach(book => {
    const bookCard = document.createElement('div');
    bookCard.setAttribute('data-id', book.id);
    // přidání obsahu...
    container.appendChild(bookCard);
  });
}

Změna stavu přečteno/nepřečteno

Přidal jsem prototypovou funkci na Book, která přepíná stav:

Book.prototype.toggleRead = function() {
  this.read = !this.read;
}

Tlačítko najde knihu podle data-id, zavolá toggleRead() a překreslí zobrazení.

Mazání knih

Funkce najde index knihy v poli pomocí id a použije splice() na odstranění:

function removeBook(id) {
  const index = myLibrary.findIndex(book => book.id === id);
  if (index !== -1) {
    myLibrary.splice(index, 1);
    displayBooks();
  }
}

Oddělení dat a zobrazení

Důležitý koncept tohoto projektu - data (pole objektů) jsou oddělená od zobrazení (DOM manipulace). Všechny změny se dějí v poli a pak se překreslí celé zobrazení. Tohle umožňuje flexibilitu - můžeš změnit, jak knihy vypadají, aniž bys měnil logiku dat.

Co bylo náročné

• Pochopit, jak propojit DOM elementy s objekty v poli pomocí data-id
• event.preventDefault() - bez toho formulář nefungoval správně
• Prototypové funkce - nový koncept, ale dává smysl pro metody, které by měl mít každý objekt
• Překreslování celého zobrazení po každé změně - zdálo se neefektivní, ale je to čistší

Co jsem se naučil

Konstruktory a prototypy: Pochopil jsem, jak vytvářet objekty pomocí konstruktorů a přidávat jim metody přes prototyp.

Práce s poli objektů: Naučil jsem se pracovat s polem objektů - přidávat, odstraňovat, hledat pomocí findIndex().

Separace logiky: Data odděleně od zobrazení - změny v datech, pak překreslení UI.

Event handling: preventDefault(), propojení event listenerů s dynamicky vytvořenými elementy.

Co dál

Projekt nemá persistentní úložiště - data se ztratí při refreshi. V budoucnu bych mohl přidat:

• Local Storage pro uložení knih
• Editaci knih (ne jen přidání a smazání)
• Filtrování a řazení (podle autora, přečteno/nepřečteno)
• Lepší design s CSS

GitHub: projekt knihovna

Investovaný čas: asi 8 hodin

---

Další projekt bude ještě komplexnější. Tento mi pomohl pochopit důležité JavaScriptové koncepty, které budu potřebovat dál.