Projekt: Restaurace
Únor 2026
Zatímco u předchozích projektů jsem psal strukturu v HTML a logiku v JS, tady znělo zadání jinak: žádné HTML. V souboru index.html byl povolený pouze jeden prázdný <div id="content"></div>. Vše ostatní se muselo vygenerovat dynamicky.
Cílem bylo naučit se pracovat s DOM manipulací naplno sde naučit s nástrojem Webpack.
Co v projektu jde
Jednoduchá stránka restaurace, která funguje jako Single Page Application:
- Přepínání mezi záložkami (Domů, Menu, Kontakt).
- Obsah se mění dynamicky bez obnovení stránky.
- Vše je sestaveno z modulů.
Hlavní technologie: Webpack a Moduly
Místo jednoho dlouhého souboru jsem kód rozdělil. Každá sekce webu má svůj vlastní soubor (modul), který exportuje funkci pro vykreslení.
Struktura projektu:
index.js: Hlavní soubor, který řídí přepínání záložek.home.js,menu.js,contact.js: Moduly s obsahem.
Díky Webpacku mohu používat moderní import a export, a on se postará o zabalení všeho do jednoho výsledného skriptu.
// Příklad importu v hlavním souboru
import loadHome from "./home";
import loadMenu from "./menu";
// Jednoduchá logika přepínání
function switchTab(loaderFunction) {
contentDiv.innerHTML = ""; // Vyčistit
loaderFunction(); // Načíst nové
}GitHub: projekt restaurant page