Portfolio
Projekt: Restaurace

Projekt: Restaurace

Únor 2026

V tomto projektu bylo cílem generovat obsah stránky kompletně přes JavaScript. V index.html byl pouze kořenový <div id="content"></div>.

Cílem bylo procvičit DOM manipulaci a modulární strukturu přes 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 souboru je aplikace rozdělená do modulů. Každá sekce webu má vlastní render funkci.

Struktura projektu:

  • index.js: Hlavní soubor, který řídí přepínání záložek.
  • home.js, menu.js, contact.js: Moduly s obsahem.

Webpack řeší bundling a umožňuje používat import/export napříč projektem.

// 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é
}

Co jsem si odnesl

  • Lepší práci s modulární strukturou vanilla JS projektu.
  • Jistotu v dynamickém přepínání obsahu bez reloadu.
  • Praktický základ práce s bundlerem.

GitHub: projekt restaurant page