Projekt: Knihovna

Dec 22, 2025

Prosinec 2025

Projekt Knihovna byl první větší krok od jednoduchých DOM cvičení k aplikaci s vlastní datovou strukturou a jasnou logikou.

Co projekt dělá

Jde o správu osobní knihovny v prohlížeči:

• Přidání knihy přes formulář (autor, název, počet stran, stav přečtení).
• Zobrazení všech knih v seznamu.
• Přepnutí stavu přečteno/nepřečteno.
• Odstranění knihy podle id.

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 přes crypto.randomUUID(), což usnadňuje přesné párování dat s DOM prvky.

Klíčové části implementace

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(), aby stránka při submitu neprovedla reload.

Render zajišťuje funkce displayBooks(), která mapuje data na DOM elementy s atributem data-id:

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);
	});
}

Stav přečtení se přepíná přes metodu na prototypu:

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

Po změně stavu následuje znovuvykreslení seznamu.

Mazání probíhá přes findIndex() a splice():

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

Co jsem si odnesl

• Praktickou práci s objekty a prototypy v JavaScriptu.
• Lepší oddělení datové vrstvy od vykreslení.
• Jistotu v práci s formulářem, eventy a identifikací položek přes id.

Další kroky

Projekt zatím nemá persistentní úložiště. Další rozšíření:

• 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

---