From 6019af8f692d6ab1760a79a209367d605d16b94b Mon Sep 17 00:00:00 2001 From: skrabanek Date: Tue, 10 Mar 2026 09:31:24 +0100 Subject: [PATCH] =?UTF-8?q?fix=20readme.md=20&=20readme=20pro=20v=C5=A1ech?= =?UTF-8?q?yn=20projekty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 21_opakovani/README.md | 29 +++++++++++++++++++ 22_javascripthra/README.md | 31 ++++++++++++++++++++ 23_zvetsovadlo/README.md | 30 +++++++++++++++++++ 24_fetch/README.md | 53 ++++++++++++++++++++++++++++++++++ 25_fetch_await/README.md | 59 ++++++++++++++++++++++++++++++++++++++ 26_localstorage/README.md | 57 ++++++++++++++++++++++++++++++++++++ README.md | 9 ++++-- 7 files changed, 265 insertions(+), 3 deletions(-) create mode 100644 21_opakovani/README.md create mode 100644 22_javascripthra/README.md create mode 100644 23_zvetsovadlo/README.md create mode 100644 24_fetch/README.md create mode 100644 25_fetch_await/README.md create mode 100644 26_localstorage/README.md diff --git a/21_opakovani/README.md b/21_opakovani/README.md new file mode 100644 index 0000000..717328f --- /dev/null +++ b/21_opakovani/README.md @@ -0,0 +1,29 @@ +# 21 - Souhrnné Opakování + +## 🎯 Co se naučíte + +Tato lekce slouží k upevnění znalostí z předchozích částí kurzu, zejména práce s Bootstrapem, layoutem a základní DOM manipulací. + +## 📚 Témata lekce + +- **Bootstrap Layout** - container, row, col a jejich kombinace +- **Komponenty** - Card, Navbar, Buttons +- **Responzivita** - breakpointy a utility třídy +- **DOM interakce** - načítání dat a jejich zobrazování v Bootstrap struktuře + +## 📂 Soubory v projektu + +- `index.html` - hlavní soubor s opakováním +- `css/` - vlastní styly pro doplnění Bootstrapu +- `js/` - JavaScriptová logika + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `index.html` v prohlížeči. +2. Projděte si strukturu stránky a podívejte se, jak jsou použity Bootstrap třídy. +3. Zkuste změnit barvy nebo rozložení prvků pomocí utility tříd. + +## 🔗 Související lekce + +- **Předchozí:** 20_ajax - Práce s daty +- **Navazující:** 22_javascripthra - Praktické využití v logice hry diff --git a/22_javascripthra/README.md b/22_javascripthra/README.md new file mode 100644 index 0000000..1e63336 --- /dev/null +++ b/22_javascripthra/README.md @@ -0,0 +1,31 @@ +# 22 - JavaScript Hra (Logika a DOM) + +## 🎯 Co se naučíte + +V této lekci si vytvoříte jednoduchou hru, na které si procvičíte herní logiku, stavové proměnné a dynamickou aktualizaci HTML. + +## 📚 Témata lekce + +- **Stav hry (State)** - proměnné, které drží aktuální skóre, počet životů apod. +- **Události (Events)** - reakce na kliknutí, stisk klávesy +- **DOM Manipulace** - přepisování textu, měnění barev a obrázků podle stavu hry +- **Podmínky a Cykly** - logika pro výhru/prohru +- **Raw vs. Final** - rozdíl mezi základní kostrou (`index_raw.html`) a hotovým projektem + +## 📂 Soubory v projektu + +- `index.html` - hotová hra +- `index_raw.html` - výchozí stav pro začátek kódování +- `hra.js` - kompletní logika hry +- `hra_raw.js` - šablona pro samostatnou práci + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `index.html` a zahrajte si hru. +2. Podívejte se do `hra.js` na to, jak jsou ošetřeny různé herní situace. +3. Zkuste si hru upravit (přidat úrovně obtížnosti, změnit grafiku). + +## 🔗 Související lekce + +- **Předchozí:** 21_opakovani - Základy pro stavbu aplikací +- **Následující:** 23_zvetsovadlo - Interaktivní prvky diff --git a/23_zvetsovadlo/README.md b/23_zvetsovadlo/README.md new file mode 100644 index 0000000..5e184d0 --- /dev/null +++ b/23_zvetsovadlo/README.md @@ -0,0 +1,30 @@ +# 23 - Zvětšovadlo (Dynamické Styly) + +## 🎯 Co se naučíte + +V této lekci se naučíte, jak pomocí JavaScriptu ovládat vzhled prvků v reálném čase, včetně práce s barvami a velikostmi. + +## 📚 Témata lekce + +- **Input Events** - události `input`, `change` +- **Dynamic Styling** - přímá manipulace s `element.style` +- **Typy Inputů** - práce s `color`, `range` a `text` +- **Interpolace řetězců** - skládání CSS hodnot (např. `fontSize = size + "px"`) + +## 📂 Soubory v projektu + +- `index.html` - interaktivní stránka s ovládacími prvky +- `css/` - základní stylování +- `js/` - logika pro změnu stylů + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `index.html`. +2. Hýbejte s posuvníky a sledujte, jak se mění text uprostřed. +3. Vyzkoušejte změnu barvy pozadí i textu. +4. Prostudujte kód v JavaScriptu, který tyto změny provádí. + +## 🔗 Související lekce + +- **Předchozí:** 22_javascripthra - Logika aplikací +- **Následující:** 24_fetch - Načítání externích dat diff --git a/24_fetch/README.md b/24_fetch/README.md new file mode 100644 index 0000000..4cc65fe --- /dev/null +++ b/24_fetch/README.md @@ -0,0 +1,53 @@ +# 24 - Fetch API (Praktické ukázky) + +## 🎯 Co se naučíte + +V této lekci si prakticky vyzkoušíte práci s externími API pro načítání textových i obrazových dat. + +## 📚 Témata lekce + +- **Fetch API** - základní použití s `.then()` +- **Dynamické URL** - skládání parametrů do URL adresy +- **Template Literals** - práce s backticks (`` ` ``) pro vkládání proměnných do řetězců +- **Práce s obrázky** - dynamická změna `src` atributu a událost `onload` +- **Integrace Bootstrapu** - vizuální stránka aplikací + +## 📂 Soubory v projektu + +- `cnj.html` - generátor náhodných vtipů Chucka Norrise (api.chucknorris.io) +- `picsum.html` - generátor náhodných obrázků s nastavitelnými rozměry (picsum.photos) + +## 💻 Klíčové koncepty + +### Načítání JSON dat (cnj.html): +```javascript +function getJoke(){ + fetch("https://api.chucknorris.io/jokes/random") + .then(response => response.json()) + .then(data => { + jokeText.textContent = data.value; + }); +} +``` + +### Práce s obrázky a parametry (picsum.html): +```javascript +function getRandomImg(){ + let width = widthIn.value; + let height = heightIn.value; + // Použití template literals a náhodného parametru pro zamezení cachování + let newImgUrl = `https://picsum.photos/${width}/${height}?random=${Math.random()}` + randomImg.src = newImgUrl; +} +``` + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `cnj.html` a vyzkoušejte tlačítko pro nový vtip. +2. Otevřete `picsum.html`, změňte rozměry a klikněte na "Další obrázek". +3. Prozkoumejte, jak se v JavaScriptu mění atributy HTML elementů. + +## 🔗 Související lekce + +- **Předchozí:** 20_ajax - Základy Fetch API +- **Následující:** 25_fetch_await - Moderní zápis pomocí async/await diff --git a/25_fetch_await/README.md b/25_fetch_await/README.md new file mode 100644 index 0000000..8a71b7b --- /dev/null +++ b/25_fetch_await/README.md @@ -0,0 +1,59 @@ +# 25 - Moderní Fetch s Async / Await + +## 🎯 Co se naučíte + +V této lekci se naučíte moderní a přehlednější způsob práce s asynchronním kódem pomocí klíčových slov `async` a `await`. + +## 📚 Témata lekce + +- **async / await** - moderní syntax pro asynchronní operace +- **try / catch / finally** - komplexní ošetření chyb v asynchronním kódu +- **Response.ok** - kontrola úspěšnosti HTTP požadavku (stavové kódy 200-299) +- **Dynamické generování HTML** - vytváření seznamů a karet (cards) z JSON dat +- **Vnořené požadavky** - načítání souvisejících dat (např. příspěvky konkrétního uživatele) +- **Stav aplikace** - práce s UI během načítání (loading indicators, zablokování tlačítek) + +## 📂 Soubory v projektu + +- `index.html` - uživatelské rozhraní pro vyhledávání uživatelů a jejich příspěvků +- `script.js` - logika aplikace s využitím `async/await` a JSONPlaceholder API +- `style.css` - stylování výsledků a karet uživatelů + +## 💻 Klíčové koncepty + +### Struktura async funkce s error handlingem: +```javascript +async function nactiData() { + try { + const odpoved = await fetch(url); + + // Kontrola, zda server odpověděl úspěšně + if (!odpoved.ok) { + throw new Error("Data se nepodařilo načíst"); + } + + const data = await odpoved.json(); + // Práce s daty... + + } catch (error) { + // Ošetření chyby + console.error("Chyba:", error.message); + } finally { + // Provede se vždy (např. skrytí loaderu) + console.log("Pokus o načtení dokončen"); + } +} +``` + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `index.html`. +2. Klikněte na "Načíst vše" pro zobrazení seznamu uživatelů. +3. Zadejte ID uživatele (1-10) a vyhledejte konkrétní osobu. +4. Po nalezení uživatele se aktivuje tlačítko pro načtení jeho příspěvků (postů). +5. Sledujte v `script.js`, jak jsou funkce řetězeny a jak se mění stav UI. + +## 🔗 Související lekce + +- **Předchozí:** 24_fetch - Fetch API se syntaxí .then() +- **Následující:** 26_localstorage - Ukládání dat v prohlížeči diff --git a/26_localstorage/README.md b/26_localstorage/README.md new file mode 100644 index 0000000..dcd16ad --- /dev/null +++ b/26_localstorage/README.md @@ -0,0 +1,57 @@ +# 26 - LocalStorage (Perzistence dat) + +## 🎯 Co se naučíte + +V této lekci se naučíte, jak ukládat jednoduchá data přímo do prohlížeče uživatele, aby zůstala zachována i po zavření okna nebo restartování počítače. + +## 📚 Témata lekce + +- **LocalStorage** - úložiště v prohlížeči (trvalé, dokud není smazáno) +- **setItem(key, value)** - uložení dat pod konkrétním klíčem +- **getItem(key)** - načtení dat pomocí klíče +- **removeItem(key)** / **clear()** - mazání dat +- **Perzistence** - zachování stavu aplikace (vítání uživatele, počítadlo návštěv) +- **JSON.stringify / JSON.parse** - techniky pro ukládání objektů a polí (v této lekci jen zmíněno pro jednoduchá data) + +## 📂 Soubory v projektu + +- `index.html` - rozhraní pro zadání jména a zobrazení počítadla +- `script.js` - logika pro práci s `localStorage` +- `style.css` - stylování stránky + +## 💻 Klíčové koncepty + +### Práce s daty v LocalStorage: +```javascript +// Uložení jména +localStorage.setItem("userName", "Jan Novák"); + +// Načtení jména +const savedName = localStorage.getItem("userName"); + +// Smazání konkrétního klíče +localStorage.removeItem("userName"); + +// Smazání celého úložiště +localStorage.clear(); +``` + +### Počítadlo návštěv: +```javascript +let visits = localStorage.getItem("visitCount") || 0; +visits = parseInt(visits) + 1; +localStorage.setItem("visitCount", visits); +``` + +## 🚀 Jak s lekcí pracovat + +1. Otevřete `index.html`. +2. Zadejte své jméno a klikněte na tlačítko uložit. +3. Obnovte stránku (F5) - uvidíte, že vás stránka stále vítá jménem a počítadlo návštěv se zvýšilo. +4. Zavřete prohlížeč a znovu jej otevřete - data tam stále budou. +5. Klikněte na tlačítko pro vymazání dat a pozorujte změnu. + +## 🔗 Související lekce + +- **Předchozí:** 25_fetch_await - Práce s asynchronními daty +- **Dokumentace:** [Web Storage API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) diff --git a/README.md b/README.md index 904f4bb..47f212b 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Tento repozitář obsahuje **kódy a příklady z hodin** - materiály pro výuk - 📖 [Základní lekce (01-11)](#-část-i-základy-webových-technologií-lekce-01-11) - 🎨 [CSS Grid (12)](#-část-ii-css-grid-lekce-12) - 🎯 [Bootstrap (13-17)](#-část-iii-bootstrap-framework-lekce-13-17) -- 🚀 [Pokročilé (18-23)](#-část-iv-pokročilé-techniky-lekce-18-23) +- 🚀 [Pokročilé (18-26)](#-část-iv-pokročilé-techniky-lekce-18-26) - 📁 [Bonusové materiály](#-bonusové-materiály) - 💻 [VS Code Setup](#-vývojové-prostředí---visual-studio-code) - 🛠️ [Jak pracovat s materiály](#️-jak-pracovat-s-materiály) @@ -42,7 +42,7 @@ Tento repozitář obsahuje **kódy a příklady z hodin** - materiály pro výuk 4. **Postupujte chronologicky:** - Lekce 01-11 → Základy HTML, CSS a JavaScriptu - Lekce 12 → CSS Grid - - Lekce 13-23 → Bootstrap framework a pokročilé techniky + - Lekce 13-26 → Bootstrap framework a pokročilé techniky --- @@ -80,7 +80,7 @@ Tento repozitář obsahuje **kódy a příklady z hodin** - materiály pro výuk | **16** | [Carousel](16_carousel/) | Bootstrap carousel komponenta | | **17** | [Modal](17_modal/) | Modal dialogy a jejich použití | -### 🚀 ČÁST IV: Pokročilé Techniky (Lekce 18-23) +### 🚀 ČÁST IV: Pokročilé Techniky (Lekce 18-26) | Lekce | Téma | Zaměření | |-------|------|----------| @@ -90,6 +90,9 @@ Tento repozitář obsahuje **kódy a příklady z hodin** - materiály pro výuk | **21** | [Opakování](21_opakovani/) | Souhrnné opakování Bootstrapu a layoutu | | **22** | [JavaScript Hra](22_javascripthra/) | Logika hry, stavové proměnné, DOM interakce | | **23** | [Zvětšovadlo](23_zvetsovadlo/) | Dynamická změna stylů, input[type=color] | +| **24** | [Fetch API](24_fetch/) | Práce s externími API (Chuck Norris, Picsum) | +| **25** | [Async / Await](25_fetch_await/) | Moderní asynchronní JS, try-catch bloky | +| **26** | [LocalStorage](26_localstorage/) | Ukládání dat v prohlížeči, perzistence | ### 📁 Bonusové Materiály