skrabanek
7 days ago
77 changed files with 47358 additions and 92 deletions
@ -0,0 +1,40 @@ |
|||||
|
# 01 - Úvod do HTML |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se seznámíte se základy HTML a strukturou webové stránky. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Základní struktura HTML dokumentu** (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`) |
||||
|
- **Nadpisy** (`<h1>` až `<h6>`) |
||||
|
- **Odstavce** (`<p>`) |
||||
|
- **Odkazy** (`<a href="">`) |
||||
|
- **Obrázky** (`<img src="" alt="">`) |
||||
|
- **Komentáře v HTML** (`<!-- komentář -->`) |
||||
|
- **Zalomení řádku** (`<br>`) |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - hlavní HTML soubor s ukázkami základních HTML tagů |
||||
|
- `about.html` - další stránka pro demonstraci odkazů |
||||
|
- `profily/` - složka s příklady vnořené struktury souborů |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči (dvojklik nebo přes Live Server) |
||||
|
2. Prohlédněte si HTML kód v editoru |
||||
|
3. Zkuste upravit texty, přidat nové nadpisy nebo odstavce |
||||
|
4. Vyzkoušejte vytvořit vlastní odkazy na nové stránky |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- Používejte komentáře (`<!-- -->`) pro poznámky v kódu |
||||
|
- Zkratka pro zakomentování: `CTRL+K CTRL+C` (odkomentování: `CTRL+K CTRL+U`) |
||||
|
- Každý tag, který otevřete, musíte i zavřít (např. `<p>...</p>`) |
||||
|
- Atribut `alt` u obrázků je povinný (popisuje obrázek) |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Další:** 02 - pokračování v HTML |
||||
|
- **Související:** 03_css_uvod - stylování HTML elementů |
||||
@ -0,0 +1,124 @@ |
|||||
|
# 02 - HTML Pokročilé Elementy |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte pracovat s pokročilejšími HTML elementy a Emmet zkratkami. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Tabulky** (`<table>`, `<tr>`, `<td>`, `<th>`) |
||||
|
- Struktura tabulek |
||||
|
- Řádky (`<tr>`) a buňky (`<td>`) |
||||
|
- Nadpisy tabulek (`<th>`) |
||||
|
- Stylování pomocí inline CSS |
||||
|
- **Seznamy** (`<ul>`, `<ol>`, `<dl>`) |
||||
|
- Nečíslované seznamy (`<ul>`) |
||||
|
- Číslované seznamy (`<ol>`) |
||||
|
- Definiční seznamy (`<dl>`, `<dt>`, `<dd>`) |
||||
|
- **Emmet zkratky** - rychlé psaní HTML |
||||
|
- **ALT + klikání** - multi-cursor editing |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - hlavní soubor s ukázkami |
||||
|
- `formular.html` - příklad formuláře |
||||
|
|
||||
|
## 💻 Ukázky z lekce |
||||
|
|
||||
|
### Tabulka: |
||||
|
```html |
||||
|
<table style="border: 2px black solid;"> |
||||
|
<tr> |
||||
|
<th>Jméno</th> |
||||
|
<th>Částka</th> |
||||
|
<th>Měna</th> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Martin</td> |
||||
|
<td>50</td> |
||||
|
<td>$</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
``` |
||||
|
|
||||
|
### Seznamy: |
||||
|
```html |
||||
|
<!-- Nečíslovaný seznam --> |
||||
|
<ul> |
||||
|
<li>První položka</li> |
||||
|
<li>Druhá položka</li> |
||||
|
</ul> |
||||
|
|
||||
|
<!-- Číslovaný seznam --> |
||||
|
<ol> |
||||
|
<li>První krok</li> |
||||
|
<li>Druhý krok</li> |
||||
|
</ol> |
||||
|
|
||||
|
<!-- Definiční seznam --> |
||||
|
<dl> |
||||
|
<dt>HTML</dt> |
||||
|
<dd>- HyperText Markup Language</dd> |
||||
|
<dt>CSS</dt> |
||||
|
<dd>- Cascading Style Sheets</dd> |
||||
|
</dl> |
||||
|
``` |
||||
|
|
||||
|
### Emmet zkratky: |
||||
|
``` |
||||
|
ul>li*5>a → vytvoří <ul> s 5 <li>, každý obsahuje <a> |
||||
|
table>tr*3>td*4 → vytvoří tabulku 3 řádky × 4 sloupce |
||||
|
p>a → vytvoří <p> s <a> uvnitř |
||||
|
html:5 nebo ! → vytvoří HTML5 šablonu |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prohlédněte si ukázky tabulek a seznamů |
||||
|
3. Zkuste vytvořit vlastní tabulku s více řádky a sloupci |
||||
|
4. Vyzkoušejte Emmet zkratky v editoru |
||||
|
5. Použijte **ALT + klikání** pro psaní na více místech najednou |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Struktura tabulky: |
||||
|
``` |
||||
|
<table> ← kontejner tabulky |
||||
|
<tr> ← řádek (Table Row) |
||||
|
<th> ← hlavička (Table Header) |
||||
|
<td> ← buňka (Table Data) |
||||
|
``` |
||||
|
|
||||
|
### Emmet zkratky - příklady: |
||||
|
- **`html:5`** nebo **`!`** - vytvoří HTML5 šablonu |
||||
|
- **`ul>li*5`** - vytvoří `<ul>` s 5 `<li>` elementy |
||||
|
- **`div.class#id`** - vytvoří `<div class="class" id="id">` |
||||
|
- **`table>tr*3>td*4`** - tabulka 3×4 |
||||
|
- **`h1+p+p`** - `<h1>` a dva `<p>` za sebou |
||||
|
|
||||
|
### Multi-cursor (ALT + klikání): |
||||
|
- Držte **ALT** a klikejte na různá místa |
||||
|
- Můžete psát text na více místech najednou |
||||
|
- Užitečné pro opakující se text |
||||
|
|
||||
|
### Inline CSS: |
||||
|
```html |
||||
|
<!-- Inline CSS přímo v elementu --> |
||||
|
<h1 style="color: lime; background-color: purple;">Nadpis</h1> |
||||
|
|
||||
|
<!-- Lepší je CSS v samostatném souboru (naučíte se v lekci 03) --> |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
- Tabulky se dnes používají **pouze pro tabulková data**, ne pro layout |
||||
|
- Pro layout použijte **CSS Grid** nebo **Flexbox** (naučíte se později) |
||||
|
- **Emmet** je součástí většiny editorů (VS Code, Sublime, Atom) |
||||
|
- Inline CSS je OK pro testování, ale pro produkci použijte externí CSS |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 01_uvod - základy HTML |
||||
|
- **Další:** 03_css_uvod - stylování pomocí CSS |
||||
|
- **Emmet dokumentace:** [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) |
||||
@ -0,0 +1,53 @@ |
|||||
|
# 03 - Úvod do CSS |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte základy CSS (Cascading Style Sheets) - stylování webových stránek. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Připojení CSS** k HTML (external, internal, inline) |
||||
|
- **CSS selektory** (element, třída `.class`, ID `#id`) |
||||
|
- **Barvy** (`color`, `background-color`) |
||||
|
- **Text styling** (velikost, barva, zarovnání) |
||||
|
- **Kombinace tříd** (více tříd na jednom elementu) |
||||
|
- **Stylování seznamů a tabulek** |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML dokument s různými elementy |
||||
|
- `style.css` - CSS soubor s definicemi stylů |
||||
|
|
||||
|
## 🎨 Ukázky v lekci |
||||
|
|
||||
|
```css |
||||
|
/* Stylování třídou */ |
||||
|
.fancyText { color: blue; } |
||||
|
|
||||
|
/* Stylování ID */ |
||||
|
#uniqueElement { font-size: 20px; } |
||||
|
|
||||
|
/* Kombinace tříd */ |
||||
|
.fancyText.fancyBG { ... } |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prozkoumejte soubor `style.css` - zde jsou definovány styly |
||||
|
3. V HTML najděte atributy `class=""` a `style=""` - propojení s CSS |
||||
|
4. Zkuste změnit barvy, velikosti nebo přidat nové třídy |
||||
|
5. Vyzkoušejte kombinovat více tříd na jednom elementu |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **Inline CSS** (`style=""` přímo v HTML) - použijte jen výjimečně |
||||
|
- **External CSS** (samostatný soubor) - nejlepší pro větší projekty |
||||
|
- **Třída** (`.class`) - pro opakující se styly (můžete použít vícekrát) |
||||
|
- **ID** (`#id`) - pro unikátní element (použijte jen jednou na stránce) |
||||
|
- Element může mít více tříd najednou: `class="fancyText fancyBG"` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 01_uvod, 02 - základy HTML |
||||
|
- **Další:** 04_layout - pokročilejší layout techniky |
||||
@ -0,0 +1,45 @@ |
|||||
|
# 04 - CSS Layout |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet layout (rozvržení) webové stránky pomocí CSS. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Box Model** (margin, padding, border) |
||||
|
- **Display property** (`block`, `inline`, `inline-block`) |
||||
|
- **Float** (obtékání elementů) |
||||
|
- **Clear** (ukončení obtékání) |
||||
|
- **Width a Height** (šířka a výška elementů) |
||||
|
- **Základní layouty** (dvousloupcový, třísloupcový) |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML struktura s layoutem |
||||
|
- `style.css` nebo `css/` složka - CSS styly pro layout |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prozkoumejte CSS - zaměřte se na vlastnosti `float`, `clear`, `width` |
||||
|
3. Použijte Developer Tools (F12) a vyzkoušejte Box Model vizualizaci |
||||
|
4. Zkuste změnit šířky sloupců a sledujte, jak se mění layout |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **Box Model**: `margin` (vnější odsazení) ≠ `padding` (vnitřní odsazení) |
||||
|
- **Float** je starší technika - dnes se používá spíše Flexbox nebo Grid |
||||
|
- Nezapomeňte používat `clear: both;` po float elementech |
||||
|
- Developer Tools (F12) jsou váš nejlepší přítel pro debugování layoutu |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
- Float-based layout je starší přístup |
||||
|
- V moderních projektech se používá **Flexbox** (lekce 10) nebo **Grid** (lekce 12) |
||||
|
- Tato lekce je důležitá pro pochopení starších projektů |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 03_css_uvod - základy CSS |
||||
|
- **Další:** 10_flex - moderní flexbox layout |
||||
|
- **Související:** 12_grid - CSS Grid systém |
||||
@ -0,0 +1,71 @@ |
|||||
|
# 05 - Úvod do JavaScriptu |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se seznámíte se základy programování v JavaScriptu. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Připojení JavaScriptu** k HTML (inline, external) |
||||
|
- **Console.log** - výpis do konzole (F12) |
||||
|
- **Proměnné** (`let`, `const`, `var`) |
||||
|
- **Datové typy**: |
||||
|
- Čísla (number) |
||||
|
- Texty (string) |
||||
|
- Pole (array) |
||||
|
- Objekty (object) |
||||
|
- Datum (Date) |
||||
|
- **Podmínky** (`if`, `else`, `&&`, `||`) |
||||
|
- **Cykly** (`for`) |
||||
|
- **Funkce** (definice a volání) |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML soubor s připojením JS |
||||
|
- `app.js` - JavaScript soubor s ukázkami základů |
||||
|
|
||||
|
## 💻 Ukázky v lekci |
||||
|
|
||||
|
```javascript |
||||
|
// Proměnné |
||||
|
let x = 5; |
||||
|
const jmeno = "Jan"; |
||||
|
|
||||
|
// Podmínky |
||||
|
if (x > 3) { |
||||
|
console.log("x je větší než 3"); |
||||
|
} |
||||
|
|
||||
|
// Funkce |
||||
|
function pozdrav() { |
||||
|
console.log("Ahoj!"); |
||||
|
} |
||||
|
pozdrav(); // volání funkce |
||||
|
|
||||
|
// Cyklus |
||||
|
for (let i = 0; i < 5; i++) { |
||||
|
console.log(i); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete **Developer Console** (F12 → záložka Console) |
||||
|
3. Prohlédněte si soubor `app.js` v editoru |
||||
|
4. Zkuste měnit hodnoty proměnných a sledujte výstup v konzoli |
||||
|
5. Vytvořte vlastní funkce a zavolejte je |
||||
|
6. Experimentujte s podmínkami a cykly |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **Console.log()** je váš nejlepší přítel při debugování |
||||
|
- **let** vs **const**: použijte `const` pro hodnoty, které se nemění |
||||
|
- **var** se dnes už moc nepoužívá - používejte `let` nebo `const` |
||||
|
- Nezapomeňte volat funkci pomocí závorek: `nazevFunkce()` |
||||
|
- Pro objekty používáme tečkovou notaci: `osobnost.jmeno` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Další:** 06_js_html - propojení JavaScriptu s HTML elementy |
||||
|
- **Související:** 07_js_css_dom - manipulace s CSS přes JavaScript |
||||
@ -0,0 +1,62 @@ |
|||||
|
# 06 - JavaScript a HTML |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte propojit JavaScript s HTML elementy a vytvořit interaktivní kalkulačku. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **getElementById()** - získání elementu podle ID |
||||
|
- **innerHTML** - změna obsahu elementu |
||||
|
- **innerText** - změna textu elementu |
||||
|
- **onclick** - obsluha kliknutí na tlačítko |
||||
|
- **Input elementy** - čtení hodnot z formulářových polí |
||||
|
- **Number()** - převod textu na číslo |
||||
|
- **Matematické operace** v JavaScriptu |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s inputy a tlačítky |
||||
|
- `js/app.js` - JavaScript s funkcí pro výpočet |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<!-- HTML --> |
||||
|
<input type="number" id="num1" placeholder="Číslo 1"> |
||||
|
<button onclick="vypocitat('+')">SEČÍST</button> |
||||
|
<span id="vysledek"></span> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
// JavaScript |
||||
|
function vypocitat(operator) { |
||||
|
let cislo1 = document.getElementById("num1").value; |
||||
|
let cislo2 = document.getElementById("num2").value; |
||||
|
// výpočet a zobrazení výsledku |
||||
|
document.getElementById("vysledek").innerHTML = vysledek; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Vyzkoušejte kalkulačku - zadejte čísla a klikněte na tlačítka |
||||
|
3. Otevřete `js/app.js` a prozkoumejte funkci `vypocitat()` |
||||
|
4. Sledujte, jak se hodnoty čtou z inputů pomocí `getElementById()` |
||||
|
5. Zkuste přidat další operace (mocnina, odmocnina) |
||||
|
6. Použijte Developer Console (F12) pro debugování |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **getElementById()** vrací element, ne hodnotu - musíte použít `.value` |
||||
|
- **onclick** můžete použít přímo v HTML: `onclick="nazevFunkce()"` |
||||
|
- Hodnoty z inputů jsou vždy **string** - použijte `Number()` pro převod |
||||
|
- **innerHTML** vs **innerText**: innerHTML umožňuje HTML tagy, innerText jen text |
||||
|
- Používejte **console.log()** pro kontrolu hodnot při vývoji |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 05_js_intro - základy JavaScriptu |
||||
|
- **Další:** 07_js_css_dom - manipulace s CSS přes JavaScript |
||||
|
- **Související:** 08_js_form - práce s formuláři |
||||
@ -0,0 +1,85 @@ |
|||||
|
# 07 - JavaScript, CSS a DOM |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte měnit CSS styly pomocí JavaScriptu a pracovat s DOM (Document Object Model). |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **DOM (Document Object Model)** - struktura HTML v JavaScriptu |
||||
|
- **style.property** - změna CSS vlastností přes JS |
||||
|
- **onchange** event - reakce na změnu hodnoty |
||||
|
- **Select element** - práce s rozbalovacím seznamem |
||||
|
- **Input type="color"** - barevný picker |
||||
|
- **Dynamická změna stylů** (barva textu, barva pozadí, font) |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s select elementy a color pickery |
||||
|
- `css/style.css` - základní CSS styly |
||||
|
- `js/index.js` - JavaScript pro změnu barev |
||||
|
- `js/changeFont.js` - JavaScript pro změnu fontu |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<!-- HTML --> |
||||
|
<p id="ltext">Lorem ipsum...</p> |
||||
|
<select id="scolor" onchange="changeSColor()"> |
||||
|
<option value="black">černá</option> |
||||
|
<option value="red">červená</option> |
||||
|
</select> |
||||
|
<input type="color" id="tcolor" onchange="dynColor()"> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
// JavaScript |
||||
|
function changeSColor() { |
||||
|
let element = document.getElementById("ltext"); |
||||
|
let barva = document.getElementById("scolor").value; |
||||
|
element.style.color = barva; |
||||
|
} |
||||
|
|
||||
|
function dynColor() { |
||||
|
let element = document.getElementById("ltext"); |
||||
|
let barva = document.getElementById("tcolor").value; |
||||
|
element.style.color = barva; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Vyzkoušejte měnit barvu textu pomocí selectu a color pickeru |
||||
|
3. Změňte font pomocí selectu |
||||
|
4. Prozkoumejte JS soubory - jak se elementy mění pomocí `.style` |
||||
|
5. Zkuste přidat další styly (velikost textu, tučnost, kurzíva) |
||||
|
6. Experimentujte s různými CSS vlastnostmi |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **element.style.property** - property musí být v camelCase: |
||||
|
- CSS: `background-color` → JS: `backgroundColor` |
||||
|
- CSS: `font-size` → JS: `fontSize` |
||||
|
- **onchange** se spouští při změně hodnoty (select, input) |
||||
|
- **input type="color"** vrací hodnotu v HEX formátu (#000000) |
||||
|
- Používejte **Developer Tools** (F12) → Elements → Styles pro inspekci CSS |
||||
|
|
||||
|
## 🎨 CSS vlastnosti, které můžete měnit přes JS |
||||
|
|
||||
|
```javascript |
||||
|
element.style.color = "red"; |
||||
|
element.style.backgroundColor = "blue"; |
||||
|
element.style.fontSize = "20px"; |
||||
|
element.style.fontFamily = "Arial"; |
||||
|
element.style.fontWeight = "bold"; |
||||
|
element.style.textAlign = "center"; |
||||
|
element.style.padding = "10px"; |
||||
|
element.style.margin = "5px"; |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 06_js_html - propojení JS a HTML |
||||
|
- **Další:** 08_js_form - validace formulářů s JavaScriptem |
||||
|
- **Související:** 05_js_intro - základy JavaScriptu |
||||
@ -0,0 +1,94 @@ |
|||||
|
# 08 - JavaScript a Formuláře |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte pracovat s formuláři v JavaScriptu - validace, odeslání, manipulace s daty. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Formulářové elementy** (input, textarea, select, checkbox, radio) |
||||
|
- **Validace formulářů** s JavaScriptem |
||||
|
- **event.preventDefault()** - zabránění odeslání formuláře |
||||
|
- **Čtení hodnot** z různých typů inputů |
||||
|
- **Kontrola povinných polí** |
||||
|
- **Regex** (základy) - kontrola formátu emailu, telefonu |
||||
|
- **Visual feedback** - zobrazení chyb uživateli |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML formulář |
||||
|
- `js/` - JavaScript soubory pro validaci |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<!-- HTML --> |
||||
|
<form id="myForm" onsubmit="return validateForm()"> |
||||
|
<input type="text" id="jmeno" required> |
||||
|
<input type="email" id="email" required> |
||||
|
<button type="submit">Odeslat</button> |
||||
|
</form> |
||||
|
<p id="error"></p> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
// JavaScript |
||||
|
function validateForm() { |
||||
|
let jmeno = document.getElementById("jmeno").value; |
||||
|
let email = document.getElementById("email").value; |
||||
|
|
||||
|
if (jmeno === "") { |
||||
|
document.getElementById("error").innerHTML = "Jméno je povinné!"; |
||||
|
return false; // zabrání odeslání |
||||
|
} |
||||
|
|
||||
|
// Regex pro email |
||||
|
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
if (!emailRegex.test(email)) { |
||||
|
document.getElementById("error").innerHTML = "Neplatný email!"; |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return true; // formulář se odešle |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Vyzkoušejte odeslat formulář s prázdnými poli |
||||
|
3. Sledujte validační zprávy |
||||
|
4. Prozkoumejte JS kód - jak funguje validace |
||||
|
5. Zkuste přidat další validace (délka hesla, shoda hesel) |
||||
|
6. Použijte console.log() pro debugování |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **return false** v `onsubmit` zabrání odeslání formuláře |
||||
|
- **event.preventDefault()** je modernější způsob zabránění odeslání |
||||
|
- **required** atribut v HTML je první úroveň validace (HTML5) |
||||
|
- **JavaScript validace** je důležitá pro pokročilejší kontroly |
||||
|
- **Regex** (regulární výrazy) jsou mocný nástroj pro validaci formátů |
||||
|
- Vždy validujte i na **serveru** - JavaScript validace lze obejít |
||||
|
|
||||
|
## 🔍 Užitečné Regex vzory |
||||
|
|
||||
|
```javascript |
||||
|
// Email |
||||
|
/^[^\s@]+@[^\s@]+\.[^\s@]+$/ |
||||
|
|
||||
|
// Telefon (CZ formát) |
||||
|
/^(\+420)?[0-9]{9}$/ |
||||
|
|
||||
|
// Heslo (min 8 znaků, velké, malé, číslo) |
||||
|
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/ |
||||
|
|
||||
|
// Poštovní směrovací číslo |
||||
|
/^[0-9]{3}\s?[0-9]{2}$/ |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 07_js_css_dom - manipulace s CSS |
||||
|
- **Související:** AI/ai_03_form_validation - pokročilá validace s addEventListener |
||||
|
- **Další:** 11_json - práce s JSON daty |
||||
@ -0,0 +1,100 @@ |
|||||
|
# 09 - Media Queries a Responzivní Design |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet responzivní webové stránky pomocí media queries. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Media Queries** - CSS pravidla pro různé velikosti obrazovek |
||||
|
- **Viewport meta tag** - důležitý pro responzivitu |
||||
|
- **Breakpointy** - body zlomu pro různá zařízení |
||||
|
- **Mobile-first přístup** vs Desktop-first |
||||
|
- **Responzivní obrázky** - přizpůsobení velikosti |
||||
|
- **Responzivní layout** - změna rozvržení podle velikosti |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s viewport meta tagem |
||||
|
- `style.css` - CSS s media queries |
||||
|
- `img/` - složka s obrázky |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<!-- HTML - DŮLEŽITÝ viewport meta tag! --> |
||||
|
<head> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
</head> |
||||
|
``` |
||||
|
|
||||
|
```css |
||||
|
/* CSS - Media Queries */ |
||||
|
|
||||
|
/* Desktop styly (výchozí) */ |
||||
|
.col-6 { |
||||
|
width: 50%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
/* Tablet (do 768px) */ |
||||
|
@media (max-width: 768px) { |
||||
|
.col-6 { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Mobil (do 480px) */ |
||||
|
@media (max-width: 480px) { |
||||
|
.col-6 { |
||||
|
width: 100%; |
||||
|
} |
||||
|
body { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete **Developer Tools** (F12) a zapněte **Device Toolbar** (Ctrl+Shift+M) |
||||
|
3. Změňte velikost okna nebo vyberte různá zařízení (iPhone, iPad, Desktop) |
||||
|
4. Sledujte, jak se mění layout při různých velikostech |
||||
|
5. Prozkoumejte `style.css` - najděte `@media` pravidla |
||||
|
6. Zkuste přidat vlastní breakpointy a změny stylů |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
- **VŽDY použijte viewport meta tag** - bez něj responzivita na mobilu nebude fungovat! |
||||
|
- **Breakpointy** (běžné hodnoty): |
||||
|
- Mobil: `max-width: 480px` |
||||
|
- Tablet: `max-width: 768px` |
||||
|
- Desktop: `min-width: 769px` nebo bez media query |
||||
|
- **Mobile-first** přístup (doporučený): |
||||
|
- Výchozí styly pro mobil |
||||
|
- Media queries s `min-width` pro větší obrazovky |
||||
|
- **Desktop-first** přístup: |
||||
|
- Výchozí styly pro desktop |
||||
|
- Media queries s `max-width` pro menší obrazovky |
||||
|
- Testujte na **reálných zařízeních**, ne jen v prohlížeči |
||||
|
|
||||
|
## 📱 Testování responzivity |
||||
|
|
||||
|
**V prohlížeči:** |
||||
|
1. F12 → Device Toolbar (Ctrl+Shift+M) |
||||
|
2. Vyberte zařízení nebo nastavte vlastní rozměry |
||||
|
3. Otočte zařízení (landscape/portrait) |
||||
|
|
||||
|
**Běžné rozlišení:** |
||||
|
- iPhone: 375px × 667px |
||||
|
- iPad: 768px × 1024px |
||||
|
- Desktop: 1920px × 1080px |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 08_js_form - JavaScript a formuláře |
||||
|
- **Další:** 10_flex - Flexbox layout |
||||
|
- **Související:** |
||||
|
- 12_grid - CSS Grid (další layout systém) |
||||
|
- AI/ai_01_grid_responsive - praktický projekt s responzivitou |
||||
@ -0,0 +1,129 @@ |
|||||
|
# 10 - Flexbox Layout |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet moderní layouty pomocí CSS Flexbox. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Flexbox základy** - `display: flex` |
||||
|
- **Flex container** vlastnosti: |
||||
|
- `flex-direction` (row, column) |
||||
|
- `justify-content` (zarovnání na hlavní ose) |
||||
|
- `align-items` (zarovnání na vedlejší ose) |
||||
|
- `flex-wrap` (zalamování položek) |
||||
|
- `gap` (mezery mezi položkami) |
||||
|
- **Flex items** vlastnosti: |
||||
|
- `flex-grow`, `flex-shrink`, `flex-basis` |
||||
|
- `align-self` (individuální zarovnání) |
||||
|
- **Praktické použití** - navigace, karty, layout |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML struktura s flexbox layoutem |
||||
|
- `style.css` - CSS s flexbox vlastnostmi |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```css |
||||
|
/* Flex container */ |
||||
|
.wrapper { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
/* Flex items */ |
||||
|
.main { |
||||
|
flex: 2; /* flex-grow: 2 */ |
||||
|
} |
||||
|
|
||||
|
.aside { |
||||
|
flex: 1; /* flex-grow: 1 */ |
||||
|
} |
||||
|
|
||||
|
/* Navigace s flexbox */ |
||||
|
.navigace { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete **Developer Tools** (F12) a vyberte flexbox element |
||||
|
3. V Chrome DevTools najdete **Flexbox** badge - klikněte pro vizualizaci |
||||
|
4. Prozkoumejte `style.css` - jak funguje `display: flex` |
||||
|
5. Zkuste měnit `flex-direction`, `justify-content`, `align-items` |
||||
|
6. Změňte velikost okna a sledujte, jak se flex items přizpůsobují |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Kdy použít Flexbox: |
||||
|
- ✅ Navigační menu (horizontální nebo vertikální) |
||||
|
- ✅ Karty/produkty vedle sebe |
||||
|
- ✅ Centrování elementů (horizontálně i vertikálně) |
||||
|
- ✅ Jednosměrné layouty (řádek nebo sloupec) |
||||
|
|
||||
|
### Kdy raději Grid: |
||||
|
- ❌ Komplexní dvourozměrné layouty (řádky + sloupce) |
||||
|
- ❌ Galerie obrázků |
||||
|
- ❌ Celostránkové layouty s header, sidebar, main, footer |
||||
|
|
||||
|
### Hlavní koncept: |
||||
|
- **Flex container** = rodič s `display: flex` |
||||
|
- **Flex items** = přímé potomci flex containeru |
||||
|
|
||||
|
### Důležité vlastnosti: |
||||
|
```css |
||||
|
/* Na kontejneru */ |
||||
|
display: flex; |
||||
|
justify-content: center; /* horizontální zarovnání */ |
||||
|
align-items: center; /* vertikální zarovnání */ |
||||
|
gap: 20px; /* mezery mezi položkami */ |
||||
|
|
||||
|
/* Na položkách */ |
||||
|
flex: 1; /* roztáhne položku */ |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Praktické příklady |
||||
|
|
||||
|
**Centrování:** |
||||
|
```css |
||||
|
.container { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Horizontální navigace:** |
||||
|
```css |
||||
|
nav { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Responzivní karty:** |
||||
|
```css |
||||
|
.card-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
.card { |
||||
|
flex: 1 1 300px; /* min šířka 300px */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 09_mediaquerry - responzivní design |
||||
|
- **Další:** 11_json - práce s JSON |
||||
|
- **Porovnání:** 12_grid - CSS Grid (dvourozměrný layout) |
||||
|
- **Praktický projekt:** AI/ai_04_prep_bootstrap - kombinace Flex a Grid |
||||
@ -0,0 +1,117 @@ |
|||||
|
# 11 - JSON a Práce s Daty |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte pracovat s JSON formátem a načítat data do JavaScriptu. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **JSON formát** (JavaScript Object Notation) |
||||
|
- **JSON.parse()** - převod JSON stringu na objekt |
||||
|
- **JSON.stringify()** - převod objektu na JSON string |
||||
|
- **Načítání dat z JSON souborů** |
||||
|
- **Práce s JSON daty** v JavaScriptu |
||||
|
- **Výpis dat na stránku** pomocí DOM manipulace |
||||
|
- **Pole objektů** - procházení cyklem |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s elementy pro zobrazení dat |
||||
|
- `js/app.js` - JavaScript pro práce s JSON |
||||
|
- `data/` (možná) - složka s JSON soubory |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```javascript |
||||
|
// JSON objekt v JavaScriptu |
||||
|
const osoba = { |
||||
|
"jmeno": "Jan", |
||||
|
"prijmeni": "Novák", |
||||
|
"vek": 20, |
||||
|
"mesto": "Praha" |
||||
|
}; |
||||
|
|
||||
|
// Výpis dat |
||||
|
console.log(osoba.jmeno); // Jan |
||||
|
|
||||
|
// JSON string |
||||
|
const jsonString = '{"jmeno":"Jan","vek":20}'; |
||||
|
|
||||
|
// Převod stringu na objekt |
||||
|
const obj = JSON.parse(jsonString); |
||||
|
console.log(obj.jmeno); // Jan |
||||
|
|
||||
|
// Převod objektu na string |
||||
|
const str = JSON.stringify(osoba); |
||||
|
console.log(str); // {"jmeno":"Jan",...} |
||||
|
|
||||
|
// Pole objektů |
||||
|
const osoby = [ |
||||
|
{"jmeno": "Jan", "vek": 20}, |
||||
|
{"jmeno": "Petra", "vek": 25}, |
||||
|
{"jmeno": "Karel", "vek": 30} |
||||
|
]; |
||||
|
|
||||
|
// Procházení pole |
||||
|
osoby.forEach(function(osoba) { |
||||
|
console.log(osoba.jmeno + " má " + osoba.vek + " let"); |
||||
|
}); |
||||
|
|
||||
|
// Výpis na stránku |
||||
|
let html = ""; |
||||
|
osoby.forEach(function(osoba) { |
||||
|
html += "<p>" + osoba.jmeno + "</p>"; |
||||
|
}); |
||||
|
document.getElementById("demo").innerHTML = html; |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete **Console** (F12) a sledujte výpis JSON dat |
||||
|
3. Prozkoumejte `js/app.js` - jak se pracuje s JSON |
||||
|
4. Zkuste vytvořit vlastní JSON objekt |
||||
|
5. Vyzkoušejte převody mezi objektem a stringem |
||||
|
6. Vytvořte pole objektů a vypište je na stránku |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### JSON syntaxe: |
||||
|
- **Klíče musí být v uvozovkách**: `{"jmeno": "Jan"}` ✅ |
||||
|
- **Hodnoty**: string (v uvozovkách), číslo, boolean, null, objekt, pole |
||||
|
- **Čárka** mezi položkami, ale ne za poslední |
||||
|
- **Žádné komentáře** v JSON! |
||||
|
|
||||
|
### Běžné chyby: |
||||
|
```javascript |
||||
|
// ❌ ŠPATNĚ - klíče bez uvozovek |
||||
|
{jmeno: "Jan"} |
||||
|
|
||||
|
// ✅ SPRÁVNĚ |
||||
|
{"jmeno": "Jan"} |
||||
|
|
||||
|
// ❌ ŠPATNĚ - čárka za posledním |
||||
|
{"jmeno": "Jan", "vek": 20,} |
||||
|
|
||||
|
// ✅ SPRÁVNĚ |
||||
|
{"jmeno": "Jan", "vek": 20} |
||||
|
``` |
||||
|
|
||||
|
### JSON vs JavaScript objekt: |
||||
|
- **JSON** = textový formát (string), univerzální |
||||
|
- **JS objekt** = datová struktura v paměti |
||||
|
- **JSON.parse()** = převod z textu na objekt |
||||
|
- **JSON.stringify()** = převod z objektu na text |
||||
|
|
||||
|
### Praktické použití: |
||||
|
- 💾 Ukládání dat do localStorage |
||||
|
- 🌐 Komunikace s API (fetch) |
||||
|
- 📤 Odesílání dat na server |
||||
|
- 📥 Načítání konfigurace |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 10_flex - Flexbox layout |
||||
|
- **Další:** 12_grid - CSS Grid |
||||
|
- **Pokročilé:** 20_ajax - AJAX a Fetch API (načítání JSON ze serveru) |
||||
|
- **Praktické:** Práce s API a reálnými JSON daty |
||||
@ -0,0 +1,150 @@ |
|||||
|
# 12 - CSS Grid Layout |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet komplexní dvourozměrné layouty pomocí CSS Grid. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **CSS Grid základy** - `display: grid` |
||||
|
- **Grid container** vlastnosti: |
||||
|
- `grid-template-columns` (definice sloupců) |
||||
|
- `grid-template-rows` (definice řádků) |
||||
|
- `gap`, `column-gap`, `row-gap` (mezery) |
||||
|
- `grid-template-areas` (pojmenované oblasti) |
||||
|
- **Grid items** vlastnosti: |
||||
|
- `grid-column`, `grid-row` (umístění položky) |
||||
|
- `grid-area` (pojmenovaná oblast) |
||||
|
- **Responzivní Grid** - kombinace s media queries |
||||
|
- **Galerie** - praktické použití Gridu |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s grid strukturou |
||||
|
- `style.css` - CSS s grid definicemi |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```css |
||||
|
/* Grid container - galerie */ |
||||
|
.grid-container { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); /* 3 stejně široké sloupce */ |
||||
|
gap: 20px; /* mezery mezi položkami */ |
||||
|
} |
||||
|
|
||||
|
/* Grid items */ |
||||
|
.grid-item { |
||||
|
background-color: lightblue; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
/* První položka zabere 2 sloupce */ |
||||
|
.grid-item:first-child { |
||||
|
grid-column: span 2; |
||||
|
} |
||||
|
|
||||
|
/* Responzivní Grid */ |
||||
|
@media (max-width: 768px) { |
||||
|
.grid-container { |
||||
|
grid-template-columns: repeat(2, 1fr); /* 2 sloupce na tabletu */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) { |
||||
|
.grid-container { |
||||
|
grid-template-columns: 1fr; /* 1 sloupec na mobilu */ |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete **Developer Tools** (F12) a vyberte grid element |
||||
|
3. V Chrome DevTools najdete **Grid** badge - klikněte pro vizualizaci mřížky |
||||
|
4. Prozkoumejte `style.css` - jak funguje `display: grid` |
||||
|
5. Zkuste měnit počet sloupců: `grid-template-columns: repeat(4, 1fr)` |
||||
|
6. Experimentujte s `gap`, `grid-column`, `grid-row` |
||||
|
7. Změňte velikost okna a sledujte responzivitu |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Kdy použít Grid: |
||||
|
- ✅ Komplexní dvourozměrné layouty (řádky + sloupce) |
||||
|
- ✅ Galerie obrázků |
||||
|
- ✅ Celostránkové layouty (header, sidebar, main, footer) |
||||
|
- ✅ Dashboardy, karty v mřížce |
||||
|
- ✅ Kalendáře |
||||
|
|
||||
|
### Kdy raději Flexbox: |
||||
|
- ❌ Jednosměrné layouty (jen řádek nebo jen sloupec) |
||||
|
- ❌ Navigační menu |
||||
|
- ❌ Jednoduchá centrování |
||||
|
|
||||
|
### Hlavní jednotky: |
||||
|
- **fr** (fraction) = podíl dostupného prostoru |
||||
|
- `1fr 2fr` = první sloupec 1/3, druhý 2/3 |
||||
|
- **px** = pevná velikost |
||||
|
- **%** = procenta z containeru |
||||
|
- **auto** = automatická velikost podle obsahu |
||||
|
|
||||
|
### Grid layout pattern: |
||||
|
```css |
||||
|
/* Kontejner */ |
||||
|
.grid-container { |
||||
|
display: grid; /* MUSÍ BÝT! */ |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
/* Položky se umístí automaticky */ |
||||
|
.grid-item { |
||||
|
/* žádné speciální vlastnosti potřeba */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Praktické příklady |
||||
|
|
||||
|
**Galerie 3 sloupce:** |
||||
|
```css |
||||
|
.galerie { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 10px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Responzivní galerie (bez media queries!):** |
||||
|
```css |
||||
|
.galerie { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
||||
|
gap: 20px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Layout stránky:** |
||||
|
```css |
||||
|
.layout { |
||||
|
display: grid; |
||||
|
grid-template-columns: 250px 1fr; /* sidebar + main */ |
||||
|
grid-template-rows: 80px 1fr 60px; /* header + content + footer */ |
||||
|
gap: 10px; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **display: grid musí být na KONTEJNERU**, ne na položkách! |
||||
|
2. **Grid položky** = pouze přímé děti grid containeru |
||||
|
3. Použijte **Chrome DevTools Grid inspector** pro debugování |
||||
|
4. **repeat()** funkce šetří psaní: `repeat(3, 1fr)` = `1fr 1fr 1fr` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 11_json - práce s JSON |
||||
|
- **Další:** 13_bootstrap_intro - úvod do Bootstrapu |
||||
|
- **Porovnání:** 10_flex - Flexbox (jednosměrný layout) |
||||
|
- **Praktický projekt:** AI/ai_01_grid_responsive - kompletní Grid projekt s responzivitou |
||||
@ -0,0 +1,119 @@ |
|||||
|
# 13 - Úvod do Bootstrapu |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se seznámíte s Bootstrap frameworkem a jeho základními komponentami. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Co je Bootstrap** - CSS framework pro rychlý vývoj |
||||
|
- **Připojení Bootstrapu** k projektu (lokální soubory) |
||||
|
- **Container** - základní obal pro obsah (`.container`) |
||||
|
- **Grid systém** - 12sloupcová mřížka |
||||
|
- `.row` - řádek |
||||
|
- `.col` - sloupce (automatická šířka) |
||||
|
- `.col-6` - sloupec se šířkou 6/12 |
||||
|
- **Responzivní třídy** - `col-md-6`, `col-lg-3` |
||||
|
- **Typography** - `display-1`, `display-5` |
||||
|
- **Utility třídy**: |
||||
|
- Okraje: `m-2`, `mx-2`, `p-2` |
||||
|
- Borders: `border`, `border-danger`, `rounded` |
||||
|
- Další: `<mark>`, `<code>`, `<kbd>` |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s Bootstrap třídami |
||||
|
- `css/bootstrap.css` - Bootstrap CSS (lokální) |
||||
|
- `js/bootstrap.js` - Bootstrap JavaScript (lokální) |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<!-- Container --> |
||||
|
<div class="container"> |
||||
|
<h1 class="display-1">Hello, Bootstrap!</h1> |
||||
|
|
||||
|
<!-- Grid systém --> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6 col-lg-3"> |
||||
|
<div class="border border-primary rounded m-2 p-2"> |
||||
|
Obsah sloupce |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6 col-lg-3"> |
||||
|
Další sloupec |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prozkoumejte Bootstrap třídy v HTML |
||||
|
3. Změňte velikost okna - sledujte responzivní chování |
||||
|
4. Vyzkoušejte Developer Tools (F12) - Device Toolbar |
||||
|
5. Experimentujte s různými utility třídami |
||||
|
6. Změňte `col-md-6` na `col-lg-4` a sledujte změny |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Bootstrap Grid System: |
||||
|
- **12 sloupců celkem** v každém řádku |
||||
|
- **col-6** = 6/12 = 50% šířky |
||||
|
- **col-4** = 4/12 = 33.33% šířky |
||||
|
- **col** = automatická šířka (rovnoměrně rozdělí prostor) |
||||
|
|
||||
|
### Responzivní breakpointy: |
||||
|
- **xs** (extra small) = < 576px (mobil) - není třeba psát, je výchozí |
||||
|
- **sm** (small) = ≥ 576px |
||||
|
- **md** (medium) = ≥ 768px (tablet) |
||||
|
- **lg** (large) = ≥ 992px (desktop) |
||||
|
- **xl** (extra large) = ≥ 1200px |
||||
|
|
||||
|
### Příklad responzivity: |
||||
|
```html |
||||
|
<div class="col-12 col-md-6 col-lg-3"> |
||||
|
<!-- Mobil: 100% šířky (12/12) --> |
||||
|
<!-- Tablet: 50% šířky (6/12) --> |
||||
|
<!-- Desktop: 25% šířky (3/12) --> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Container vs Container-fluid: |
||||
|
- **container** = fixní šířka, centrovaný |
||||
|
- **container-fluid** = 100% šířky |
||||
|
|
||||
|
### Důležité: |
||||
|
- VŽDY používejte **row** pro řádky |
||||
|
- Sloupce (**col**) musí být uvnitř **row** |
||||
|
- Celkový součet sloupců by měl být **12** (nebo méně) |
||||
|
|
||||
|
## 🎨 Utility třídy: |
||||
|
|
||||
|
```html |
||||
|
<!-- Okraje (margin) --> |
||||
|
m-2 = margin všude |
||||
|
mx-2 = margin vlevo a vpravo |
||||
|
my-3 = margin nahoře a dole |
||||
|
mt-4 = margin nahoře |
||||
|
|
||||
|
<!-- Padding --> |
||||
|
p-2 = padding všude |
||||
|
px-3 = padding vlevo a vpravo |
||||
|
|
||||
|
<!-- Borders --> |
||||
|
border = přidá border |
||||
|
border-primary = modrý border |
||||
|
border-3 = tlustší border |
||||
|
rounded = zaoblené rohy |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 12_grid - CSS Grid (pochopení grid systému) |
||||
|
- **Důležité přípravné projekty:** |
||||
|
- AI/ai_01_grid_responsive - CSS Grid praxe |
||||
|
- AI/ai_04_prep_bootstrap - komplexní příprava |
||||
|
- **Další:** 14_bootstrap_layout - pokročilejší Bootstrap layouty |
||||
|
- **Související:** 15_bootstrap_components - Bootstrap komponenty |
||||
@ -0,0 +1,162 @@ |
|||||
|
# 14 - Bootstrap Layout |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet kompletní layout stránky s pomocí Bootstrapu. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Header s navigací** - `nav`, `nav-pills`, `nav-item` |
||||
|
- **Flexbox utility třídy** - `d-flex`, `justify-content-center`, `align-items-center` |
||||
|
- **Main content** - hlavní obsah stránky |
||||
|
- **Jumbotron** - velká úvodní sekce (hero section) |
||||
|
- **Tabulky** - `table`, `table-hover`, `table-dark`, `table-info` |
||||
|
- **Footer** - patička stránky s `mt-auto` |
||||
|
- **Sticky footer** - přilepený footer (flexbox pattern) |
||||
|
- **Buttons** - `btn`, `btn-primary` |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - kompletní layout s header, main, footer |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
- `js/bootstrap.js` - Bootstrap JS |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
```html |
||||
|
<body class="d-flex flex-column min-vh-100"> |
||||
|
<!-- Header --> |
||||
|
<header class="d-flex flex-wrap justify-content-center py-3 border-bottom"> |
||||
|
<a href="#" class="me-auto fs-4">Název Stránky</a> |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"> |
||||
|
<a href="#" class="nav-link active">Home</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href="#" class="nav-link">About</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</header> |
||||
|
|
||||
|
<!-- Main --> |
||||
|
<main class="container"> |
||||
|
<!-- Jumbotron --> |
||||
|
<div class="p-5 bg-secondary text-white rounded"> |
||||
|
<h1 class="display-3">Hello world!</h1> |
||||
|
<p>Lorem ipsum...</p> |
||||
|
<a href="#" class="btn btn-primary">Více info</a> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Tabulka --> |
||||
|
<table class="table table-hover"> |
||||
|
<tr class="table-dark"> |
||||
|
<td>Jméno</td> |
||||
|
<td>Email</td> |
||||
|
</tr> |
||||
|
<tr class="table-info"> |
||||
|
<td>Jan</td> |
||||
|
<td>jan@email.cz</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</main> |
||||
|
|
||||
|
<!-- Footer --> |
||||
|
<footer class="footer mt-auto"> |
||||
|
<div class="nav justify-content-center py-2"> |
||||
|
<span>© 2025</span> |
||||
|
</div> |
||||
|
</footer> |
||||
|
</body> |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prozkoumejte strukturu: header → main → footer |
||||
|
3. Změňte velikost okna - sledujte responzivní navigaci |
||||
|
4. Vyzkoušejte hover efekt na tabulce |
||||
|
5. Experimentujte s barevnými třídami tabulek |
||||
|
6. Zkuste přidat další navigační položky |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Sticky Footer pattern: |
||||
|
```html |
||||
|
<body class="d-flex flex-column min-vh-100"> |
||||
|
<header>...</header> |
||||
|
<main class="container">...</main> |
||||
|
<footer class="footer mt-auto">...</footer> |
||||
|
</body> |
||||
|
``` |
||||
|
- **d-flex flex-column** = flexbox ve vertikálním směru |
||||
|
- **min-vh-100** = minimální výška 100% viewportu |
||||
|
- **mt-auto** = margin-top: auto (footer se přilepí dolů) |
||||
|
|
||||
|
### Flexbox utility třídy: |
||||
|
```html |
||||
|
<!-- Display --> |
||||
|
d-flex = display: flex |
||||
|
d-inline-flex = display: inline-flex |
||||
|
|
||||
|
<!-- Direction --> |
||||
|
flex-row = řádkový (výchozí) |
||||
|
flex-column = sloupcový |
||||
|
|
||||
|
<!-- Justify content (horizontální zarovnání) --> |
||||
|
justify-content-start = vlevo |
||||
|
justify-content-center = na střed |
||||
|
justify-content-end = vpravo |
||||
|
justify-content-between = mezi |
||||
|
|
||||
|
<!-- Align items (vertikální zarovnání) --> |
||||
|
align-items-start = nahoře |
||||
|
align-items-center = na střed |
||||
|
align-items-end = dole |
||||
|
``` |
||||
|
|
||||
|
### Navigace: |
||||
|
```html |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"> |
||||
|
<a href="#" class="nav-link active">Aktivní odkaz</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href="#" class="nav-link disabled">Neaktivní odkaz</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
``` |
||||
|
|
||||
|
### Tabulky: |
||||
|
```html |
||||
|
<!-- Základní tabulka --> |
||||
|
<table class="table">...</table> |
||||
|
|
||||
|
<!-- S hover efektem --> |
||||
|
<table class="table table-hover">...</table> |
||||
|
|
||||
|
<!-- Barevné řádky --> |
||||
|
<tr class="table-primary">...</tr> <!-- modrá --> |
||||
|
<tr class="table-success">...</tr> <!-- zelená --> |
||||
|
<tr class="table-danger">...</tr> <!-- červená --> |
||||
|
<tr class="table-warning">...</tr> <!-- žlutá --> |
||||
|
<tr class="table-info">...</tr> <!-- světle modrá --> |
||||
|
<tr class="table-dark">...</tr> <!-- tmavá --> |
||||
|
``` |
||||
|
|
||||
|
### Buttons: |
||||
|
```html |
||||
|
<button class="btn btn-primary">Primary</button> |
||||
|
<button class="btn btn-secondary">Secondary</button> |
||||
|
<button class="btn btn-success">Success</button> |
||||
|
<button class="btn btn-danger">Danger</button> |
||||
|
<button class="btn btn-warning">Warning</button> |
||||
|
<button class="btn btn-outline-primary">Outline</button> |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 13_bootstrap_intro - úvod do Bootstrapu |
||||
|
- **Další:** 15_bootstrap_components - Bootstrap komponenty |
||||
|
- **Související:** |
||||
|
- 10_flex - Flexbox (pochopení flexbox utility tříd) |
||||
|
- AI/ai_02_semantic_portfolio - sémantická struktura stránky |
||||
@ -0,0 +1,165 @@ |
|||||
|
# 15 - Bootstrap Komponenty |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte používat základní Bootstrap komponenty pro vytváření interaktivních webů. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Cards** - kartičky pro obsah |
||||
|
- **Buttons** - tlačítka různých stylů |
||||
|
- **Badges** - odznaky pro zvýraznění |
||||
|
- **Alerts** - upozornění a zprávy |
||||
|
- **Progress bars** - indikátory průběhu |
||||
|
- **Breadcrumbs** - navigační drobečková navigace |
||||
|
- **Pagination** - stránkování |
||||
|
- **List groups** - stylované seznamy |
||||
|
- **Forms** - formulářové komponenty |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - ukázky Bootstrap komponent |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
- `js/bootstrap.js` - Bootstrap JS |
||||
|
|
||||
|
## 💻 Ukázky komponent |
||||
|
|
||||
|
### Cards (Kartičky) |
||||
|
```html |
||||
|
<div class="card" style="width: 18rem;"> |
||||
|
<img src="..." class="card-img-top" alt="..."> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title">Nadpis karty</h5> |
||||
|
<p class="card-text">Text karty...</p> |
||||
|
<a href="#" class="btn btn-primary">Tlačítko</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Alerts |
||||
|
```html |
||||
|
<div class="alert alert-primary" role="alert"> |
||||
|
Primární alert |
||||
|
</div> |
||||
|
<div class="alert alert-success" role="alert"> |
||||
|
Úspěšná operace! |
||||
|
</div> |
||||
|
<div class="alert alert-danger" role="alert"> |
||||
|
Chyba! |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Badges |
||||
|
```html |
||||
|
<h1>Nadpis <span class="badge bg-secondary">Nový</span></h1> |
||||
|
<button class="btn btn-primary"> |
||||
|
Notifikace <span class="badge bg-danger">4</span> |
||||
|
</button> |
||||
|
``` |
||||
|
|
||||
|
### Progress Bar |
||||
|
```html |
||||
|
<div class="progress"> |
||||
|
<div class="progress-bar" role="progressbar" |
||||
|
style="width: 75%" aria-valuenow="75" |
||||
|
aria-valuemin="0" aria-valuemax="100">75%</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Barevné --> |
||||
|
<div class="progress"> |
||||
|
<div class="progress-bar bg-success" style="width: 50%">50%</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Prozkoumejte různé komponenty |
||||
|
3. Vyzkoušejte změnit barvy komponent (primary → success) |
||||
|
4. Experimentujte s kombinacemi komponent |
||||
|
5. Zkuste vytvořit vlastní kartu s obrázkem a tlačítkem |
||||
|
6. Prozkoumejte Bootstrap dokumentaci pro více variant |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Card layout: |
||||
|
```html |
||||
|
<!-- Grid s kartami --> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title">Karta 1</h5> |
||||
|
<p class="card-text">Obsah...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-4"> |
||||
|
<div class="card">...</div> |
||||
|
</div> |
||||
|
<div class="col-md-4"> |
||||
|
<div class="card">...</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Bootstrap barvy (color variants): |
||||
|
Většina komponent podporuje barevné varianty: |
||||
|
- **primary** = modrá (hlavní) |
||||
|
- **secondary** = šedá |
||||
|
- **success** = zelená (úspěch) |
||||
|
- **danger** = červená (chyba) |
||||
|
- **warning** = žlutá (varování) |
||||
|
- **info** = světle modrá (info) |
||||
|
- **light** = světlá |
||||
|
- **dark** = tmavá |
||||
|
|
||||
|
### List Groups: |
||||
|
```html |
||||
|
<ul class="list-group"> |
||||
|
<li class="list-group-item">První položka</li> |
||||
|
<li class="list-group-item active">Aktivní položka</li> |
||||
|
<li class="list-group-item">Třetí položka</li> |
||||
|
</ul> |
||||
|
``` |
||||
|
|
||||
|
### Breadcrumbs: |
||||
|
```html |
||||
|
<nav aria-label="breadcrumb"> |
||||
|
<ol class="breadcrumb"> |
||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li> |
||||
|
<li class="breadcrumb-item"><a href="#">Produkty</a></li> |
||||
|
<li class="breadcrumb-item active">Notebook</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
``` |
||||
|
|
||||
|
### Pagination: |
||||
|
```html |
||||
|
<nav> |
||||
|
<ul class="pagination"> |
||||
|
<li class="page-item"><a class="page-link" href="#">Předchozí</a></li> |
||||
|
<li class="page-item"><a class="page-link" href="#">1</a></li> |
||||
|
<li class="page-item active"><a class="page-link" href="#">2</a></li> |
||||
|
<li class="page-item"><a class="page-link" href="#">3</a></li> |
||||
|
<li class="page-item"><a class="page-link" href="#">Další</a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
``` |
||||
|
|
||||
|
## 🎨 Praktické využití |
||||
|
|
||||
|
**E-shop produkty** = Cards |
||||
|
**Úspěšné odeslání formuláře** = Alert success |
||||
|
**Počet položek v košíku** = Badge |
||||
|
**Upload souboru** = Progress bar |
||||
|
**Navigace kategoriemi** = Breadcrumbs |
||||
|
**Seznam článků** = Pagination |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 14_bootstrap_layout - Bootstrap layout |
||||
|
- **Další:** |
||||
|
- 16_carousel - Bootstrap carousel (slider) |
||||
|
- 17_modal - Bootstrap modal (okna) |
||||
|
- **Dokumentace:** [Bootstrap Components](https://getbootstrap.com/docs/5.3/components/) |
||||
@ -0,0 +1,171 @@ |
|||||
|
# 16 - Bootstrap Carousel |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet carousel (slider/slideshow) pomocí Bootstrapu. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Carousel** - posuvný slider obrázků |
||||
|
- **Carousel indicators** - indikátory snímků (tečky) |
||||
|
- **Carousel controls** - ovládací šipky |
||||
|
- **Carousel captions** - popisky k obrázkům |
||||
|
- **Auto-sliding** - automatické přepínání |
||||
|
- **JavaScript carousel API** - ovládání přes JS |
||||
|
- **Data attributes** - `data-bs-ride`, `data-bs-slide-to` |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s carousel komponentou |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
- `js/bootstrap.js` - Bootstrap JS (DŮLEŽITÝ pro carousel!) |
||||
|
- `images/` - obrázky pro carousel |
||||
|
|
||||
|
## 💻 Základní Carousel |
||||
|
|
||||
|
```html |
||||
|
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> |
||||
|
<!-- Indikátory (tečky) --> |
||||
|
<div class="carousel-indicators"> |
||||
|
<button type="button" data-bs-target="#carouselExample" |
||||
|
data-bs-slide-to="0" class="active"></button> |
||||
|
<button type="button" data-bs-target="#carouselExample" |
||||
|
data-bs-slide-to="1"></button> |
||||
|
<button type="button" data-bs-target="#carouselExample" |
||||
|
data-bs-slide-to="2"></button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Snímky --> |
||||
|
<div class="carousel-inner"> |
||||
|
<div class="carousel-item active"> |
||||
|
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1"> |
||||
|
<div class="carousel-caption"> |
||||
|
<h5>První snímek</h5> |
||||
|
<p>Popis prvního snímku</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="carousel-item"> |
||||
|
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2"> |
||||
|
</div> |
||||
|
<div class="carousel-item"> |
||||
|
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Ovládací šipky --> |
||||
|
<button class="carousel-control-prev" type="button" |
||||
|
data-bs-target="#carouselExample" data-bs-slide="prev"> |
||||
|
<span class="carousel-control-prev-icon"></span> |
||||
|
</button> |
||||
|
<button class="carousel-control-next" type="button" |
||||
|
data-bs-target="#carouselExample" data-bs-slide="next"> |
||||
|
<span class="carousel-control-next-icon"></span> |
||||
|
</button> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Sledujte automatické přepínání snímků |
||||
|
3. Vyzkoušejte kliknout na šipky (prev/next) |
||||
|
4. Klikněte na indikátory (tečky) pro přímý přechod |
||||
|
5. Prozkoumejte HTML - všimněte si `data-bs-*` atributů |
||||
|
6. Zkuste přidat další snímek (carousel-item) |
||||
|
7. Změňte caption texty |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Důležité třídy: |
||||
|
- **carousel slide** - hlavní wrapper |
||||
|
- **carousel-inner** - kontejner pro snímky |
||||
|
- **carousel-item** - jednotlivý snímek |
||||
|
- **carousel-item active** - aktivní (viditelný) snímek |
||||
|
- **d-block w-100** - obrázek na celou šířku |
||||
|
|
||||
|
### Data attributes: |
||||
|
```html |
||||
|
<!-- Automatické spuštění --> |
||||
|
data-bs-ride="carousel" |
||||
|
|
||||
|
<!-- Přechod na konkrétní snímek --> |
||||
|
data-bs-slide-to="0" <!-- první snímek (indexováno od 0) --> |
||||
|
|
||||
|
<!-- Přechod vpřed/vzad --> |
||||
|
data-bs-slide="prev" <!-- předchozí --> |
||||
|
data-bs-slide="next" <!-- další --> |
||||
|
|
||||
|
<!-- Interval mezi snímky (v ms) --> |
||||
|
data-bs-interval="5000" <!-- 5 sekund --> |
||||
|
``` |
||||
|
|
||||
|
### Carousel varianty: |
||||
|
|
||||
|
**Bez automatického přepínání:** |
||||
|
```html |
||||
|
<div class="carousel slide"> <!-- bez data-bs-ride --> |
||||
|
``` |
||||
|
|
||||
|
**Fade efekt místo slide:** |
||||
|
```html |
||||
|
<div class="carousel slide carousel-fade" data-bs-ride="carousel"> |
||||
|
``` |
||||
|
|
||||
|
**Vlastní interval:** |
||||
|
```html |
||||
|
<div class="carousel-item" data-bs-interval="2000"> |
||||
|
<!-- tento snímek se zobrazí 2 sekundy --> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### JavaScript API: |
||||
|
|
||||
|
```javascript |
||||
|
// Získání carousel instance |
||||
|
var myCarousel = document.querySelector('#myCarousel') |
||||
|
var carousel = new bootstrap.Carousel(myCarousel) |
||||
|
|
||||
|
// Ovládání |
||||
|
carousel.next() // další snímek |
||||
|
carousel.prev() // předchozí snímek |
||||
|
carousel.to(2) // přechod na snímek 2 |
||||
|
carousel.cycle() // spustit automatické přepínání |
||||
|
carousel.pause() // pozastavit |
||||
|
``` |
||||
|
|
||||
|
### Responzivní carousel: |
||||
|
```html |
||||
|
<!-- Různé výšky pro různá zařízení --> |
||||
|
<style> |
||||
|
.carousel-item img { |
||||
|
height: 400px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.carousel-item img { |
||||
|
height: 250px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **První carousel-item musí mít třídu `active`** |
||||
|
2. **Všechny data-bs-target musí odpovídat ID carouselu** |
||||
|
3. **Bootstrap.js musí být připojen** - carousel funguje na JavaScriptu |
||||
|
4. **Obrázky by měly mít stejné rozměry** pro hezký vzhled |
||||
|
|
||||
|
## 🎯 Praktické využití |
||||
|
|
||||
|
- **Hlavní stránka** - hero slider s produkty |
||||
|
- **Galerie** - slideshow fotek |
||||
|
- **Testimonials** - recenze zákazníků |
||||
|
- **Portfolio** - ukázky projektů |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 15_bootstrap_components - Bootstrap komponenty |
||||
|
- **Další:** 17_modal - Bootstrap modal |
||||
|
- **Dokumentace:** [Bootstrap Carousel](https://getbootstrap.com/docs/5.3/components/carousel/) |
||||
@ -0,0 +1,224 @@ |
|||||
|
# 17 - Bootstrap Modal |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet modální okna (pop-up okna) pomocí Bootstrapu. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Modal** - modální okno (overlay) |
||||
|
- **Modal struktura** - header, body, footer |
||||
|
- **Data attributes** - `data-bs-toggle`, `data-bs-target` |
||||
|
- **Modal velikosti** - malé, velké, extra velké |
||||
|
- **Scrollable modal** - pro dlouhý obsah |
||||
|
- **Centered modal** - centrované na obrazovce |
||||
|
- **JavaScript Modal API** - otevírání/zavírání přes JS |
||||
|
- **Modal events** - události (show, hide) |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s modal komponentou |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
- `js/bootstrap.js` - Bootstrap JS (DŮLEŽITÝ pro modal!) |
||||
|
|
||||
|
## 💻 Základní Modal |
||||
|
|
||||
|
```html |
||||
|
<!-- Tlačítko pro otevření modalu --> |
||||
|
<button type="button" class="btn btn-primary" |
||||
|
data-bs-toggle="modal" data-bs-target="#exampleModal"> |
||||
|
Otevřít modal |
||||
|
</button> |
||||
|
|
||||
|
<!-- Modal struktura --> |
||||
|
<div class="modal fade" id="exampleModal" tabindex="-1"> |
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
<!-- Header --> |
||||
|
<div class="modal-header"> |
||||
|
<h5 class="modal-title">Nadpis modalu</h5> |
||||
|
<button type="button" class="btn-close" |
||||
|
data-bs-dismiss="modal"></button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Body --> |
||||
|
<div class="modal-body"> |
||||
|
<p>Obsah modálního okna...</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Footer --> |
||||
|
<div class="modal-footer"> |
||||
|
<button type="button" class="btn btn-secondary" |
||||
|
data-bs-dismiss="modal">Zavřít</button> |
||||
|
<button type="button" class="btn btn-primary">Uložit</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Klikněte na tlačítko pro otevření modalu |
||||
|
3. Vyzkoušejte zavření pomocí: |
||||
|
- Křížku (×) |
||||
|
- Tlačítka "Zavřít" |
||||
|
- Kliknutí mimo modal |
||||
|
- Klávesy Esc |
||||
|
4. Prozkoumejte HTML strukturu modalu |
||||
|
5. Zkuste změnit velikost modalu |
||||
|
6. Přidejte formulář do modal-body |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Data attributes: |
||||
|
|
||||
|
**Otevření modalu:** |
||||
|
```html |
||||
|
<button data-bs-toggle="modal" data-bs-target="#myModal"> |
||||
|
Otevřít |
||||
|
</button> |
||||
|
``` |
||||
|
- **data-bs-toggle="modal"** - zapne modal funkcionalitu |
||||
|
- **data-bs-target="#myModal"** - ID modalu, který se otevře |
||||
|
|
||||
|
**Zavření modalu:** |
||||
|
```html |
||||
|
<button data-bs-dismiss="modal">Zavřít</button> |
||||
|
``` |
||||
|
|
||||
|
### Velikosti modalu: |
||||
|
|
||||
|
```html |
||||
|
<!-- Malý modal --> |
||||
|
<div class="modal-dialog modal-sm"> |
||||
|
|
||||
|
<!-- Normální (výchozí) --> |
||||
|
<div class="modal-dialog"> |
||||
|
|
||||
|
<!-- Velký --> |
||||
|
<div class="modal-dialog modal-lg"> |
||||
|
|
||||
|
<!-- Extra velký --> |
||||
|
<div class="modal-dialog modal-xl"> |
||||
|
|
||||
|
<!-- Celá obrazovka --> |
||||
|
<div class="modal-dialog modal-fullscreen"> |
||||
|
``` |
||||
|
|
||||
|
### Centrovaný modal: |
||||
|
|
||||
|
```html |
||||
|
<div class="modal-dialog modal-dialog-centered"> |
||||
|
<!-- vertikálně centrovaný --> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Scrollable modal (dlouhý obsah): |
||||
|
|
||||
|
```html |
||||
|
<div class="modal-dialog modal-dialog-scrollable"> |
||||
|
<div class="modal-content"> |
||||
|
<div class="modal-body"> |
||||
|
<!-- dlouhý obsah zde --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### JavaScript API: |
||||
|
|
||||
|
```javascript |
||||
|
// Otevření modalu přes JavaScript |
||||
|
var myModal = new bootstrap.Modal(document.getElementById('myModal')) |
||||
|
myModal.show() |
||||
|
|
||||
|
// Zavření |
||||
|
myModal.hide() |
||||
|
|
||||
|
// Přepnutí (toggle) |
||||
|
myModal.toggle() |
||||
|
``` |
||||
|
|
||||
|
### Modal events: |
||||
|
|
||||
|
```javascript |
||||
|
var modalEl = document.getElementById('myModal') |
||||
|
|
||||
|
// Před otevřením |
||||
|
modalEl.addEventListener('show.bs.modal', function () { |
||||
|
console.log('Modal se otevírá') |
||||
|
}) |
||||
|
|
||||
|
// Po otevření |
||||
|
modalEl.addEventListener('shown.bs.modal', function () { |
||||
|
console.log('Modal je otevřený') |
||||
|
}) |
||||
|
|
||||
|
// Před zavřením |
||||
|
modalEl.addEventListener('hide.bs.modal', function () { |
||||
|
console.log('Modal se zavírá') |
||||
|
}) |
||||
|
|
||||
|
// Po zavření |
||||
|
modalEl.addEventListener('hidden.bs.modal', function () { |
||||
|
console.log('Modal je zavřený') |
||||
|
}) |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Praktické příklady |
||||
|
|
||||
|
### Modal s formulářem: |
||||
|
|
||||
|
```html |
||||
|
<div class="modal-body"> |
||||
|
<form> |
||||
|
<div class="mb-3"> |
||||
|
<label for="email" class="form-label">Email</label> |
||||
|
<input type="email" class="form-control" id="email"> |
||||
|
</div> |
||||
|
<div class="mb-3"> |
||||
|
<label for="password" class="form-label">Heslo</label> |
||||
|
<input type="password" class="form-control" id="password"> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### Potvrzovací dialog: |
||||
|
|
||||
|
```html |
||||
|
<div class="modal-body"> |
||||
|
<p>Opravdu chcete smazat tento záznam?</p> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Ne</button> |
||||
|
<button class="btn btn-danger" onclick="deleteRecord()">Ano, smazat</button> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 🎨 Praktické využití |
||||
|
|
||||
|
- **Přihlášení/Registrace** - formulář v modalu |
||||
|
- **Potvrzení akce** - "Opravdu smazat?" |
||||
|
- **Detaily produktu** - zobrazení více informací |
||||
|
- **Galerie obrázků** - lightbox efekt |
||||
|
- **Video přehrávač** - YouTube/Vimeo embed |
||||
|
- **Notifikace** - důležité zprávy |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **Modal musí mít jedinečné ID** |
||||
|
2. **Bootstrap.js musí být připojen** - modal funguje na JavaScriptu |
||||
|
3. **data-bs-target musí odpovídat ID modalu** |
||||
|
4. **Vnořené modaly se nedoporučují** (modal v modalu) |
||||
|
5. **Backdrop** (tmavé pozadí) se dá vypnout: `data-bs-backdrop="false"` |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 16_carousel - Bootstrap carousel |
||||
|
- **Související:** |
||||
|
- 15_bootstrap_components - ostatní komponenty |
||||
|
- AI/ai_04_prep_bootstrap - vlastní modal implementace |
||||
|
- **Dokumentace:** [Bootstrap Modal](https://getbootstrap.com/docs/5.3/components/modal/) |
||||
@ -0,0 +1,181 @@ |
|||||
|
# 18 - Bootstrap Formuláře a DOM Manipulace |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvářet dynamické formuláře s Bootstrapem a DOM manipulací. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Bootstrap formuláře** - `form-control`, `form-label`, `mb-3` |
||||
|
- **addEventListener** - moderní přístup k event handlingu |
||||
|
- **event.preventDefault()** - zabránění default chování formuláře |
||||
|
- **DOM manipulace** - vytváření elementů pomocí JS |
||||
|
- **createElement()** - vytvoření nového elementu |
||||
|
- **appendChild()** - přidání elementu do DOM |
||||
|
- **Template literals** - backticks pro HTML šablony |
||||
|
- **Bootstrap Cards** - kartičky pro obsah |
||||
|
- **Real-time výpis** - návštěvní kniha |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - kompletní aplikace s formulářem a výpisem |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
### Formulář s Bootstrap třídami: |
||||
|
```html |
||||
|
<form id="guestbookForm"> |
||||
|
<div class="mb-3"> |
||||
|
<label for="name" class="form-label">Jméno:</label> |
||||
|
<input type="text" class="form-control" id="name" required> |
||||
|
</div> |
||||
|
<div class="mb-3"> |
||||
|
<label for="message" class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="message" required></textarea> |
||||
|
</div> |
||||
|
<button type="submit" class="btn btn-danger w-100">ODESLAT</button> |
||||
|
</form> |
||||
|
|
||||
|
<div id="entries"></div> |
||||
|
``` |
||||
|
|
||||
|
### JavaScript - Template Literals (rychlejší): |
||||
|
```javascript |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
const name = document.getElementById("name").value; |
||||
|
const message = document.getElementById("message").value; |
||||
|
|
||||
|
// Template literal s backticks |
||||
|
const htmldiv = ` |
||||
|
<div class="alert alert-info"> |
||||
|
<strong>${name}</strong>: ${message} |
||||
|
</div> |
||||
|
`; |
||||
|
|
||||
|
entriesDiv.innerHTML += htmldiv; |
||||
|
form.reset(); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### JavaScript - createElement (strukturovanější): |
||||
|
```javascript |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
const name = document.getElementById("name").value; |
||||
|
const message = document.getElementById("message").value; |
||||
|
|
||||
|
// Vytvoření elementů |
||||
|
const div = document.createElement("div"); |
||||
|
div.className = "alert alert-danger"; |
||||
|
|
||||
|
const strong = document.createElement("strong"); |
||||
|
strong.textContent = name; |
||||
|
|
||||
|
const text = document.createElement("span"); |
||||
|
text.textContent = ": " + message; |
||||
|
|
||||
|
// Složení dohromady |
||||
|
div.appendChild(strong); |
||||
|
div.appendChild(text); |
||||
|
|
||||
|
// Vložení do stránky |
||||
|
entriesDiv.appendChild(div); |
||||
|
|
||||
|
form.reset(); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Vyplňte jméno a zprávu do formuláře |
||||
|
3. Odešlete formulář - zpráva se objeví pod formulářem |
||||
|
4. Přidejte další zprávy - všechny se zobrazí |
||||
|
5. Prozkoumejte JavaScript kód - dvě různé metody |
||||
|
6. Vyzkoušejte Developer Tools (F12) - sledujte DOM změny |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### addEventListener vs onclick: |
||||
|
```javascript |
||||
|
// ✅ MODERNÍ přístup (doporučený) |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); |
||||
|
// ... |
||||
|
}); |
||||
|
|
||||
|
// ❌ STARŠÍ přístup (méně flexibilní) |
||||
|
<form onsubmit="return handleSubmit()"> |
||||
|
``` |
||||
|
|
||||
|
### event.preventDefault(): |
||||
|
```javascript |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); // Zastaví odeslání a reload stránky |
||||
|
// Můžeme zpracovat data vlastním způsobem |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### Template Literals (backticks): |
||||
|
```javascript |
||||
|
// Starý způsob (konkatenace) |
||||
|
const html = "<div>" + name + ": " + message + "</div>"; |
||||
|
|
||||
|
// ✅ Nový způsob (template literal) |
||||
|
const html = `<div>${name}: ${message}</div>`; |
||||
|
``` |
||||
|
- Používá **backticks** (AltGr + ý) |
||||
|
- **${proměnná}** - vložení hodnoty proměnné |
||||
|
- Podporuje **víceřádkové stringy** |
||||
|
|
||||
|
### innerHTML vs appendChild: |
||||
|
|
||||
|
**innerHTML** - rychlé, ale přepisuje vše: |
||||
|
```javascript |
||||
|
div.innerHTML = `<p>Nový obsah</p>`; |
||||
|
div.innerHTML += `<p>Přidaný obsah</p>`; |
||||
|
``` |
||||
|
|
||||
|
**appendChild** - přidává element, lepší pro DOM manipulaci: |
||||
|
```javascript |
||||
|
const p = document.createElement("p"); |
||||
|
p.textContent = "Nový obsah"; |
||||
|
div.appendChild(p); |
||||
|
``` |
||||
|
|
||||
|
### Bootstrap Form Classes: |
||||
|
```html |
||||
|
<!-- Form group --> |
||||
|
<div class="mb-3"> <!-- margin-bottom: 1rem --> |
||||
|
<label class="form-label">Název</label> |
||||
|
<input class="form-control" type="text"> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Input velikosti --> |
||||
|
<input class="form-control form-control-sm"> <!-- malý --> |
||||
|
<input class="form-control"> <!-- normální --> |
||||
|
<input class="form-control form-control-lg"> <!-- velký --> |
||||
|
|
||||
|
<!-- Full width button --> |
||||
|
<button class="btn btn-primary w-100">Tlačítko</button> |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Praktické využití |
||||
|
|
||||
|
- **Návštěvní kniha** - uživatelé zanechávají vzkazy |
||||
|
- **Chat aplikace** - zprávy v real-time |
||||
|
- **Komentáře** - pod článkem |
||||
|
- **Todo list** - přidávání úkolů |
||||
|
- **Košík** - přidávání produktů |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** |
||||
|
- 17_modal - Bootstrap modal |
||||
|
- 08_js_form - základy formulářů v JS |
||||
|
- **Další:** 19_todolist - Todo list aplikace |
||||
|
- **Související:** AI/ai_03_form_validation - pokročilá validace formulářů |
||||
@ -0,0 +1,220 @@ |
|||||
|
# 19 - Todo List Aplikace |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte vytvořit kompletní Todo List aplikaci s přidáváním, odebíráním a označováním úkolů. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **Todo List aplikace** - praktický projekt |
||||
|
- **Dynamické přidávání položek** do seznamu |
||||
|
- **Odstranění položek** z DOM |
||||
|
- **Toggle stavu** - splněno/nesplněno |
||||
|
- **Local Storage** - ukládání dat v prohlížeči (možná) |
||||
|
- **Event delegation** - efektivní event handling |
||||
|
- **Bootstrap styling** pro moderní UI |
||||
|
- **Textarea** - víceřádkový vstup |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - HTML s formulářem a seznamem |
||||
|
- `todo.js` - JavaScript pro funkcionalitu |
||||
|
- `css/bootstrap.css` - Bootstrap CSS |
||||
|
|
||||
|
## 💻 Ukázka z lekce |
||||
|
|
||||
|
### HTML struktura: |
||||
|
```html |
||||
|
<textarea class="form-control velkytext" id="todoitem" |
||||
|
placeholder="Zde napiš úkol"></textarea> |
||||
|
<button class="btn btn-primary w-100 my-3" onclick="additem()"> |
||||
|
ZAPSAT |
||||
|
</button> |
||||
|
|
||||
|
<ul id="todoList"></ul> |
||||
|
``` |
||||
|
|
||||
|
### JavaScript - Přidání úkolu: |
||||
|
```javascript |
||||
|
function additem() { |
||||
|
const todoitem = document.getElementById("todoitem").value; |
||||
|
|
||||
|
if (todoitem === "") { |
||||
|
alert("Zadej úkol!"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const todoList = document.getElementById("todoList"); |
||||
|
|
||||
|
// Vytvoření <li> elementu |
||||
|
const li = document.createElement("li"); |
||||
|
li.className = "todolistitem"; |
||||
|
li.innerHTML = ` |
||||
|
${todoitem} |
||||
|
<button class="btn btn-danger btn-sm ms-2" |
||||
|
onclick="removeitem(this)">Smazat</button> |
||||
|
<button class="btn btn-success btn-sm ms-1" |
||||
|
onclick="toggleitem(this)">Hotovo</button> |
||||
|
`; |
||||
|
|
||||
|
todoList.appendChild(li); |
||||
|
|
||||
|
// Vyčištění textarea |
||||
|
document.getElementById("todoitem").value = ""; |
||||
|
} |
||||
|
|
||||
|
// Odstranění úkolu |
||||
|
function removeitem(button) { |
||||
|
const li = button.parentElement; |
||||
|
li.remove(); |
||||
|
} |
||||
|
|
||||
|
// Toggle splněno/nesplněno |
||||
|
function toggleitem(button) { |
||||
|
const li = button.parentElement; |
||||
|
li.classList.toggle("text-decoration-line-through"); |
||||
|
li.classList.toggle("text-muted"); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Napište úkol do textarey |
||||
|
3. Klikněte na "ZAPSAT" - úkol se přidá do seznamu |
||||
|
4. Vyzkoušejte tlačítko "Hotovo" - přeškrtne úkol |
||||
|
5. Klikněte na "Smazat" - odstraní úkol ze seznamu |
||||
|
6. Přidejte více úkolů a vyzkoušejte všechny funkce |
||||
|
7. Prozkoumejte `todo.js` - jak funguje logika |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### parentElement: |
||||
|
```javascript |
||||
|
function removeitem(button) { |
||||
|
// button = <button> element |
||||
|
// button.parentElement = <li> element (rodič) |
||||
|
const li = button.parentElement; |
||||
|
li.remove(); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### classList.toggle(): |
||||
|
```javascript |
||||
|
// Toggle třídy (přidá/odebere) |
||||
|
element.classList.toggle("active"); |
||||
|
|
||||
|
// Přidá třídu |
||||
|
element.classList.add("active"); |
||||
|
|
||||
|
// Odebere třídu |
||||
|
element.classList.remove("active"); |
||||
|
|
||||
|
// Zkontroluje, zda má třídu |
||||
|
element.classList.contains("active"); // true/false |
||||
|
``` |
||||
|
|
||||
|
### text-decoration-line-through: |
||||
|
```html |
||||
|
<!-- Přeškrtnutý text --> |
||||
|
<p class="text-decoration-line-through">Dokončeno</p> |
||||
|
``` |
||||
|
|
||||
|
### Validace vstupu: |
||||
|
```javascript |
||||
|
if (todoitem === "" || todoitem.trim() === "") { |
||||
|
alert("Zadej úkol!"); |
||||
|
return; // Ukončí funkci |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Rozšíření projektu |
||||
|
|
||||
|
### 1. Local Storage (ukládání dat): |
||||
|
```javascript |
||||
|
// Uložení do local storage |
||||
|
function saveTodos() { |
||||
|
const todos = []; |
||||
|
document.querySelectorAll("#todoList li").forEach(li => { |
||||
|
todos.push(li.textContent); |
||||
|
}); |
||||
|
localStorage.setItem("todos", JSON.stringify(todos)); |
||||
|
} |
||||
|
|
||||
|
// Načtení z local storage |
||||
|
function loadTodos() { |
||||
|
const todos = JSON.parse(localStorage.getItem("todos")) || []; |
||||
|
todos.forEach(todo => { |
||||
|
// Přidat do seznamu |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Volat při načtení stránky |
||||
|
window.onload = loadTodos; |
||||
|
``` |
||||
|
|
||||
|
### 2. Počítadlo úkolů: |
||||
|
```html |
||||
|
<p>Celkem úkolů: <span id="totalCount">0</span></p> |
||||
|
<p>Dokončeno: <span id="completedCount">0</span></p> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
function updateCounters() { |
||||
|
const total = document.querySelectorAll("#todoList li").length; |
||||
|
const completed = document.querySelectorAll("#todoList li.text-decoration-line-through").length; |
||||
|
|
||||
|
document.getElementById("totalCount").textContent = total; |
||||
|
document.getElementById("completedCount").textContent = completed; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 3. Priorita úkolů: |
||||
|
```html |
||||
|
<select id="priority" class="form-select"> |
||||
|
<option value="low">Nízká</option> |
||||
|
<option value="medium">Střední</option> |
||||
|
<option value="high">Vysoká</option> |
||||
|
</select> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
// Barevné označení podle priority |
||||
|
if (priority === "high") { |
||||
|
li.classList.add("border-start", "border-danger", "border-5"); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 4. Editace úkolů: |
||||
|
```javascript |
||||
|
function edititem(button) { |
||||
|
const li = button.parentElement; |
||||
|
const newText = prompt("Upravit úkol:", li.firstChild.textContent); |
||||
|
if (newText) { |
||||
|
// Aktualizovat text úkolu |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **Validace vstupu** - kontrolujte prázdné hodnoty |
||||
|
2. **trim()** - odstraní mezery na začátku a konci |
||||
|
3. **this** v onclick - odkazuje na button element |
||||
|
4. **remove()** - moderní způsob odstranění elementu |
||||
|
|
||||
|
## 🎨 Praktické využití |
||||
|
|
||||
|
- **Todo List** - osobní úkoly |
||||
|
- **Nákupní seznam** - položky k nákupu |
||||
|
- **Checklist** - kontrolní seznam |
||||
|
- **Poznámky** - rychlé poznámky |
||||
|
- **Cíle** - tracking cílů |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** 18_forms - formuláře a DOM manipulace |
||||
|
- **Další:** 20_ajax - AJAX a Fetch API |
||||
|
- **Související:** |
||||
|
- 11_json - práce s JSON (pro localStorage) |
||||
|
- 06_js_html - základy DOM manipulace |
||||
@ -0,0 +1,228 @@ |
|||||
|
# 20 - AJAX a Fetch API |
||||
|
|
||||
|
## 🎯 Co se naučíte |
||||
|
|
||||
|
V této lekci se naučíte načítat data z externích API pomocí Fetch API. |
||||
|
|
||||
|
## 📚 Témata lekce |
||||
|
|
||||
|
- **AJAX** - Asynchronous JavaScript and XML |
||||
|
- **Fetch API** - moderní způsob načítání dat |
||||
|
- **Promises** - asynchronní operace |
||||
|
- **async/await** - čistší syntax pro asynchronní kód |
||||
|
- **JSON API** - práce s REST API |
||||
|
- **Pokémon API** - praktická ukázka (pokeapi.co) |
||||
|
- **JSONPlaceholder** - testovací API (jsonplaceholder.typicode.com) |
||||
|
- **Error handling** - ošetření chyb při načítání |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - rozcestník |
||||
|
- `pokemon.html` - práce s Pokémon API |
||||
|
- `todofetch.html` - práce s Todo API |
||||
|
- JavaScript soubory pro fetch operace |
||||
|
|
||||
|
## 💻 Základní Fetch |
||||
|
|
||||
|
### Fetch - Promise syntax: |
||||
|
```javascript |
||||
|
// Načtení dat z API |
||||
|
fetch('https://pokeapi.co/api/v2/pokemon/pikachu') |
||||
|
.then(response => response.json()) // Převod na JSON |
||||
|
.then(data => { |
||||
|
console.log(data); |
||||
|
// Práce s daty |
||||
|
document.getElementById("name").textContent = data.name; |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error('Chyba:', error); |
||||
|
alert('Nepodařilo se načíst data'); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### Fetch - async/await syntax (modernější): |
||||
|
```javascript |
||||
|
async function loadPokemon() { |
||||
|
try { |
||||
|
const response = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu'); |
||||
|
const data = await response.json(); |
||||
|
|
||||
|
console.log(data); |
||||
|
document.getElementById("name").textContent = data.name; |
||||
|
document.getElementById("image").src = data.sprites.front_default; |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('Chyba:', error); |
||||
|
alert('Nepodařilo se načíst data'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Volání funkce |
||||
|
loadPokemon(); |
||||
|
``` |
||||
|
|
||||
|
## 🚀 Jak s lekcí pracovat |
||||
|
|
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Klikněte na "Práce s Pokémon API" |
||||
|
3. Sledujte načítání dat z API |
||||
|
4. Otevřete **Console** (F12) - uvidíte API odpovědi |
||||
|
5. Vyzkoušejte "Práce s TodoList API" |
||||
|
6. Prozkoumejte JavaScript kód - jak funguje fetch |
||||
|
7. Zkuste změnit URL API a načíst jiná data |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
### Fetch API kroky: |
||||
|
|
||||
|
1. **Zavolat fetch()** s URL |
||||
|
2. **Počkat na response** (.then nebo await) |
||||
|
3. **Převést na JSON** (.json()) |
||||
|
4. **Použít data** (zobrazit, zpracovat) |
||||
|
5. **Ošetřit chyby** (.catch nebo try/catch) |
||||
|
|
||||
|
### GET request (načtení dat): |
||||
|
```javascript |
||||
|
fetch('https://api.example.com/data') |
||||
|
.then(response => response.json()) |
||||
|
.then(data => console.log(data)) |
||||
|
.catch(error => console.error(error)); |
||||
|
``` |
||||
|
|
||||
|
### POST request (odeslání dat): |
||||
|
```javascript |
||||
|
fetch('https://api.example.com/data', { |
||||
|
method: 'POST', |
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
}, |
||||
|
body: JSON.stringify({ |
||||
|
title: 'Nový úkol', |
||||
|
completed: false |
||||
|
}) |
||||
|
}) |
||||
|
.then(response => response.json()) |
||||
|
.then(data => console.log('Vytvořeno:', data)) |
||||
|
.catch(error => console.error('Chyba:', error)); |
||||
|
``` |
||||
|
|
||||
|
### Async/Await pattern: |
||||
|
```javascript |
||||
|
async function getData() { |
||||
|
try { |
||||
|
const response = await fetch(url); |
||||
|
|
||||
|
// Kontrola, zda je response OK |
||||
|
if (!response.ok) { |
||||
|
throw new Error('Network response was not ok'); |
||||
|
} |
||||
|
|
||||
|
const data = await response.json(); |
||||
|
return data; |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('Error:', error); |
||||
|
throw error; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Použití |
||||
|
getData() |
||||
|
.then(data => console.log(data)) |
||||
|
.catch(error => console.error(error)); |
||||
|
``` |
||||
|
|
||||
|
### Loading indicator: |
||||
|
```javascript |
||||
|
async function loadData() { |
||||
|
// Zobrazit loading |
||||
|
document.getElementById("loading").style.display = "block"; |
||||
|
|
||||
|
try { |
||||
|
const response = await fetch(url); |
||||
|
const data = await response.json(); |
||||
|
|
||||
|
// Zpracovat data |
||||
|
displayData(data); |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error(error); |
||||
|
} finally { |
||||
|
// Skrýt loading |
||||
|
document.getElementById("loading").style.display = "none"; |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Praktické příklady |
||||
|
|
||||
|
### Pokémon API: |
||||
|
```javascript |
||||
|
async function loadPokemon(name) { |
||||
|
const url = `https://pokeapi.co/api/v2/pokemon/${name}`; |
||||
|
|
||||
|
const response = await fetch(url); |
||||
|
const pokemon = await response.json(); |
||||
|
|
||||
|
// Zobrazení dat |
||||
|
document.getElementById("pokemonName").textContent = pokemon.name; |
||||
|
document.getElementById("pokemonImage").src = pokemon.sprites.front_default; |
||||
|
document.getElementById("pokemonType").textContent = pokemon.types[0].type.name; |
||||
|
document.getElementById("pokemonWeight").textContent = pokemon.weight; |
||||
|
} |
||||
|
|
||||
|
// Volání |
||||
|
loadPokemon("pikachu"); |
||||
|
``` |
||||
|
|
||||
|
### JSONPlaceholder - Todo API: |
||||
|
```javascript |
||||
|
async function loadTodos() { |
||||
|
const response = await fetch('https://jsonplaceholder.typicode.com/todos'); |
||||
|
const todos = await response.json(); |
||||
|
|
||||
|
// Zobrazit prvních 10 todos |
||||
|
const ul = document.getElementById("todoList"); |
||||
|
todos.slice(0, 10).forEach(todo => { |
||||
|
const li = document.createElement("li"); |
||||
|
li.className = todo.completed ? "completed" : ""; |
||||
|
li.textContent = todo.title; |
||||
|
ul.appendChild(li); |
||||
|
}); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🌐 Užitečná testovací API |
||||
|
|
||||
|
- **JSONPlaceholder**: https://jsonplaceholder.typicode.com/ |
||||
|
- Fake REST API pro testování |
||||
|
- Todos, posts, users, comments |
||||
|
|
||||
|
- **PokeAPI**: https://pokeapi.co/ |
||||
|
- Pokémon data |
||||
|
- Obrázky, statistiky, typy |
||||
|
|
||||
|
- **OpenWeather API**: https://openweathermap.org/api |
||||
|
- Počasí (vyžaduje API klíč) |
||||
|
|
||||
|
- **Cat Facts API**: https://catfact.ninja/fact |
||||
|
- Náhodné fakty o kočkách |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **CORS** - některá API mohou blokovat requesty z prohlížeče |
||||
|
2. **API klíče** - některá API vyžadují registraci a klíč |
||||
|
3. **Rate limiting** - omezení počtu requestů |
||||
|
4. **async funkce** vrací vždy Promise |
||||
|
5. **await** lze použít pouze v async funkci |
||||
|
6. **try/catch** vždy použijte pro error handling |
||||
|
|
||||
|
## 🔗 Související lekce |
||||
|
|
||||
|
- **Předchozí:** |
||||
|
- 19_todolist - Todo list aplikace |
||||
|
- 11_json - práce s JSON |
||||
|
- **Související:** API integrace v reálných projektech |
||||
|
- **Dokumentace:** |
||||
|
- [Fetch API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) |
||||
|
- [Async/Await - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) |
||||
@ -0,0 +1,248 @@ |
|||||
|
# Lekce 18: Bootstrap Formuláře a Validace |
||||
|
|
||||
|
## 🎯 Cíl lekce |
||||
|
|
||||
|
Naučit studenty pracovat s Bootstrap formuláři a validací. **Studenti se s validací formulářů setkávají poprvé!** |
||||
|
|
||||
|
## 📝 Osnova lekce |
||||
|
|
||||
|
### Část 1: Základní Bootstrap formuláře (20 min) |
||||
|
- Třída `form-control` pro input, textarea |
||||
|
- Třída `form-select` pro select |
||||
|
- Třída `form-check-input` pro checkbox/radio |
||||
|
- `form-label` pro popisky |
||||
|
- `form-text` pro nápovědu |
||||
|
- Spacing pomocí `mb-3` (margin-bottom) |
||||
|
|
||||
|
### Část 2: HTML5 validace (15 min) |
||||
|
- Atribut `required` - povinné pole |
||||
|
- `minlength` a `maxlength` - omezení délky |
||||
|
- `min` a `max` pro number input |
||||
|
- `pattern` - regulární výrazy pro formát |
||||
|
- `type="email"`, `type="tel"`, `type="number"` |
||||
|
|
||||
|
### Část 3: Bootstrap validační styly (20 min) |
||||
|
- Třídy `is-valid` a `is-invalid` |
||||
|
- `valid-feedback` - zelená zpráva ✅ |
||||
|
- `invalid-feedback` - červená zpráva ❌ |
||||
|
- Třída `needs-validation` na formuláři |
||||
|
- JavaScript validace s `checkValidity()` |
||||
|
- Třída `was-validated` pro zobrazení feedbacku |
||||
|
|
||||
|
### Část 4: Input Groups (10 min) |
||||
|
- `input-group` pro seskupení |
||||
|
- `input-group-text` pro prefix/suffix |
||||
|
- Praktické použití: @ před emailem, +420 před tel., Kč za cenou |
||||
|
|
||||
|
### Část 5: Floating Labels (10 min) |
||||
|
- Moderní vzhled formulářů |
||||
|
- `form-floating` wrapper |
||||
|
- Label se "vyplaví" nahoru při focusu |
||||
|
|
||||
|
### Část 6: Praktický projekt (40 min) |
||||
|
Studenti vytvoří vlastní kontaktní formulář |
||||
|
|
||||
|
## 📁 Soubory v této lekci |
||||
|
|
||||
|
### `index.html` |
||||
|
Hlavní soubor s 5 demo sekcemi: |
||||
|
1. ✅ Základní formulář |
||||
|
2. ✅ HTML5 validace |
||||
|
3. ✅ Bootstrap validace s JavaScriptem |
||||
|
4. ✅ Input Groups |
||||
|
5. ✅ Floating Labels |
||||
|
|
||||
|
**Použití:** Projděte s studenty všechny sekce postupně. Nechte je vyzkoušet formuláře! |
||||
|
|
||||
|
### `template.html` |
||||
|
Startovací šablona pro studenty s: |
||||
|
- ✅ Základní HTML strukturou |
||||
|
- ✅ Jedním ukázkovým polem |
||||
|
- ✅ Připraveným JavaScriptem |
||||
|
- ✅ Nápovědou v sidebaru |
||||
|
|
||||
|
**Použití:** Studenti mohou tuto šablonu použít jako základ pro svůj projekt. |
||||
|
|
||||
|
### `reseni_kontaktni_formular.html` |
||||
|
Kompletní řešení projektu obsahující: |
||||
|
- ✅ Všechna požadovaná pole |
||||
|
- ✅ Floating labels |
||||
|
- ✅ Input group u telefonu (+420) |
||||
|
- ✅ Validaci všech polí |
||||
|
- ✅ Success alert po odeslání |
||||
|
- ✅ BONUS funkce: |
||||
|
- Real-time validace telefonu |
||||
|
- Počítadlo znaků u zprávy |
||||
|
- Scroll k chybám |
||||
|
- Console.log výpis dat |
||||
|
|
||||
|
**Použití:** Ukažte studentům po dokončení jejich projektů. Projděte zejména JavaScript část! |
||||
|
|
||||
|
## 🎯 Projekt pro studenty |
||||
|
|
||||
|
### Zadání: Kontaktní formulář |
||||
|
|
||||
|
Vytvořte plně funkční kontaktní formulář s těmito požadavky: |
||||
|
|
||||
|
#### Povinná pole: |
||||
|
1. **Jméno** - textový input, required |
||||
|
2. **Email** - emailový input, required, správný formát |
||||
|
3. **Předmět** - select s možnostmi, required |
||||
|
4. **Zpráva** - textarea, required, min. 10 znaků |
||||
|
|
||||
|
#### Nepovinné pole: |
||||
|
5. **Telefon** - tel input s pattern `[0-9]{9}` (české číslo) |
||||
|
|
||||
|
#### Další požadavky: |
||||
|
- ✅ Checkbox "Souhlasím se zpracováním údajů" (required) |
||||
|
- ✅ Použít **Floating labels** pro všechna pole |
||||
|
- ✅ **Input group** u telefonu s textem "+420" |
||||
|
- ✅ Zobrazit **Success Alert** po úspěšném odeslání |
||||
|
- ✅ Validovat pomocí JavaScriptu |
||||
|
- ✅ Resetovat formulář po 3-4 sekundách |
||||
|
|
||||
|
#### Bonus úkoly: |
||||
|
- Real-time validace během psaní |
||||
|
- Počítadlo znaků u zprávy |
||||
|
- Scroll k prvnímu chybnému poli |
||||
|
- Vypsat data do console.log |
||||
|
|
||||
|
### Hodnocení (20 bodů): |
||||
|
|
||||
|
- **HTML struktura (5b)** |
||||
|
- Správná struktura formuláře (2b) |
||||
|
- Všechna pole implementována (2b) |
||||
|
- Správné atributy (required, pattern, type) (1b) |
||||
|
|
||||
|
- **Bootstrap styly (5b)** |
||||
|
- Floating labels použity správně (2b) |
||||
|
- Input group u telefonu (1b) |
||||
|
- Správné Bootstrap třídy (form-control, atd.) (2b) |
||||
|
|
||||
|
- **Validace (6b)** |
||||
|
- HTML5 validace správně nastavena (2b) |
||||
|
- JavaScript validace funguje (3b) |
||||
|
- Invalid/valid feedback zprávy (1b) |
||||
|
|
||||
|
- **Funkčnost (4b)** |
||||
|
- Formulář se validuje před odesláním (2b) |
||||
|
- Success alert se zobrazí (1b) |
||||
|
- Formulář se resetuje (1b) |
||||
|
|
||||
|
**Bonusové body (+5b max):** |
||||
|
- Real-time validace (+2b) |
||||
|
- Počítadlo znaků (+1b) |
||||
|
- Scroll k chybám (+1b) |
||||
|
- Console.log výpis (+1b) |
||||
|
|
||||
|
## 💡 Tipy pro učitele |
||||
|
|
||||
|
### Při výuce: |
||||
|
|
||||
|
1. **Začněte prakticky** - Nechte studenty rovnou zkoušet formuláře v `index.html` |
||||
|
|
||||
|
2. **Vysvětlete rozdíl** mezi: |
||||
|
- HTML5 validací (vestavěná v prohlížeči) |
||||
|
- Bootstrap validací (vizuální feedback) |
||||
|
- JavaScript validací (programová kontrola) |
||||
|
|
||||
|
3. **Ukažte DevTools** - Zapněte Console a ukazujte jak funguje `checkValidity()` |
||||
|
|
||||
|
4. **Pattern (RegEx)** - Nebojte se! Ukažte jen jednoduché příklady: |
||||
|
- `[0-9]{9}` = přesně 9 číslic |
||||
|
- `[0-9]{5}` = PSČ (5 číslic) |
||||
|
- Odkažte na regex101.com pro testování |
||||
|
|
||||
|
5. **Event preventDefault** - Vysvětlete proč musíme zastavit defaultní submit |
||||
|
|
||||
|
### Časté chyby studentů: |
||||
|
|
||||
|
❌ **Zapomenou `novalidate` na formuláři** |
||||
|
- Výsledek: Prohlížeč zobrazí vlastní validaci místo Bootstrap stylů |
||||
|
- Řešení: `<form class="needs-validation" novalidate>` |
||||
|
|
||||
|
❌ **Zapomenou `event.preventDefault()`** |
||||
|
- Výsledek: Formulář se odešle a stránka se obnoví |
||||
|
- Řešení: První řádek v event listeneru musí být `event.preventDefault()` |
||||
|
|
||||
|
❌ **Nepoužijí `was-validated` třídu** |
||||
|
- Výsledek: Feedback zprávy se nezobrazí |
||||
|
- Řešení: Po submitu přidat `form.classList.add('was-validated')` |
||||
|
|
||||
|
❌ **Dají `is-valid` přímo do HTML** |
||||
|
- Výsledek: Pole vypadá validní už před vyplněním |
||||
|
- Řešení: Třídy `is-valid`/`is-invalid` se přidávají JavaScriptem, ne v HTML |
||||
|
|
||||
|
❌ **Špatný selector pro feedback** |
||||
|
- Výsledek: Zprávy se nezobrazí u správného pole |
||||
|
- Řešení: `invalid-feedback` musí být sourozenec inputu (na stejné úrovni) |
||||
|
|
||||
|
## 📊 Postup výuky (90 min) |
||||
|
|
||||
|
### Fáze 1: Představení (10 min) |
||||
|
- Ukažte hotový `reseni_kontaktni_formular.html` |
||||
|
- Vyplňte správně i špatně - ukažte rozdíl |
||||
|
- Motivujte studenty: "Tohle dnes vytvoříte!" |
||||
|
|
||||
|
### Fáze 2: Průchod příklady (30 min) |
||||
|
- Otevřete `index.html` |
||||
|
- Projděte sekci po sekci |
||||
|
- Nechte studenty zkoušet každou sekci |
||||
|
- Vysvětlete JavaScript část u sekce 3 |
||||
|
|
||||
|
### Fáze 3: Template a zadání (10 min) |
||||
|
- Ukažte `template.html` |
||||
|
- Projděte zadání z `index.html` (sekce "Projekt pro vás") |
||||
|
- Zodpovězte dotazy |
||||
|
|
||||
|
### Fáze 4: Samostatná práce (35 min) |
||||
|
- Studenti pracují na projektu |
||||
|
- Procházejte mezi nimi |
||||
|
- Pomáhejte s dotazy |
||||
|
|
||||
|
### Fáze 5: Prezentace řešení (5 min) |
||||
|
- Otevřete `reseni_kontaktni_formular.html` |
||||
|
- Projděte kód |
||||
|
- Ukažte bonus funkce |
||||
|
|
||||
|
## 🔗 Navazující lekce |
||||
|
|
||||
|
Po této lekci můžete pokračovat: |
||||
|
- **19 - Alerts & Toasts** (notifikace uživateli) |
||||
|
- **20 - Navbar & Dropdowns** (navigace) |
||||
|
- **Závěrečný projekt** kombinující formuláře s jinými komponenty |
||||
|
|
||||
|
## 📚 Užitečné odkazy pro studenty |
||||
|
|
||||
|
- [Bootstrap Forms dokumentace](https://getbootstrap.com/docs/5.3/forms/overview/) |
||||
|
- [Bootstrap Validation](https://getbootstrap.com/docs/5.3/forms/validation/) |
||||
|
- [HTML5 Input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) |
||||
|
- [RegEx tester](https://regex101.com/) |
||||
|
|
||||
|
## ✅ Co by studenti měli umět po této lekci |
||||
|
|
||||
|
Po absolvování lekce by studenti měli být schopni: |
||||
|
|
||||
|
✅ Vytvořit Bootstrap formulář se správnými třídami |
||||
|
✅ Použít HTML5 validační atributy (required, pattern, minlength) |
||||
|
✅ Implementovat JavaScript validaci pomocí `checkValidity()` |
||||
|
✅ Zobrazit validační feedback (zelený/červený) |
||||
|
✅ Vytvořit Input Groups s prefix/suffix |
||||
|
✅ Použít Floating Labels |
||||
|
✅ Zastavit defaultní odeslání formuláře |
||||
|
✅ Zobrazit Alert po úspěšném odeslání |
||||
|
✅ Resetovat formulář po odeslání |
||||
|
|
||||
|
**Bonusové dovednosti:** |
||||
|
- Real-time validace |
||||
|
- Počítadlo znaků |
||||
|
- Scroll k chybám |
||||
|
- Práce s console.log |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
Vytvořeno: 2. prosince 2025 |
||||
|
Předmět: Webové Technologie (WTL) |
||||
|
Cílová skupina: 3. ročník IT |
||||
|
|
||||
|
**Hodně štěstí při výuce! 🚀** |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,429 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Bootstrap Forms & Validace</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
<style> |
||||
|
.demo-section { |
||||
|
margin: 40px 0; |
||||
|
padding: 30px; |
||||
|
border: 2px solid #dee2e6; |
||||
|
border-radius: 10px; |
||||
|
background-color: #f8f9fa; |
||||
|
} |
||||
|
.demo-title { |
||||
|
color: #0d6efd; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body class="d-flex flex-column min-vh-100"> |
||||
|
<!-- Header --> |
||||
|
<div class="container"> |
||||
|
<header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom"> |
||||
|
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none fs-4"> |
||||
|
Bootstrap Forms & Validace |
||||
|
</a> |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"><a href="#zaklad" class="nav-link">Základy</a></li> |
||||
|
<li class="nav-item"><a href="#html-validace" class="nav-link">HTML validace</a></li> |
||||
|
<li class="nav-item"><a href="#bootstrap-validace" class="nav-link">Bootstrap validace</a></li> |
||||
|
<li class="nav-item"><a href="#projekt" class="nav-link active">Projekt</a></li> |
||||
|
</ul> |
||||
|
</header> |
||||
|
</div> |
||||
|
|
||||
|
<!-- MAIN --> |
||||
|
<main class="container"> |
||||
|
<h1 class="display-4 mb-4">Lekce 18: Formuláře a Validace</h1> |
||||
|
|
||||
|
<!-- SEKCE 1: Základní formulář --> |
||||
|
<div class="demo-section" id="zaklad"> |
||||
|
<h2 class="demo-title">1️⃣ Základní Bootstrap Formulář</h2> |
||||
|
<p class="lead">Bootstrap poskytuje krásné styly pro formuláře pomocí třídy <code>form-control</code></p> |
||||
|
|
||||
|
<form> |
||||
|
<!-- Textový input --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="jmeno" class="form-label">Jméno:</label> |
||||
|
<input type="text" class="form-control" id="jmeno" placeholder="Zadejte jméno"> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Email input --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="email" class="form-label">Email:</label> |
||||
|
<input type="email" class="form-control" id="email" placeholder="vas@email.cz"> |
||||
|
<div class="form-text">Zadejte platnou emailovou adresu</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Password --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="heslo" class="form-label">Heslo:</label> |
||||
|
<input type="password" class="form-control" id="heslo"> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Textarea --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="zprava" class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="zprava" rows="3"></textarea> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Select --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="zeme" class="form-label">Země:</label> |
||||
|
<select class="form-select" id="zeme"> |
||||
|
<option selected>Vyberte zemi...</option> |
||||
|
<option value="cz">Česká republika</option> |
||||
|
<option value="sk">Slovensko</option> |
||||
|
<option value="pl">Polsko</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Checkbox --> |
||||
|
<div class="mb-3 form-check"> |
||||
|
<input type="checkbox" class="form-check-input" id="souhlas"> |
||||
|
<label class="form-check-label" for="souhlas"> |
||||
|
Souhlasím s podmínkami |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-primary">Odeslat</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- SEKCE 2: HTML5 validace --> |
||||
|
<div class="demo-section" id="html-validace"> |
||||
|
<h2 class="demo-title">2️⃣ HTML5 Validace (zabudovaná v prohlížeči)</h2> |
||||
|
<p class="lead">Pomocí HTML atributů <code>required</code>, <code>minlength</code>, <code>maxlength</code>, <code>pattern</code></p> |
||||
|
|
||||
|
<div class="alert alert-info"> |
||||
|
<strong>💡 Tip:</strong> Zkuste odeslat formulář bez vyplnění - prohlížeč vás upozorní! |
||||
|
</div> |
||||
|
|
||||
|
<form> |
||||
|
<!-- Required pole --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="jmeno2" class="form-label">Jméno (povinné):</label> |
||||
|
<input type="text" class="form-control" id="jmeno2" required> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Email s required --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="email2" class="form-label">Email (povinný):</label> |
||||
|
<input type="email" class="form-control" id="email2" required> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Min a max length --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="username" class="form-label">Uživatelské jméno (min 3, max 15 znaků):</label> |
||||
|
<input type="text" class="form-control" id="username" |
||||
|
minlength="3" maxlength="15" required> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Pattern (regulární výraz) --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="telefon" class="form-label">Telefon (formát: 123456789):</label> |
||||
|
<input type="tel" class="form-control" id="telefon" |
||||
|
pattern="[0-9]{9}" |
||||
|
placeholder="123456789" |
||||
|
required> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Number s min/max --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="vek" class="form-label">Věk (15-120):</label> |
||||
|
<input type="number" class="form-control" id="vek" |
||||
|
min="15" max="120" required> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-success">Odeslat formulář</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- SEKCE 3: Bootstrap validace s vizuálním feedbackem --> |
||||
|
<div class="demo-section" id="bootstrap-validace"> |
||||
|
<h2 class="demo-title">3️⃣ Bootstrap Validace (s vizuálním feedbackem)</h2> |
||||
|
<p class="lead">Bootstrap třídy: <code>is-valid</code> (zelená), <code>is-invalid</code> (červená)</p> |
||||
|
|
||||
|
<!-- Příklad: správně vyplněné pole --> |
||||
|
<h4>✅ Správně vyplněné pole:</h4> |
||||
|
<div class="mb-3"> |
||||
|
<label for="validEmail" class="form-label">Email:</label> |
||||
|
<input type="email" class="form-control is-valid" id="validEmail" value="uzivatel@email.cz"> |
||||
|
<div class="valid-feedback"> |
||||
|
Vypadá to dobře! |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Příklad: špatně vyplněné pole --> |
||||
|
<h4>❌ Špatně vyplněné pole:</h4> |
||||
|
<div class="mb-3"> |
||||
|
<label for="invalidEmail" class="form-label">Email:</label> |
||||
|
<input type="email" class="form-control is-invalid" id="invalidEmail" value="spatnyemail"> |
||||
|
<div class="invalid-feedback"> |
||||
|
Zadejte prosím platnou emailovou adresu! |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr class="my-5"> |
||||
|
|
||||
|
<!-- Komplexní formulář s Bootstrap validací --> |
||||
|
<h3>📝 Kompletní registrační formulář s validací</h3> |
||||
|
<div class="alert alert-warning"> |
||||
|
<strong>⚠️ Pozor:</strong> Tento formulář používá JavaScript pro validaci. Klikněte na "Registrovat" a uvidíte validaci v akci! |
||||
|
</div> |
||||
|
|
||||
|
<form id="registrationForm" class="needs-validation" novalidate> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6 mb-3"> |
||||
|
<label for="regJmeno" class="form-label">Jméno *</label> |
||||
|
<input type="text" class="form-control" id="regJmeno" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Vyplňte prosím jméno. |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6 mb-3"> |
||||
|
<label for="regPrijmeni" class="form-label">Příjmení *</label> |
||||
|
<input type="text" class="form-control" id="regPrijmeni" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Vyplňte prosím příjmení. |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regEmail" class="form-label">Email *</label> |
||||
|
<input type="email" class="form-control" id="regEmail" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Zadejte platnou emailovou adresu. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regUsername" class="form-label">Uživatelské jméno *</label> |
||||
|
<input type="text" class="form-control" id="regUsername" |
||||
|
minlength="3" maxlength="15" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Uživatelské jméno musí mít 3-15 znaků. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regHeslo" class="form-label">Heslo *</label> |
||||
|
<input type="password" class="form-control" id="regHeslo" |
||||
|
minlength="6" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Heslo musí mít alespoň 6 znaků. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regHeslo2" class="form-label">Heslo znovu *</label> |
||||
|
<input type="password" class="form-control" id="regHeslo2" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Hesla se musí shodovat. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regVek" class="form-label">Věk *</label> |
||||
|
<input type="number" class="form-control" id="regVek" |
||||
|
min="15" max="120" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Věk musí být mezi 15 a 120 lety. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="regZeme" class="form-label">Země *</label> |
||||
|
<select class="form-select" id="regZeme" required> |
||||
|
<option value="">Vyberte...</option> |
||||
|
<option value="cz">Česká republika</option> |
||||
|
<option value="sk">Slovensko</option> |
||||
|
<option value="pl">Polsko</option> |
||||
|
<option value="at">Rakousko</option> |
||||
|
</select> |
||||
|
<div class="invalid-feedback"> |
||||
|
Vyberte prosím zemi. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3 form-check"> |
||||
|
<input type="checkbox" class="form-check-input" id="regSouhlas" required> |
||||
|
<label class="form-check-label" for="regSouhlas"> |
||||
|
Souhlasím s podmínkami * |
||||
|
</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Musíte souhlasit s podmínkami. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-primary btn-lg">Registrovat</button> |
||||
|
</form> |
||||
|
|
||||
|
<div id="successMessage" class="alert alert-success mt-4" style="display: none;"> |
||||
|
<h4>✅ Registrace úspěšná!</h4> |
||||
|
<p>Všechna pole byla vyplněna správně.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- SEKCE 4: Input Groups --> |
||||
|
<div class="demo-section"> |
||||
|
<h2 class="demo-title">4️⃣ Input Groups (pole s ikonami/textem)</h2> |
||||
|
<p class="lead">Přidání textu nebo symbolů před/za input pole</p> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="username3" class="form-label">Uživatelské jméno:</label> |
||||
|
<div class="input-group"> |
||||
|
<span class="input-group-text">@</span> |
||||
|
<input type="text" class="form-control" id="username3" placeholder="uzivatel"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="website" class="form-label">Webová stránka:</label> |
||||
|
<div class="input-group"> |
||||
|
<span class="input-group-text">https://</span> |
||||
|
<input type="text" class="form-control" id="website" placeholder="www.example.com"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="cena" class="form-label">Cena:</label> |
||||
|
<div class="input-group"> |
||||
|
<input type="number" class="form-control" id="cena" placeholder="0"> |
||||
|
<span class="input-group-text">Kč</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="search" class="form-label">Vyhledávání:</label> |
||||
|
<div class="input-group"> |
||||
|
<input type="text" class="form-control" id="search" placeholder="Hledat..."> |
||||
|
<button class="btn btn-outline-secondary" type="button">🔍</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- SEKCE 5: Floating Labels --> |
||||
|
<div class="demo-section"> |
||||
|
<h2 class="demo-title">5️⃣ Floating Labels (moderní vzhled)</h2> |
||||
|
<p class="lead">Label se zobrazí uvnitř inputu a "vyplave" nahoru po kliknutí</p> |
||||
|
|
||||
|
<div class="form-floating mb-3"> |
||||
|
<input type="text" class="form-control" id="floatingJmeno" placeholder="Jméno"> |
||||
|
<label for="floatingJmeno">Jméno</label> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-floating mb-3"> |
||||
|
<input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com"> |
||||
|
<label for="floatingEmail">Email</label> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-floating mb-3"> |
||||
|
<select class="form-select" id="floatingSelect"> |
||||
|
<option selected>Vyberte...</option> |
||||
|
<option value="1">Option 1</option> |
||||
|
<option value="2">Option 2</option> |
||||
|
</select> |
||||
|
<label for="floatingSelect">Výběr</label> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-floating mb-3"> |
||||
|
<textarea class="form-control" placeholder="Zpráva" id="floatingTextarea" style="height: 100px"></textarea> |
||||
|
<label for="floatingTextarea">Zpráva</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- PROJEKT PRO STUDENTY --> |
||||
|
<div class="demo-section bg-warning bg-opacity-10" id="projekt"> |
||||
|
<h2 class="demo-title text-danger">🎯 PROJEKT PRO VÁS: Kontaktní formulář</h2> |
||||
|
<div class="alert alert-danger"> |
||||
|
<h4>📝 Zadání:</h4> |
||||
|
<p>Vytvořte vlastní kontaktní formulář s těmito požadavky:</p> |
||||
|
<ol> |
||||
|
<li><strong>Pole:</strong> Jméno, Email, Telefon, Předmět, Zpráva</li> |
||||
|
<li><strong>Validace:</strong> Všechna pole povinná (kromě Telefon)</li> |
||||
|
<li><strong>Telefon:</strong> Pattern pro české číslo (9 číslic)</li> |
||||
|
<li><strong>Email:</strong> Správný email formát</li> |
||||
|
<li><strong>Zpráva:</strong> Minimálně 10 znaků</li> |
||||
|
<li><strong>Vzhled:</strong> Použijte Floating labels</li> |
||||
|
<li><strong>Bonus:</strong> Přidejte Input group k telefonu (+420)</li> |
||||
|
<li><strong>Submit:</strong> Při úspěšném odeslání zobrazte Alert</li> |
||||
|
</ol> |
||||
|
<p class="mb-0"><strong>Vytvořte nový soubor:</strong> <code>muj_formular.html</code></p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</main> |
||||
|
|
||||
|
<!-- Footer --> |
||||
|
<footer class="footer mt-auto py-3 bg-light"> |
||||
|
<div class="container text-center"> |
||||
|
<span class="text-muted">Bootstrap Forms & Validace | WTL 2025</span> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<!-- JAVASCRIPT pro validaci --> |
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
<script> |
||||
|
// ===== VALIDACE REGISTRAČNÍHO FORMULÁŘE ===== |
||||
|
|
||||
|
// Najdeme formulář |
||||
|
const form = document.getElementById('registrationForm'); |
||||
|
const successMessage = document.getElementById('successMessage'); |
||||
|
|
||||
|
// Přidáme event listener na submit |
||||
|
form.addEventListener('submit', function(event) { |
||||
|
// Zastavíme defaultní odeslání formuláře |
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
// Speciální validace: hesla se musí shodovat |
||||
|
const heslo = document.getElementById('regHeslo'); |
||||
|
const heslo2 = document.getElementById('regHeslo2'); |
||||
|
|
||||
|
if (heslo.value !== heslo2.value) { |
||||
|
heslo2.setCustomValidity('Hesla se neshodují'); |
||||
|
} else { |
||||
|
heslo2.setCustomValidity(''); |
||||
|
} |
||||
|
|
||||
|
// Zkontrolujeme validitu formuláře |
||||
|
if (form.checkValidity()) { |
||||
|
// Formulář je validní - zobrazíme success zprávu |
||||
|
form.classList.add('was-validated'); |
||||
|
successMessage.style.display = 'block'; |
||||
|
|
||||
|
// Scrollujeme ke zprávě |
||||
|
successMessage.scrollIntoView({ behavior: 'smooth' }); |
||||
|
|
||||
|
// Resetujeme formulář po 3 sekundách |
||||
|
setTimeout(function() { |
||||
|
form.reset(); |
||||
|
form.classList.remove('was-validated'); |
||||
|
successMessage.style.display = 'none'; |
||||
|
}, 3000); |
||||
|
} else { |
||||
|
// Formulář není validní - zobrazíme chyby |
||||
|
form.classList.add('was-validated'); |
||||
|
successMessage.style.display = 'none'; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Real-time validace hesel |
||||
|
document.getElementById('regHeslo2').addEventListener('input', function() { |
||||
|
const heslo = document.getElementById('regHeslo'); |
||||
|
const heslo2 = this; |
||||
|
|
||||
|
if (heslo.value !== heslo2.value) { |
||||
|
heslo2.setCustomValidity('Hesla se neshodují'); |
||||
|
} else { |
||||
|
heslo2.setCustomValidity(''); |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,280 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Kontaktní Formulář - Řešení</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
</head> |
||||
|
<body class="d-flex flex-column min-vh-100"> |
||||
|
<!-- Header --> |
||||
|
<div class="container"> |
||||
|
<header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom"> |
||||
|
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none fs-4"> |
||||
|
Kontaktní Formulář |
||||
|
</a> |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"><a href="index.html" class="nav-link">Zpět na příklady</a></li> |
||||
|
<li class="nav-item"><a href="template.html" class="nav-link">Šablona</a></li> |
||||
|
</ul> |
||||
|
</header> |
||||
|
</div> |
||||
|
|
||||
|
<!-- MAIN --> |
||||
|
<main class="container"> |
||||
|
<div class="row justify-content-center"> |
||||
|
<div class="col-lg-8"> |
||||
|
<h1 class="display-5 mb-2">📧 Kontaktujte nás</h1> |
||||
|
<p class="text-muted mb-4">Vyplňte formulář níže a ozveme se vám co nejdříve.</p> |
||||
|
|
||||
|
<!-- Kontaktní formulář --> |
||||
|
<form id="contactForm" class="needs-validation" novalidate> |
||||
|
|
||||
|
<!-- Jméno - Floating label --> |
||||
|
<div class="form-floating mb-3"> |
||||
|
<input type="text" |
||||
|
class="form-control" |
||||
|
id="jmeno" |
||||
|
placeholder="Jméno" |
||||
|
required> |
||||
|
<label for="jmeno">Jméno *</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Prosím vyplňte vaše jméno. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Email - Floating label --> |
||||
|
<div class="form-floating mb-3"> |
||||
|
<input type="email" |
||||
|
class="form-control" |
||||
|
id="email" |
||||
|
placeholder="Email" |
||||
|
required> |
||||
|
<label for="email">Email *</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Prosím zadejte platnou emailovou adresu. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Telefon - Input group s +420 a pattern pro 9 číslic --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="telefon" class="form-label">Telefon (nepovinné)</label> |
||||
|
<div class="input-group"> |
||||
|
<span class="input-group-text">+420</span> |
||||
|
<input type="tel" |
||||
|
class="form-control" |
||||
|
id="telefon" |
||||
|
placeholder="123456789" |
||||
|
pattern="[0-9]{9}"> |
||||
|
<div class="invalid-feedback"> |
||||
|
Zadejte telefonní číslo ve formátu 123456789 (9 číslic). |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-text">Formát: 9 číslic bez mezer (např. 777123456)</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Předmět - Floating select --> |
||||
|
<div class="form-floating mb-3"> |
||||
|
<select class="form-select" id="predmet" required> |
||||
|
<option value="">Vyberte předmět...</option> |
||||
|
<option value="dotaz">Obecný dotaz</option> |
||||
|
<option value="podpora">Technická podpora</option> |
||||
|
<option value="objednavka">Objednávka</option> |
||||
|
<option value="reklamace">Reklamace</option> |
||||
|
<option value="jine">Jiné</option> |
||||
|
</select> |
||||
|
<label for="predmet">Předmět *</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Vyberte prosím předmět zprávy. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Zpráva - Floating textarea s minlength 10 --> |
||||
|
<div class="form-floating mb-3"> |
||||
|
<textarea class="form-control" |
||||
|
id="zprava" |
||||
|
placeholder="Zpráva" |
||||
|
style="height: 150px" |
||||
|
minlength="10" |
||||
|
required></textarea> |
||||
|
<label for="zprava">Zpráva * (min. 10 znaků)</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Zpráva musí obsahovat alespoň 10 znaků. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- GDPR souhlas --> |
||||
|
<div class="mb-4 form-check"> |
||||
|
<input type="checkbox" |
||||
|
class="form-check-input" |
||||
|
id="souhlas" |
||||
|
required> |
||||
|
<label class="form-check-label" for="souhlas"> |
||||
|
Souhlasím se zpracováním osobních údajů * |
||||
|
</label> |
||||
|
<div class="invalid-feedback"> |
||||
|
Musíte souhlasit se zpracováním osobních údajů. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Submit button --> |
||||
|
<div class="d-grid gap-2"> |
||||
|
<button type="submit" class="btn btn-primary btn-lg"> |
||||
|
📨 Odeslat zprávu |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<p class="text-muted mt-3 small">* = povinné pole</p> |
||||
|
</form> |
||||
|
|
||||
|
<!-- Success Alert (skrytý, zobrazí se po úspěšném odeslání) --> |
||||
|
<div id="successAlert" class="alert alert-success alert-dismissible fade show mt-4" style="display: none;"> |
||||
|
<h4 class="alert-heading">✅ Zpráva byla odeslána!</h4> |
||||
|
<p>Děkujeme za váš kontakt. Ozveme se vám co nejdříve.</p> |
||||
|
<hr> |
||||
|
<p class="mb-0">Obvykle odpovídáme do 24 hodin.</p> |
||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Info sekce --> |
||||
|
<div class="card mt-5 bg-light"> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title">📞 Další kontaktní možnosti</h5> |
||||
|
<ul class="list-unstyled mb-0"> |
||||
|
<li>📧 Email: info@example.cz</li> |
||||
|
<li>☎️ Telefon: +420 123 456 789</li> |
||||
|
<li>🏢 Adresa: Praha 1, Václavské náměstí 1</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
|
||||
|
<!-- Footer --> |
||||
|
<footer class="footer mt-auto py-3 bg-light"> |
||||
|
<div class="container text-center"> |
||||
|
<span class="text-muted">Kontaktní Formulář - Řešení | WTL 2025</span> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
<script> |
||||
|
// ===== JAVASCRIPT VALIDACE ===== |
||||
|
|
||||
|
// 1. Najdeme formulář a success alert |
||||
|
const contactForm = document.getElementById('contactForm'); |
||||
|
const successAlert = document.getElementById('successAlert'); |
||||
|
|
||||
|
// 2. Přidáme event listener na odeslání formuláře |
||||
|
contactForm.addEventListener('submit', function(event) { |
||||
|
// Zastavíme defaultní odeslání formuláře |
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
// 3. Zkontrolujeme validitu formuláře |
||||
|
if (contactForm.checkValidity()) { |
||||
|
// ✅ Formulář je validní |
||||
|
|
||||
|
// Přidáme třídu pro zobrazení validních polí |
||||
|
contactForm.classList.add('was-validated'); |
||||
|
|
||||
|
// Zobrazíme success zprávu |
||||
|
successAlert.style.display = 'block'; |
||||
|
|
||||
|
// Scrollujeme k success zprávě |
||||
|
successAlert.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
||||
|
|
||||
|
// BONUS: Vypíšeme data z formuláře do console |
||||
|
console.log('=== DATA Z FORMULÁŘE ==='); |
||||
|
console.log('Jméno:', document.getElementById('jmeno').value); |
||||
|
console.log('Email:', document.getElementById('email').value); |
||||
|
console.log('Telefon:', document.getElementById('telefon').value || 'nevyplněno'); |
||||
|
console.log('Předmět:', document.getElementById('predmet').value); |
||||
|
console.log('Zpráva:', document.getElementById('zprava').value); |
||||
|
console.log('Souhlas GDPR:', document.getElementById('souhlas').checked); |
||||
|
|
||||
|
// Resetujeme formulář po 4 sekundách |
||||
|
setTimeout(function() { |
||||
|
contactForm.reset(); |
||||
|
contactForm.classList.remove('was-validated'); |
||||
|
successAlert.style.display = 'none'; |
||||
|
}, 4000); |
||||
|
|
||||
|
} else { |
||||
|
// ❌ Formulář není validní |
||||
|
|
||||
|
// Přidáme třídu pro zobrazení chyb |
||||
|
contactForm.classList.add('was-validated'); |
||||
|
|
||||
|
// Skryjeme success zprávu (kdyby byla zobrazená) |
||||
|
successAlert.style.display = 'none'; |
||||
|
|
||||
|
// Najdeme první invalidní pole a scrollujeme k němu |
||||
|
const firstInvalid = contactForm.querySelector(':invalid'); |
||||
|
if (firstInvalid) { |
||||
|
firstInvalid.focus(); |
||||
|
firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// ===== BONUS: Real-time validace pro telefon ===== |
||||
|
// Zobrazíme feedback už při psaní (ne až po submitu) |
||||
|
const telefonInput = document.getElementById('telefon'); |
||||
|
|
||||
|
telefonInput.addEventListener('input', function() { |
||||
|
// Pokud je pole prázdné, je to OK (není required) |
||||
|
if (this.value === '') { |
||||
|
this.classList.remove('is-invalid'); |
||||
|
this.classList.remove('is-valid'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Zkontrolujeme pattern (9 číslic) |
||||
|
const pattern = /^[0-9]{9}$/; |
||||
|
|
||||
|
if (pattern.test(this.value)) { |
||||
|
this.classList.remove('is-invalid'); |
||||
|
this.classList.add('is-valid'); |
||||
|
} else { |
||||
|
this.classList.remove('is-valid'); |
||||
|
this.classList.add('is-invalid'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// ===== BONUS: Počítadlo znaků u zprávy ===== |
||||
|
const zpravaInput = document.getElementById('zprava'); |
||||
|
|
||||
|
// Vytvoříme element pro zobrazení počtu znaků |
||||
|
const counterDiv = document.createElement('div'); |
||||
|
counterDiv.className = 'form-text'; |
||||
|
counterDiv.id = 'zpravaCounter'; |
||||
|
zpravaInput.parentElement.appendChild(counterDiv); |
||||
|
|
||||
|
// Funkce pro update počítadla |
||||
|
function updateCounter() { |
||||
|
const length = zpravaInput.value.length; |
||||
|
const min = 10; |
||||
|
|
||||
|
if (length === 0) { |
||||
|
counterDiv.textContent = `Napište zprávu (min. ${min} znaků)`; |
||||
|
counterDiv.className = 'form-text'; |
||||
|
} else if (length < min) { |
||||
|
counterDiv.textContent = `${length}/${min} znaků - ještě ${min - length} znaků`; |
||||
|
counterDiv.className = 'form-text text-danger'; |
||||
|
} else { |
||||
|
counterDiv.textContent = `${length} znaků ✓`; |
||||
|
counterDiv.className = 'form-text text-success'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Zavoláme hned na začátku |
||||
|
updateCounter(); |
||||
|
|
||||
|
// A při každé změně |
||||
|
zpravaInput.addEventListener('input', updateCounter); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,128 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Bootstrap Formulář - Šablona</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
</head> |
||||
|
<body class="d-flex flex-column min-vh-100"> |
||||
|
<!-- Header --> |
||||
|
<div class="container"> |
||||
|
<header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom"> |
||||
|
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none fs-4"> |
||||
|
Můj Formulář |
||||
|
</a> |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"><a href="index.html" class="nav-link">Zpět na příklady</a></li> |
||||
|
</ul> |
||||
|
</header> |
||||
|
</div> |
||||
|
|
||||
|
<!-- MAIN --> |
||||
|
<main class="container"> |
||||
|
<h1 class="display-4 mb-4">🚀 Startovací šablona pro váš projekt</h1> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col-md-8"> |
||||
|
<!-- TODO: Zde vytvořte svůj formulář --> |
||||
|
<form id="myForm" class="needs-validation" novalidate> |
||||
|
|
||||
|
<!-- Příklad jednoho pole - můžete použít jako vzor --> |
||||
|
<div class="mb-3"> |
||||
|
<label for="exampleInput" class="form-label">Ukázkové pole:</label> |
||||
|
<input type="text" class="form-control" id="exampleInput" required> |
||||
|
<div class="invalid-feedback"> |
||||
|
Toto pole je povinné. |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- TODO: Přidejte další pole podle zadání --> |
||||
|
|
||||
|
|
||||
|
<button type="submit" class="btn btn-primary">Odeslat</button> |
||||
|
</form> |
||||
|
|
||||
|
<!-- Success zpráva --> |
||||
|
<div id="successAlert" class="alert alert-success mt-4" style="display: none;"> |
||||
|
<h4>✅ Formulář odeslán!</h4> |
||||
|
<p>Všechna pole byla vyplněna správně.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-4"> |
||||
|
<!-- Nápověda --> |
||||
|
<div class="card bg-light"> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title">💡 Nápověda</h5> |
||||
|
<h6>Bootstrap třídy:</h6> |
||||
|
<ul class="small"> |
||||
|
<li><code>form-control</code> - pro input, textarea</li> |
||||
|
<li><code>form-select</code> - pro select</li> |
||||
|
<li><code>form-label</code> - pro label</li> |
||||
|
<li><code>form-check-input</code> - pro checkbox/radio</li> |
||||
|
<li><code>invalid-feedback</code> - chybová zpráva</li> |
||||
|
<li><code>valid-feedback</code> - úspěšná zpráva</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h6 class="mt-3">HTML atributy:</h6> |
||||
|
<ul class="small"> |
||||
|
<li><code>required</code> - povinné pole</li> |
||||
|
<li><code>minlength="X"</code> - min počet znaků</li> |
||||
|
<li><code>maxlength="X"</code> - max počet znaků</li> |
||||
|
<li><code>pattern="..."</code> - regex vzor</li> |
||||
|
<li><code>min="X"</code> - minimální hodnota</li> |
||||
|
<li><code>max="X"</code> - maximální hodnota</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h6 class="mt-3">Užitečné vzory (pattern):</h6> |
||||
|
<ul class="small"> |
||||
|
<li>Tel.: <code>[0-9]{9}</code></li> |
||||
|
<li>PSČ: <code>[0-9]{5}</code></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
|
||||
|
<!-- Footer --> |
||||
|
<footer class="footer mt-auto py-3 bg-light"> |
||||
|
<div class="container text-center"> |
||||
|
<span class="text-muted">Vytvořil/a: [VAŠE JMÉNO] | WTL 2025</span> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
<script> |
||||
|
// TODO: Zde přidejte JavaScript pro validaci |
||||
|
|
||||
|
const form = document.getElementById('myForm'); |
||||
|
const successAlert = document.getElementById('successAlert'); |
||||
|
|
||||
|
form.addEventListener('submit', function(event) { |
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
// TODO: Přidejte vlastní validaci (např. porovnání hesel) |
||||
|
|
||||
|
if (form.checkValidity()) { |
||||
|
// Formulář je validní |
||||
|
form.classList.add('was-validated'); |
||||
|
successAlert.style.display = 'block'; |
||||
|
|
||||
|
// Resetovat formulář po 3 sekundách |
||||
|
setTimeout(function() { |
||||
|
form.reset(); |
||||
|
form.classList.remove('was-validated'); |
||||
|
successAlert.style.display = 'none'; |
||||
|
}, 3000); |
||||
|
} else { |
||||
|
// Formulář není validní |
||||
|
form.classList.add('was-validated'); |
||||
|
successAlert.style.display = 'none'; |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,208 @@ |
|||||
|
# Rychlý návod - XSS Demo (Zjednodušená verze) |
||||
|
|
||||
|
## 📁 Jednoduché soubory pro rychlou demonstraci: |
||||
|
|
||||
|
### ⚠️ `zranitelna_jednoducha.html` - NEBEZPEČNÁ |
||||
|
- Minimální kód |
||||
|
- Používá `innerHTML` - lze hacknout! |
||||
|
- Útoky připravené v pravém sloupci |
||||
|
|
||||
|
### ✅ `bezpecna_jednoducha.html` - BEZPEČNÁ |
||||
|
- Minimální kód |
||||
|
- Používá `textContent` - nelze hacknout! |
||||
|
- Zobrazí XSS útoky jako text |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎯 Jak demonstrovat (5 minut): |
||||
|
|
||||
|
### 1. Otevřete `zranitelna_jednoducha.html` |
||||
|
|
||||
|
### 2. Zkopírujte tento útok do pole "Zpráva": |
||||
|
```html |
||||
|
<img src=x onerror="alert('HACKNUTÝ!')"> |
||||
|
``` |
||||
|
**POZOR:** Nepoužívejte `<script>` - prohlížeč ho zablokuje! Používejte event handlery! |
||||
|
|
||||
|
### 3. Klikněte "Přidat záznam" |
||||
|
- **💥 Alert se zobrazí! = ÚTOK USPĚL!** |
||||
|
|
||||
|
### 4. Otevřete `bezpecna_jednoducha.html` |
||||
|
|
||||
|
### 5. Zkuste stejný útok |
||||
|
- ✅ **Zobrazí se jako text, nespustí se!** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 💡 Další fungující útoky k vyzkoušení: |
||||
|
|
||||
|
```html |
||||
|
<!-- Změna pozadí na červenou --> |
||||
|
<img src=x onerror="document.body.style.background='red'"> |
||||
|
|
||||
|
<!-- Velký červený nápis --> |
||||
|
<h1 style="color:red; font-size:50px">HACKED!</h1> |
||||
|
|
||||
|
<!-- SVG útok --> |
||||
|
<svg onload="alert('XSS')"> |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 💡 Co dělá `e.preventDefault()`? |
||||
|
|
||||
|
```javascript |
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); // ← CO TO DĚLÁ? |
||||
|
|
||||
|
// ... zbytek kódu |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### Bez `e.preventDefault()`: |
||||
|
1. Kliknete "Odeslat" |
||||
|
2. Formulář se odešle na server |
||||
|
3. Stránka se **OBNOVÍ** (reload) |
||||
|
4. Ztratíte všechna data! |
||||
|
|
||||
|
### S `e.preventDefault()`: |
||||
|
1. Kliknete "Odeslat" |
||||
|
2. **ZASTAVÍ** normální odeslání |
||||
|
3. Stránka se **NEOBNOVÍ** |
||||
|
4. Můžete zpracovat data v JavaScriptu! |
||||
|
|
||||
|
### Příklad: |
||||
|
```javascript |
||||
|
// ❌ BEZ preventDefault - stránka se obnoví |
||||
|
form.addEventListener('submit', function(e) { |
||||
|
console.log('Odesláno!'); |
||||
|
// → Stránka se obnoví a nic neuvidíte! |
||||
|
}); |
||||
|
|
||||
|
// ✅ S preventDefault - stránka zůstane |
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); // Zastaví refresh! |
||||
|
console.log('Odesláno!'); |
||||
|
// → Zpráva se zobrazí v konzoli! |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🔍 Porovnání kódu: |
||||
|
|
||||
|
### ❌ NEBEZPEČNÉ (innerHTML): |
||||
|
```javascript |
||||
|
const html = `<p><strong>${name}</strong>: ${message}</p>`; |
||||
|
entriesDiv.innerHTML += html; // SPUSTÍ JavaScript! |
||||
|
``` |
||||
|
|
||||
|
### ✅ BEZPEČNÉ (textContent): |
||||
|
```javascript |
||||
|
const div = document.createElement('div'); |
||||
|
const strong = document.createElement('strong'); |
||||
|
strong.textContent = name; // JEN TEXT, ne kód! |
||||
|
|
||||
|
const text = document.createElement('span'); |
||||
|
text.textContent = ': ' + message; // JEN TEXT! |
||||
|
|
||||
|
div.appendChild(strong); |
||||
|
div.appendChild(text); |
||||
|
entriesDiv.appendChild(div); |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎓 Pro studenty: |
||||
|
|
||||
|
### Zapamatujte si: |
||||
|
|
||||
|
1. **innerHTML = NEBEZPEČNÉ** ❌ |
||||
|
- Spustí HTML a JavaScript |
||||
|
|
||||
|
2. **textContent = BEZPEČNÉ** ✅ |
||||
|
- Zobrazí jen čistý text |
||||
|
|
||||
|
3. **createElement() = BEZPEČNÉ** ✅ |
||||
|
- Vytvoří čisté DOM elementy |
||||
|
|
||||
|
4. **Zlaté pravidlo:** |
||||
|
``` |
||||
|
🚨 DON'T TRUST THE INPUT! 🚨 |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🚀 XSS útoky k vyzkoušení: |
||||
|
|
||||
|
### ✅ FUNGUJÍCÍ útoky (použijte tyto!): |
||||
|
|
||||
|
```html |
||||
|
<!-- 1. IMG útok - FUNGUJE! --> |
||||
|
<img src=x onerror="alert('HACKNUTÝ!')"> |
||||
|
|
||||
|
<!-- 2. Změna pozadí - FUNGUJE! --> |
||||
|
<img src=x onerror="document.body.style.background='red'"> |
||||
|
|
||||
|
<!-- 3. SVG útok - FUNGUJE! --> |
||||
|
<svg onload="alert('XSS')"> |
||||
|
|
||||
|
<!-- 4. Input útok - FUNGUJE! --> |
||||
|
<input onfocus="alert('XSS')" autofocus> |
||||
|
|
||||
|
<!-- 5. Změna HTML (bez JS) - FUNGUJE! --> |
||||
|
<h1 style="color:red; font-size:50px">HACKED!</h1> |
||||
|
``` |
||||
|
|
||||
|
### ❌ NEFUNGUJÍCÍ útoky (prohlížeč blokuje): |
||||
|
|
||||
|
```html |
||||
|
<!-- Script tag v innerHTML - NEFUNGUJE! --> |
||||
|
<script>alert('XSS')</script> |
||||
|
<!-- Prohlížeč tohle automaticky zablokuje --> |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🔍 DŮLEŽITÉ: Proč `<script>` nefunguje? |
||||
|
|
||||
|
### Bezpečnostní opatření prohlížečů: |
||||
|
|
||||
|
**`<script>` tagy přidané přes `innerHTML` se NESPUSTÍ!** |
||||
|
|
||||
|
```javascript |
||||
|
// ❌ Toto NESPUSTÍ JavaScript: |
||||
|
element.innerHTML = '<script>alert(1)</script>'; |
||||
|
``` |
||||
|
|
||||
|
**Proč?** Moderní prohlížeče (Chrome, Firefox, Edge) mají bezpečnostní ochranu. |
||||
|
|
||||
|
### ALE! Event handlery FUNGUJÍ: |
||||
|
|
||||
|
```javascript |
||||
|
// ✅ Toto SPUSTÍ JavaScript: |
||||
|
element.innerHTML = '<img src=x onerror="alert(1)">'; |
||||
|
``` |
||||
|
|
||||
|
**Proto je innerHTML STÁLE nebezpečné!** |
||||
|
|
||||
|
Útočníci nepoužívají `<script>`, ale: |
||||
|
- `onerror` (img, video, audio) |
||||
|
- `onload` (svg, iframe, body) |
||||
|
- `onfocus` (input, textarea) |
||||
|
- `onmouseover` (div, span, a) |
||||
|
- atd. |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## ⚠️ DŮLEŽITÉ! |
||||
|
|
||||
|
- Toto je **jen pro vzdělávání** |
||||
|
- **NIKDY** nepoužívejte zranitelný kód v produkci |
||||
|
- Hacking bez povolení = **TRESTNÝ ČIN** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
**Hotovo! Teď máte jednoduchou demonstraci XSS útoku.** 🎯 |
||||
@ -0,0 +1,377 @@ |
|||||
|
# Lekce 18a: XSS Demo - "Don't Trust The Input" |
||||
|
|
||||
|
## 🎯 Cíl lekce |
||||
|
|
||||
|
**Naučit studenty základy bezpečnosti webových aplikací** prostřednictvím praktické demonstrace XSS (Cross-Site Scripting) útoku. Studenti pochopí: |
||||
|
- Proč je důležité ošetřovat vstup od uživatelů |
||||
|
- Rozdíl mezi `innerHTML` (nebezpečné) a `textContent` (bezpečné) |
||||
|
- Pravidlo **"DON'T TRUST THE INPUT"** |
||||
|
|
||||
|
## ⚠️ DŮLEŽITÉ UPOZORNĚNÍ |
||||
|
|
||||
|
Tato lekce obsahuje **ZÁMĚRNĚ ZRANITELNÝ KÓD** pro vzdělávací účely! |
||||
|
- ❌ **NIKDY** nepoužívejte zranitelnou verzi v produkčním prostředí |
||||
|
- ✅ Vysvětlete studentům, že jde o **demonstraci bezpečnostní chyby** |
||||
|
- ✅ Zdůrazněte, že **hacking bez povolení je TRESTNÝ ČIN** |
||||
|
|
||||
|
## 📁 Soubory v této lekci |
||||
|
|
||||
|
### 1. `index.html` - Úvodní stránka |
||||
|
- Přehled lekce |
||||
|
- Vysvětlení XSS |
||||
|
- Porovnání nebezpečného vs. bezpečného kódu |
||||
|
- Doporučený postup lekce |
||||
|
|
||||
|
### 2. `zranitelna_verze.html` - NEBEZPEČNÁ verze |
||||
|
- Návštěvní kniha s formulářem |
||||
|
- **Používá `innerHTML`** - umožňuje XSS útoky! |
||||
|
- V pravém sloupci jsou připravené XSS útoky ke zkopírování |
||||
|
- Červené varování nahoře |
||||
|
|
||||
|
### 3. `bezpecna_verze.html` - BEZPEČNÁ verze |
||||
|
- Stejná návštěvní kniha |
||||
|
- **Používá `textContent` a `createElement()`** |
||||
|
- XSS útoky zde nefungují |
||||
|
- Zelené potvrzení bezpečnosti |
||||
|
- Detailní vysvětlení bezpečného kódu |
||||
|
|
||||
|
## 🎓 Postup výuky (60 minut) |
||||
|
|
||||
|
### Fáze 1: Úvod (10 min) |
||||
|
|
||||
|
1. **Otevřete `index.html`** na projektoru |
||||
|
2. **Zeptejte se studentů:** |
||||
|
- "Myslíte si, že formuláře na webu jsou bezpečné?" |
||||
|
- "Co když útočník zadá do formuláře škodlivý kód?" |
||||
|
- "Slyšeli jste o XSS útoku?" |
||||
|
|
||||
|
3. **Vysvětlete XSS:** |
||||
|
- Cross-Site Scripting |
||||
|
- Útočník vkládá škodlivý kód do webové stránky |
||||
|
- Kód se spustí v prohlížeči jiného uživatele |
||||
|
- Může ukrást hesla, cookies, osobní data |
||||
|
|
||||
|
4. **Ukažte zlaté pravidlo:** |
||||
|
``` |
||||
|
🚨 "DON'T TRUST THE INPUT" 🚨 |
||||
|
Nikdy nedůvěřujte tomu, co uživatel zadá! |
||||
|
``` |
||||
|
|
||||
|
### Fáze 2: Demonstrace útoku (20 min) |
||||
|
|
||||
|
1. **Otevřete `zranitelna_verze.html`** |
||||
|
|
||||
|
2. **Základní funkce (2 min):** |
||||
|
- Ukažte normální použití formuláře |
||||
|
- Zadejte běžné jméno a zprávu |
||||
|
- Uveďte: "Takto to vypadá normálně" |
||||
|
|
||||
|
3. **ÚTOK #1 - Alert (3 min):** |
||||
|
```html |
||||
|
<script>alert('Byl jsi hacknutý!')</script> |
||||
|
``` |
||||
|
- Zkopírujte do pole "Zpráva" |
||||
|
- Odešlete formulář |
||||
|
- **BOOM! Alert se zobrazí!** 💥 |
||||
|
- Vysvětlete: "To je XSS útok! JavaScript se spustil!" |
||||
|
|
||||
|
4. **ÚTOK #2 - Změna stránky (3 min):** |
||||
|
```html |
||||
|
<h1 style="color:red; font-size:60px;">HACKED!</h1> |
||||
|
``` |
||||
|
- Vložte do formuláře |
||||
|
- Odešlete |
||||
|
- Stránka se vizuálně změní |
||||
|
- Vysvětlete: "Útočník změnil HTML strukturu!" |
||||
|
|
||||
|
5. **ÚTOK #3 - Krádež cookies (5 min):** |
||||
|
```html |
||||
|
<script>alert('Tvoje cookies: ' + document.cookie)</script> |
||||
|
``` |
||||
|
- Vložte do formuláře |
||||
|
- Alert zobrazí cookies |
||||
|
- **KRITICKY DŮLEŽITÉ:** Vysvětlete, že v cookies mohou být: |
||||
|
- Session ID (přihlášení) |
||||
|
- Tokeny |
||||
|
- Osobní data |
||||
|
- Útočník může cookies odeslat na svůj server! |
||||
|
|
||||
|
6. **ÚTOK #4 - Obrázek s onerror (3 min):** |
||||
|
```html |
||||
|
<img src=x onerror="alert('XSS útok přes obrázek!')"> |
||||
|
``` |
||||
|
- Tento útok funguje i když admin zakáže `<script>` |
||||
|
- Ukažte, že útočníci jsou kreativní |
||||
|
|
||||
|
7. **Diskuze (4 min):** |
||||
|
- "Co si myslíte, co by se stalo na skutečném webu?" |
||||
|
- "Co by mohl útočník udělat s vašimi přihlašovacími údaji?" |
||||
|
- "Je to nebezpečné?" |
||||
|
|
||||
|
### Fáze 3: Bezpečné řešení (15 min) |
||||
|
|
||||
|
1. **Otevřete `bezpecna_verze.html`** |
||||
|
|
||||
|
2. **Zkuste stejné útoky (5 min):** |
||||
|
- Vložte `<script>alert('XSS')</script>` |
||||
|
- Nefunguje! Zobrazí se jako text! ✅ |
||||
|
- Zkuste další útoky - žádný nefunguje |
||||
|
|
||||
|
3. **Vysvětlete rozdíl (5 min):** |
||||
|
- Scrollujte dolů k sekci "Jak to funguje?" |
||||
|
- Ukažte rozdíl v kódu: |
||||
|
|
||||
|
**NEBEZPEČNÉ:** |
||||
|
```javascript |
||||
|
element.innerHTML = `<p>${message}</p>`; |
||||
|
// innerHTML SPUSTÍ JavaScript! |
||||
|
``` |
||||
|
|
||||
|
**BEZPEČNÉ:** |
||||
|
```javascript |
||||
|
const p = document.createElement('p'); |
||||
|
p.textContent = message; |
||||
|
element.appendChild(p); |
||||
|
// textContent NESPUSTÍ JavaScript! |
||||
|
``` |
||||
|
|
||||
|
4. **Projděte bezpečný kód (5 min):** |
||||
|
- Ukažte použití `createElement()` |
||||
|
- Ukažte použití `textContent` |
||||
|
- Vysvětlete: "HTML se zobrazí jako TEXT, ne jako KÓD" |
||||
|
|
||||
|
### Fáze 4: Praktické cvičení (10 min) |
||||
|
|
||||
|
**Zadání pro studenty:** |
||||
|
1. Otevřete oba soubory vedle sebe |
||||
|
2. Porovnejte JavaScript kód |
||||
|
3. Najděte všechny rozdíly |
||||
|
4. Napište do poznámek: |
||||
|
- Co je nebezpečné? |
||||
|
- Co je bezpečné? |
||||
|
- Proč? |
||||
|
|
||||
|
### Fáze 5: Shrnutí a test (5 min) |
||||
|
|
||||
|
**Otázky pro studenty:** |
||||
|
1. ❓ "Co znamená XSS?" |
||||
|
- ✅ Cross-Site Scripting |
||||
|
|
||||
|
2. ❓ "Proč je `innerHTML` nebezpečné?" |
||||
|
- ✅ Spouští HTML a JavaScript kód |
||||
|
|
||||
|
3. ❓ "Co je bezpečnější: `innerHTML` nebo `textContent`?" |
||||
|
- ✅ `textContent` |
||||
|
|
||||
|
4. ❓ "Jaké je zlaté pravidlo bezpečnosti?" |
||||
|
- ✅ "DON'T TRUST THE INPUT" |
||||
|
|
||||
|
5. ❓ "Můžu důvěřovat tomu, co uživatel zadá do formuláře?" |
||||
|
- ✅ NE! NIKDY! |
||||
|
|
||||
|
## 🎯 XSS útoky k vyzkoušení |
||||
|
|
||||
|
### Základní útoky (pro všechny studenty): |
||||
|
|
||||
|
```html |
||||
|
<!-- 1. Jednoduchý alert --> |
||||
|
<script>alert('XSS útok!')</script> |
||||
|
|
||||
|
<!-- 2. Změna textu --> |
||||
|
<h1 style="color:red;">HACKED!</h1> |
||||
|
|
||||
|
<!-- 3. Změna pozadí --> |
||||
|
<script>document.body.style.background = 'red'</script> |
||||
|
|
||||
|
<!-- 4. Obrázek s chybou --> |
||||
|
<img src=x onerror="alert('XSS')"> |
||||
|
|
||||
|
<!-- 5. Zobrazení cookies --> |
||||
|
<script>alert(document.cookie)</script> |
||||
|
``` |
||||
|
|
||||
|
### Pokročilé útoky (pro šikovnější studenty): |
||||
|
|
||||
|
```html |
||||
|
<!-- 6. Přesměrování --> |
||||
|
<script>window.location = 'https://google.com'</script> |
||||
|
|
||||
|
<!-- 7. Změna HTML --> |
||||
|
<script>document.body.innerHTML = '<h1>Byl jsi hacknutý!</h1>'</script> |
||||
|
|
||||
|
<!-- 8. Infinite loop (pozor, může zhavarovat!) --> |
||||
|
<script>while(true){alert('SPAM')}</script> |
||||
|
|
||||
|
<!-- 9. Console log spam --> |
||||
|
<script>setInterval(()=>console.log('HACKED'), 100)</script> |
||||
|
|
||||
|
<!-- 10. Krádež formulářových dat --> |
||||
|
<script> |
||||
|
const data = document.getElementById('name').value; |
||||
|
alert('Ukradl jsem: ' + data); |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### Kreativní útoky (bonus): |
||||
|
|
||||
|
```html |
||||
|
<!-- 11. Falešný login formulář --> |
||||
|
<div style="position:fixed; top:0; left:0; width:100%; height:100%; background:white; z-index:9999;"> |
||||
|
<h1>Přihlášení vypršelo</h1> |
||||
|
<input type="text" placeholder="Uživatel"> |
||||
|
<input type="password" placeholder="Heslo"> |
||||
|
<button>Přihlásit</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 12. Vibrace (na mobilu) --> |
||||
|
<script>navigator.vibrate([200, 100, 200])</script> |
||||
|
|
||||
|
<!-- 13. Text-to-speech (pokud podporováno) --> |
||||
|
<script> |
||||
|
const utterance = new SpeechSynthesisUtterance('Byl jsi hacknutý!'); |
||||
|
speechSynthesis.speak(utterance); |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
## 📊 Hodnocení (doporučené) |
||||
|
|
||||
|
Pokud chcete lekci ohodnotit, můžete použít tento systém: |
||||
|
|
||||
|
### Praktický test (10 bodů): |
||||
|
|
||||
|
1. **Identifikace problému (3b)** |
||||
|
- Student najde `innerHTML` v nebezpečném kódu |
||||
|
- Vysvětlí proč je to problém |
||||
|
|
||||
|
2. **Provedení útoku (2b)** |
||||
|
- Student úspěšně provede XSS útok na zranitelné verzi |
||||
|
|
||||
|
3. **Obrana (3b)** |
||||
|
- Student vysvětlí jak se bránit |
||||
|
- Zmíní `textContent` nebo `createElement()` |
||||
|
|
||||
|
4. **Pravidlo (2b)** |
||||
|
- Student zná a umí vysvětlit "Don't Trust The Input" |
||||
|
|
||||
|
## 💡 Tipy pro učitele |
||||
|
|
||||
|
### Při výuce: |
||||
|
|
||||
|
1. **Dramatizujte:** |
||||
|
- Když se spustí XSS útok, reagujte: "Oh ne! Stránka je kompromitovaná!" |
||||
|
- Studenti si to lépe zapamatují |
||||
|
|
||||
|
2. **Real-world příklady:** |
||||
|
- Facebook měl XSS zranitelnost v 2011 |
||||
|
- Twitter XSS worm v 2010 |
||||
|
- eBay XSS v 2014 |
||||
|
|
||||
|
3. **Etika:** |
||||
|
- **DŮLEŽITÉ:** Zdůrazněte, že hacking bez povolení je TRESTNÝ ČIN |
||||
|
- Vysvětlete rozdíl mezi "ethical hacking" a kyberzločinem |
||||
|
- Toto je edukační prostředí |
||||
|
|
||||
|
4. **Bezpečnostní myšlení:** |
||||
|
- Motivujte studenty myslet jako útočníci |
||||
|
- "Jak bych tohle mohl zneužít?" |
||||
|
- Pak myslet jako obránci: "Jak tomu zabráním?" |
||||
|
|
||||
|
### Časté dotazy studentů: |
||||
|
|
||||
|
**Q: "Kde se s XSS můžu setkat?"** |
||||
|
A: Všude kde je formulář: komentáře, profily, vyhledávání, chat, recenze... |
||||
|
|
||||
|
**Q: "Proč vývojáři dělají takové chyby?"** |
||||
|
A: Někdy neznají rizika, někdy spěchají, někdy zapomenou ošetřit vstup. |
||||
|
|
||||
|
**Q: "Je to jediná bezpečnostní hrozba?"** |
||||
|
A: Ne! Existuje SQL injection, CSRF, clickjacking, a mnoho dalších. Bezpečnost je obrovské téma. |
||||
|
|
||||
|
**Q: "Stačí použít `textContent` a jsem v bezpečí?"** |
||||
|
A: Je to dobrý start, ale bezpečnost má mnoho vrstev. Na serveru musíte data také validovat! |
||||
|
|
||||
|
**Q: "Můžu takhle hacknout Facebook?"** |
||||
|
A: Ne! Velké firmy mají security týmy. A bylo by to TRESTNÉ! Nikdy to nezkoušejte bez povolení. |
||||
|
|
||||
|
## 🔗 Další studium |
||||
|
|
||||
|
### Pro zvídavé studenty doporučte: |
||||
|
|
||||
|
1. **OWASP Top 10** - seznam nejčastějších bezpečnostních hrozeb |
||||
|
2. **PortSwigger Web Security Academy** - zdarma kurzy o web security |
||||
|
3. **HackTheBox** - legální hackování (s povolením) |
||||
|
4. **Bug Bounty programy** - etické hackování za peníze |
||||
|
|
||||
|
### Užitečné nástroje: |
||||
|
|
||||
|
- **Browser DevTools (F12)** - konzole, network, elements |
||||
|
- **Burp Suite** - testování web aplikací |
||||
|
- **ZAP (Zed Attack Proxy)** - open-source security scanner |
||||
|
|
||||
|
## 📝 Domácí úkol (nepovinné) |
||||
|
|
||||
|
**Zadání:** |
||||
|
Vytvořte vlastní mini webovou aplikaci (např. TODO list nebo chat) s těmito požadavky: |
||||
|
|
||||
|
1. Formulář pro přidání položky |
||||
|
2. Zobrazení položek na stránce |
||||
|
3. **Implementujte to BEZPEČNĚ** (použijte `textContent`) |
||||
|
4. V komentářích vysvětlete, proč je to bezpečné |
||||
|
5. Zkuste to "hacknout" - mělo by to selhat! |
||||
|
|
||||
|
**Bonus:** |
||||
|
Vytvořte také zranitelnou verzi a ukažte rozdíl. |
||||
|
|
||||
|
## ✅ Co by studenti měli umět po lekci |
||||
|
|
||||
|
Po této lekci by studenti měli: |
||||
|
|
||||
|
✅ Vědět co je XSS (Cross-Site Scripting) |
||||
|
✅ Umět vysvětlit proč je `innerHTML` nebezpečné |
||||
|
✅ Znát rozdíl mezi `innerHTML` a `textContent` |
||||
|
✅ Umět použít `createElement()` pro tvorbu DOM elementů |
||||
|
✅ Znát pravidlo "DON'T TRUST THE INPUT" |
||||
|
✅ Chápat proč je bezpečnost webů důležitá |
||||
|
✅ Vědět, že hacking bez povolení je trestný čin |
||||
|
✅ Mít základní bezpečnostní mindset při vývoji webů |
||||
|
|
||||
|
## 🚨 Důležité poznámky |
||||
|
|
||||
|
### Pro učitele: |
||||
|
|
||||
|
1. **Tato lekce obsahuje funkční XSS exploity** |
||||
|
- Soubory jsou jen pro vzdělávací účely |
||||
|
- Nikdy je nenahrajte na veřejný server |
||||
|
- Nesdílejte je mimo bezpečné prostředí |
||||
|
|
||||
|
2. **Etika a zákon:** |
||||
|
- Vysvětlete studentům, že: |
||||
|
- Hacking bez povolení = trestný čin |
||||
|
- V ČR: Zákon č. 40/2009 Sb. trestní zákoník, § 230 |
||||
|
- Hrozí až 3 roky vězení |
||||
|
- Ethical hacking se dělá POUZE s písemným povolením |
||||
|
|
||||
|
3. **Zodpovědnost:** |
||||
|
- Zdůrazněte odpovědnost vývojářů |
||||
|
- "Se schopností přichází odpovědnost" |
||||
|
- Vývojáři chrání data a soukromí uživatelů |
||||
|
|
||||
|
## 🎉 Závěr |
||||
|
|
||||
|
Tato lekce poskytuje studentům **praktickou zkušenost s bezpečnostní zranitelností** v kontrolovaném prostředí. Je to jeden z nejlepších způsobů, jak naučit důležitost bezpečného programování. |
||||
|
|
||||
|
**Klíčové sdělení:** |
||||
|
``` |
||||
|
🔐 BEZPEČNOST NENÍ VOLITELNÁ! |
||||
|
🔐 VŽDY OŠETŘUJTE VSTUP! |
||||
|
🔐 DON'T TRUST THE INPUT! |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
Vytvořeno: 2. prosince 2025 |
||||
|
Předmět: Webové Technologie (WTL) |
||||
|
Cílová skupina: 3. ročník IT |
||||
|
Téma: Bezpečnost webových aplikací - XSS |
||||
|
|
||||
|
**Hodně úspěchů při výuce! 🛡️** |
||||
@ -0,0 +1,157 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Návštěvní kniha - BEZPEČNÁ ✅</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
</head> |
||||
|
<body class="bg-light p-4"> |
||||
|
<div class="container"> |
||||
|
<!-- BEZPEČNOST --> |
||||
|
<div class="alert alert-success"> |
||||
|
<h3>✅ BEZPEČNÁ VERZE - nelze hacknout!</h3> |
||||
|
<p>Používá <code>textContent</code> - SPRÁVNĚ!</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<!-- FORMULÁŘ --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card"> |
||||
|
<div class="card-header bg-success text-white"> |
||||
|
<h3>📖 Návštěvní kniha</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<form id="myForm"> |
||||
|
<div class="mb-3"> |
||||
|
<label class="form-label">Jméno:</label> |
||||
|
<input type="text" class="form-control" id="name"> |
||||
|
</div> |
||||
|
<div class="mb-3"> |
||||
|
<label class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="message" rows="3"></textarea> |
||||
|
</div> |
||||
|
<button type="submit" class="btn btn-success">Přidat záznam</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ZKUSTE HACKNOUT --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card border-success"> |
||||
|
<div class="card-header bg-dark text-white"> |
||||
|
<h4>🛡️ Zkuste to hacknout!</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Zkuste stejné "útoky":</h5> |
||||
|
|
||||
|
<div class="alert alert-secondary"> |
||||
|
<strong>1. Alert:</strong> |
||||
|
<pre><code><script>alert('HACKNUTÝ!')</script></code></pre> |
||||
|
<small class="text-success">✅ Nefunguje!</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-secondary"> |
||||
|
<strong>2. HTML:</strong> |
||||
|
<pre><code><h1>HACKED!</h1></code></pre> |
||||
|
<small class="text-success">✅ Zobrazí se jako text!</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-info"> |
||||
|
<strong>💡 Výsledek:</strong><br> |
||||
|
Vše se zobrazí jako TEXT, ne jako KÓD! |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ZÁZNAMY --> |
||||
|
<div class="card mt-4"> |
||||
|
<div class="card-header bg-success text-white"> |
||||
|
<h4>📝 Záznamy</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div id="entries"> |
||||
|
<p class="text-muted">Zatím žádné záznamy...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- VYSVĚTLENÍ --> |
||||
|
<div class="card mt-4 border-success"> |
||||
|
<div class="card-header bg-success text-white"> |
||||
|
<h4>🔍 Bezpečný kód:</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<pre class="bg-light p-3"><code>// ✅ BEZPEČNÉ! |
||||
|
const div = document.createElement('div'); |
||||
|
const strong = document.createElement('strong'); |
||||
|
const text = document.createElement('span'); |
||||
|
|
||||
|
strong.textContent = name; // ✅ textContent = BEZPEČNÉ |
||||
|
text.textContent = ': ' + message; // ✅ textContent = BEZPEČNÉ |
||||
|
|
||||
|
div.appendChild(strong); |
||||
|
div.appendChild(text); |
||||
|
entriesDiv.appendChild(div);</code></pre> |
||||
|
<div class="alert alert-success mt-3"> |
||||
|
<strong>Proč je to bezpečné?</strong><br> |
||||
|
<code>textContent</code> zobrazí vše jako ČISTÝ TEXT.<br> |
||||
|
HTML a JavaScript se NIKDY nespustí! |
||||
|
</div> |
||||
|
|
||||
|
<h5 class="mt-4">📊 Porovnání:</h5> |
||||
|
<table class="table table-bordered"> |
||||
|
<tr class="table-danger"> |
||||
|
<td><code>innerHTML</code></td> |
||||
|
<td>❌ NEBEZPEČNÉ</td> |
||||
|
<td>Spustí kód</td> |
||||
|
</tr> |
||||
|
<tr class="table-success"> |
||||
|
<td><code>textContent</code></td> |
||||
|
<td>✅ BEZPEČNÉ</td> |
||||
|
<td>Jen text</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
// ===== BEZPEČNÝ KÓD ===== |
||||
|
|
||||
|
const form = document.getElementById('myForm'); |
||||
|
const entriesDiv = document.getElementById('entries'); |
||||
|
|
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); // Zastaví odeslání formuláře |
||||
|
|
||||
|
// Získáme data |
||||
|
const name = document.getElementById('name').value; |
||||
|
const message = document.getElementById('message').value; |
||||
|
|
||||
|
// ✅ BEZPEČNÉ: Vytvoříme elementy |
||||
|
const div = document.createElement('div'); |
||||
|
div.className = 'alert alert-info'; |
||||
|
|
||||
|
const strong = document.createElement('strong'); |
||||
|
strong.textContent = name; // ✅ textContent je BEZPEČNÉ! |
||||
|
|
||||
|
const text = document.createElement('span'); |
||||
|
text.textContent = ': ' + message; // ✅ textContent je BEZPEČNÉ! |
||||
|
|
||||
|
// Složíme dohromady |
||||
|
div.appendChild(strong); |
||||
|
div.appendChild(text); |
||||
|
|
||||
|
// Přidáme na stránku |
||||
|
entriesDiv.appendChild(div); |
||||
|
|
||||
|
// Resetujeme formulář |
||||
|
form.reset(); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,335 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Návštěvní kniha - BEZPEČNÁ VERZE ✅</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
<style> |
||||
|
.entry { |
||||
|
border-left: 4px solid #198754; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
.entry:hover { |
||||
|
background-color: #f8f9fa; |
||||
|
transform: translateX(5px); |
||||
|
} |
||||
|
.safe-banner { |
||||
|
background: linear-gradient(135deg, #198754 0%, #146c43 100%); |
||||
|
color: white; |
||||
|
padding: 20px; |
||||
|
margin-bottom: 30px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 4px 6px rgba(25, 135, 84, 0.3); |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body class="bg-light"> |
||||
|
<!-- BEZPEČNOST BANNER --> |
||||
|
<div class="container mt-4"> |
||||
|
<div class="safe-banner"> |
||||
|
<h2>✅ BEZPEČNÁ VERZE ✅</h2> |
||||
|
<p class="mb-0"> |
||||
|
<strong>Tato verze je BEZPEČNÁ!</strong> Používá <code>textContent</code> a správně ošetřuje vstup. |
||||
|
XSS útoky zde NEFUNGUJÍ. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<!-- LEVÝ SLOUPEC - Formulář --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card shadow-sm"> |
||||
|
<div class="card-header bg-success text-white"> |
||||
|
<h3 class="mb-0">📖 Návštěvní kniha</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<form id="guestbookForm"> |
||||
|
<div class="mb-3"> |
||||
|
<label for="name" class="form-label">Vaše jméno:</label> |
||||
|
<input type="text" class="form-control" id="name" required> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="message" class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="message" rows="4" required></textarea> |
||||
|
<div class="form-text">Napište nám, co si myslíte...</div> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-success w-100"> |
||||
|
💾 Přidat záznam |
||||
|
</button> |
||||
|
</form> |
||||
|
|
||||
|
<div class="alert alert-success mt-3"> |
||||
|
<small> |
||||
|
<strong>🔒 Tento formulář je BEZPEČNÝ!</strong><br> |
||||
|
Zkuste zadat HTML nebo JavaScript - nezpůsobí to nic nebezpečného. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- PRAVÝ SLOUPEC - Zkuste to hacknout (nebude fungovat) --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card shadow-sm border-success"> |
||||
|
<div class="card-header bg-dark text-white"> |
||||
|
<h4 class="mb-0">🛡️ Zkuste to hacknout!</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Zkuste tyto "útoky" (nebudou fungovat):</h5> |
||||
|
|
||||
|
<div class="alert alert-secondary"> |
||||
|
<strong>1. Alert:</strong> |
||||
|
<pre class="mb-0"><code><script>alert('Pokus o útok')</script></code></pre> |
||||
|
<small class="text-success">✅ Zobrazí se jako text, nespustí se!</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-secondary"> |
||||
|
<strong>2. HTML:</strong> |
||||
|
<pre class="mb-0"><code><h1 style="color:red">HACKED!</h1></code></pre> |
||||
|
<small class="text-success">✅ Zobrazí se jako text!</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-secondary"> |
||||
|
<strong>3. Obrázek:</strong> |
||||
|
<pre class="mb-0"><code><img src=x onerror="alert('XSS')"></code></pre> |
||||
|
<small class="text-success">✅ Nespustí se JavaScript!</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-info mt-3"> |
||||
|
<strong>💡 Výsledek:</strong><br> |
||||
|
Veškerý HTML kód se zobrazí jako obyčejný text, nespustí se! |
||||
|
Stránka je v bezpečí. 🛡️ |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ZÁZNAMY --> |
||||
|
<div class="row mt-4"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow-sm"> |
||||
|
<div class="card-header bg-success text-white d-flex justify-content-between align-items-center"> |
||||
|
<h4 class="mb-0">📝 Záznamy návštěvníků</h4> |
||||
|
<button class="btn btn-sm btn-light" onclick="clearEntries()">🗑️ Smazat vše</button> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div id="entries"> |
||||
|
<div class="alert alert-info"> |
||||
|
<em>Zatím žádné záznamy. Buďte první!</em> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- VYSVĚTLENÍ --> |
||||
|
<div class="row mt-4 mb-4"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card border-success"> |
||||
|
<div class="card-header bg-success text-white"> |
||||
|
<h4 class="mb-0">🔍 Jak to funguje? (BEZPEČNÝ KÓD)</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Bezpečný kód v JavaScriptu:</h5> |
||||
|
<pre class="bg-light p-3 rounded"><code>// ✅ BEZPEČNÉ - používá createElement a textContent! |
||||
|
|
||||
|
// 1. Vytvoříme elementy pomocí createElement (ne innerHTML!) |
||||
|
const entryDiv = document.createElement('div'); |
||||
|
entryDiv.className = 'entry mb-3 p-3 bg-white rounded shadow-sm'; |
||||
|
|
||||
|
const nameStrong = document.createElement('strong'); |
||||
|
nameStrong.style.color = '#198754'; |
||||
|
nameStrong.style.fontSize = '1.1em'; |
||||
|
|
||||
|
// 2. Nastavíme text pomocí textContent (ne innerHTML!) |
||||
|
nameStrong.textContent = '👤 ' + name; // ✅ BEZPEČNÉ |
||||
|
|
||||
|
const messagePara = document.createElement('p'); |
||||
|
messagePara.textContent = message; // ✅ BEZPEČNÉ |
||||
|
|
||||
|
// 3. Přidáme do stránky |
||||
|
entryDiv.appendChild(nameStrong); |
||||
|
entryDiv.appendChild(messagePara); |
||||
|
entriesDiv.insertBefore(entryDiv, entriesDiv.firstChild);</code></pre> |
||||
|
|
||||
|
<div class="alert alert-success mt-3"> |
||||
|
<strong>✅ Proč je to bezpečné?</strong> |
||||
|
<ul class="mb-0"> |
||||
|
<li><code>textContent</code> vždy vkládá čistý TEXT, ne HTML</li> |
||||
|
<li><code>createElement()</code> vytváří čisté DOM elementy</li> |
||||
|
<li>Jakýkoliv <code><script></code> nebo <code><img></code> tag se zobrazí jako text</li> |
||||
|
<li>JavaScript kód se NIKDY nespustí</li> |
||||
|
<li>Stránka je chráněná před XSS útoky</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<h5 class="mt-4">📚 Pravidlo #1 bezpečnosti:</h5> |
||||
|
<div class="alert alert-warning"> |
||||
|
<h4 class="alert-heading">🚨 "DON'T TRUST THE INPUT"</h4> |
||||
|
<p><strong>NIKDY nedůvěřujte vstupu od uživatele!</strong></p> |
||||
|
<ul class="mb-0"> |
||||
|
<li>Vždy ošetřujte vstup</li> |
||||
|
<li>Používejte <code>textContent</code> místo <code>innerHTML</code></li> |
||||
|
<li>Validujte data na serveru i klientu</li> |
||||
|
<li>Escapujte speciální znaky</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<h5 class="mt-4">Porovnání:</h5> |
||||
|
<table class="table table-bordered"> |
||||
|
<thead class="table-dark"> |
||||
|
<tr> |
||||
|
<th>Metoda</th> |
||||
|
<th>Bezpečnost</th> |
||||
|
<th>Použití</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr class="table-danger"> |
||||
|
<td><code>innerHTML</code></td> |
||||
|
<td>❌ NEBEZPEČNÉ</td> |
||||
|
<td>Spustí HTML a JavaScript</td> |
||||
|
</tr> |
||||
|
<tr class="table-success"> |
||||
|
<td><code>textContent</code></td> |
||||
|
<td>✅ BEZPEČNÉ</td> |
||||
|
<td>Vloží jen čistý text</td> |
||||
|
</tr> |
||||
|
<tr class="table-success"> |
||||
|
<td><code>createElement()</code></td> |
||||
|
<td>✅ BEZPEČNÉ</td> |
||||
|
<td>Vytvoří čistý DOM element</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
<script> |
||||
|
// ===== BEZPEČNÝ KÓD - POUŽÍVEJTE TOTO! ===== |
||||
|
|
||||
|
const form = document.getElementById('guestbookForm'); |
||||
|
const entriesDiv = document.getElementById('entries'); |
||||
|
|
||||
|
// Načteme záznamy z localStorage při načtení stránky |
||||
|
loadEntries(); |
||||
|
|
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// Získáme data z formuláře |
||||
|
const name = document.getElementById('name').value; |
||||
|
const message = document.getElementById('message').value; |
||||
|
|
||||
|
// ✅ BEZPEČNÉ: Vytvoříme elementy pomocí DOM API |
||||
|
createEntry(name, message); |
||||
|
|
||||
|
// Uložíme do localStorage |
||||
|
saveEntry(name, message); |
||||
|
|
||||
|
// Resetujeme formulář |
||||
|
form.reset(); |
||||
|
}); |
||||
|
|
||||
|
function createEntry(name, message) { |
||||
|
// Smažeme "žádné záznamy" zprávu pokud existuje |
||||
|
const emptyAlert = entriesDiv.querySelector('.alert-info'); |
||||
|
if (emptyAlert) { |
||||
|
emptyAlert.remove(); |
||||
|
} |
||||
|
|
||||
|
// ✅ KROK 1: Vytvoříme hlavní kontejner |
||||
|
const entryDiv = document.createElement('div'); |
||||
|
entryDiv.className = 'entry mb-3 p-3 bg-white rounded shadow-sm'; |
||||
|
|
||||
|
// ✅ KROK 2: Vytvoříme header s jménem a časem |
||||
|
const headerDiv = document.createElement('div'); |
||||
|
headerDiv.className = 'd-flex justify-content-between align-items-start'; |
||||
|
|
||||
|
const nameDiv = document.createElement('div'); |
||||
|
|
||||
|
const nameStrong = document.createElement('strong'); |
||||
|
nameStrong.style.color = '#198754'; |
||||
|
nameStrong.style.fontSize = '1.1em'; |
||||
|
nameStrong.textContent = '👤 ' + name; // ✅ textContent je BEZPEČNÉ! |
||||
|
|
||||
|
const timeSmall = document.createElement('small'); |
||||
|
timeSmall.className = 'text-muted ms-2'; |
||||
|
timeSmall.textContent = new Date().toLocaleString('cs-CZ'); |
||||
|
|
||||
|
nameDiv.appendChild(nameStrong); |
||||
|
nameDiv.appendChild(timeSmall); |
||||
|
headerDiv.appendChild(nameDiv); |
||||
|
|
||||
|
// ✅ KROK 3: Přidáme oddělovač |
||||
|
const hr = document.createElement('hr'); |
||||
|
|
||||
|
// ✅ KROK 4: Vytvoříme zprávu |
||||
|
const messagePara = document.createElement('p'); |
||||
|
messagePara.className = 'mb-0'; |
||||
|
messagePara.textContent = message; // ✅ textContent je BEZPEČNÉ! |
||||
|
|
||||
|
// ✅ KROK 5: Složíme vše dohromady |
||||
|
entryDiv.appendChild(headerDiv); |
||||
|
entryDiv.appendChild(hr); |
||||
|
entryDiv.appendChild(messagePara); |
||||
|
|
||||
|
// ✅ KROK 6: Přidáme na začátek seznamu |
||||
|
entriesDiv.insertBefore(entryDiv, entriesDiv.firstChild); |
||||
|
} |
||||
|
|
||||
|
function saveEntry(name, message) { |
||||
|
// Získáme existující záznamy |
||||
|
let entries = JSON.parse(localStorage.getItem('guestbook_safe') || '[]'); |
||||
|
|
||||
|
// Přidáme nový záznam |
||||
|
entries.unshift({ |
||||
|
name: name, |
||||
|
message: message, |
||||
|
timestamp: new Date().toISOString() |
||||
|
}); |
||||
|
|
||||
|
// Uložíme zpět |
||||
|
localStorage.setItem('guestbook_safe', JSON.stringify(entries)); |
||||
|
} |
||||
|
|
||||
|
function loadEntries() { |
||||
|
const entries = JSON.parse(localStorage.getItem('guestbook_safe') || '[]'); |
||||
|
|
||||
|
if (entries.length === 0) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Smažeme prázdnou zprávu |
||||
|
entriesDiv.innerHTML = ''; |
||||
|
|
||||
|
// ✅ Vytvoříme každý záznam BEZPEČNĚ |
||||
|
entries.forEach(entry => { |
||||
|
createEntry(entry.name, entry.message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function clearEntries() { |
||||
|
if (confirm('Opravdu chcete smazat všechny záznamy?')) { |
||||
|
localStorage.removeItem('guestbook_safe'); |
||||
|
entriesDiv.innerHTML = '<div class="alert alert-info"><em>Zatím žádné záznamy. Buďte první!</em></div>'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Info pro console |
||||
|
console.log('%c✅ BEZPEČNÁ VERZE ✅', 'color: green; font-size: 20px; font-weight: bold;'); |
||||
|
console.log('Tato stránka je CHRÁNĚNÁ před XSS útoky!'); |
||||
|
console.log('Používá textContent a createElement() místo innerHTML.'); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,313 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>XSS Demo - Don't Trust The Input</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
<style> |
||||
|
.hero { |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
color: white; |
||||
|
padding: 60px 0; |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
.version-card { |
||||
|
transition: transform 0.3s, box-shadow 0.3s; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.version-card:hover { |
||||
|
transform: translateY(-5px); |
||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- HERO SEKCE --> |
||||
|
<div class="hero"> |
||||
|
<div class="container text-center"> |
||||
|
<h1 class="display-3 mb-3">🛡️ XSS Security Demo</h1> |
||||
|
<p class="lead">Lekce bezpečnosti: "Don't Trust The Input"</p> |
||||
|
<p class="fs-5">Porovnání zranitelné vs. bezpečné implementace formuláře</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="container mb-5"> |
||||
|
<!-- CO SE NAUČÍTE --> |
||||
|
<div class="row mb-5"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow"> |
||||
|
<div class="card-body"> |
||||
|
<h2 class="card-title">🎯 Co se v této lekci naučíte:</h2> |
||||
|
<div class="row mt-4"> |
||||
|
<div class="col-md-6"> |
||||
|
<ul class="list-unstyled"> |
||||
|
<li class="mb-2">✅ Co je XSS (Cross-Site Scripting) útok</li> |
||||
|
<li class="mb-2">✅ Jak funguje nebezpečný kód s <code>innerHTML</code></li> |
||||
|
<li class="mb-2">✅ Jak útočníci zneužívají formuláře</li> |
||||
|
<li class="mb-2">✅ Reálné příklady XSS útoků</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<ul class="list-unstyled"> |
||||
|
<li class="mb-2">✅ Jak správně ošetřit vstup od uživatele</li> |
||||
|
<li class="mb-2">✅ Použití <code>textContent</code> místo <code>innerHTML</code></li> |
||||
|
<li class="mb-2">✅ Bezpečné vytváření DOM elementů</li> |
||||
|
<li class="mb-2">✅ Pravidlo "Don't Trust The Input"</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- POROVNÁNÍ VERZÍ --> |
||||
|
<h2 class="text-center mb-4">🔍 Vyberte verzi k testování:</h2> |
||||
|
|
||||
|
<div class="row g-4"> |
||||
|
<!-- ZRANITELNÁ VERZE --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card version-card border-danger border-3"> |
||||
|
<div class="card-header bg-danger text-white text-center"> |
||||
|
<h3 class="mb-0">⚠️ ZRANITELNÁ VERZE</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="text-center mb-3"> |
||||
|
<span class="badge bg-danger fs-5">NEBEZPEČNÁ</span> |
||||
|
</div> |
||||
|
|
||||
|
<h5>Co tato verze dělá ŠPATNĚ:</h5> |
||||
|
<ul> |
||||
|
<li>Používá <code>innerHTML</code></li> |
||||
|
<li>Neošetřuje vstup od uživatele</li> |
||||
|
<li>Spouští HTML a JavaScript kód</li> |
||||
|
<li>Je zranitelná vůči XSS útokům</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>⚠️ Varování:</strong> Toto je ukázka jak <strong>NEDĚLAT</strong> webové aplikace! |
||||
|
</div> |
||||
|
|
||||
|
<h5 class="mt-3">Zkuste tyto útoky:</h5> |
||||
|
<div class="bg-light p-2 rounded mb-2"> |
||||
|
<code><script>alert('XSS')</script></code> |
||||
|
</div> |
||||
|
<div class="bg-light p-2 rounded mb-2"> |
||||
|
<code><h1>HACKED!</h1></code> |
||||
|
</div> |
||||
|
<div class="bg-light p-2 rounded"> |
||||
|
<code><img src=x onerror="alert('Útok')"></code> |
||||
|
</div> |
||||
|
|
||||
|
<div class="d-grid gap-2 mt-4"> |
||||
|
<a href="zranitelna_verze.html" class="btn btn-danger btn-lg"> |
||||
|
🔓 Otevřít zranitelnou verzi |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- BEZPEČNÁ VERZE --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card version-card border-success border-3"> |
||||
|
<div class="card-header bg-success text-white text-center"> |
||||
|
<h3 class="mb-0">✅ BEZPEČNÁ VERZE</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="text-center mb-3"> |
||||
|
<span class="badge bg-success fs-5">BEZPEČNÁ</span> |
||||
|
</div> |
||||
|
|
||||
|
<h5>Co tato verze dělá SPRÁVNĚ:</h5> |
||||
|
<ul> |
||||
|
<li>Používá <code>textContent</code></li> |
||||
|
<li>Používá <code>createElement()</code></li> |
||||
|
<li>Ošetřuje veškerý vstup</li> |
||||
|
<li>XSS útoky nefungují!</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="alert alert-success"> |
||||
|
<strong>✅ Bezpečnost:</strong> Toto je správný způsob, jak psát bezpečné webové aplikace! |
||||
|
</div> |
||||
|
|
||||
|
<h5 class="mt-3">Zkuste "hacknout":</h5> |
||||
|
<div class="bg-light p-2 rounded mb-2"> |
||||
|
<code><script>alert('XSS')</script></code> |
||||
|
<span class="text-success">→ Zobrazí jako text ✅</span> |
||||
|
</div> |
||||
|
<div class="bg-light p-2 rounded mb-2"> |
||||
|
<code><h1>HACKED!</h1></code> |
||||
|
<span class="text-success">→ Zobrazí jako text ✅</span> |
||||
|
</div> |
||||
|
<div class="bg-light p-2 rounded"> |
||||
|
<code><img src=x onerror="alert('Útok')"></code> |
||||
|
<span class="text-success">→ Nespustí se ✅</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="d-grid gap-2 mt-4"> |
||||
|
<a href="bezpecna_verze.html" class="btn btn-success btn-lg"> |
||||
|
🔒 Otevřít bezpečnou verzi |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- CO JE XSS --> |
||||
|
<div class="row mt-5"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow"> |
||||
|
<div class="card-header bg-dark text-white"> |
||||
|
<h3 class="mb-0">🧠 Co je XSS (Cross-Site Scripting)?</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<p class="lead"> |
||||
|
XSS je bezpečnostní zranitelnost, která umožňuje útočníkovi vložit škodlivý kód |
||||
|
(obvykle JavaScript) do webové stránky. |
||||
|
</p> |
||||
|
|
||||
|
<div class="row mt-4"> |
||||
|
<div class="col-md-6"> |
||||
|
<h5>🔴 Co může útočník udělat:</h5> |
||||
|
<ul> |
||||
|
<li>Ukrást přihlašovací údaje (cookies, session)</li> |
||||
|
<li>Změnit obsah stránky</li> |
||||
|
<li>Přesměrovat na phishingovou stránku</li> |
||||
|
<li>Instalovat keylogger (zaznamenávat stisky kláves)</li> |
||||
|
<li>Spustit malware</li> |
||||
|
<li>Zneužít identitu uživatele</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<h5>🛡️ Jak se bránit:</h5> |
||||
|
<ul> |
||||
|
<li><strong>Nikdy nedůvěřujte vstupu!</strong> (Don't Trust The Input)</li> |
||||
|
<li>Používejte <code>textContent</code> místo <code>innerHTML</code></li> |
||||
|
<li>Používejte <code>createElement()</code> pro DOM elementy</li> |
||||
|
<li>Validujte a sanitizujte vstup</li> |
||||
|
<li>Escapujte HTML entity</li> |
||||
|
<li>Používejte Content Security Policy (CSP)</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-warning mt-4"> |
||||
|
<h5 class="alert-heading">⚡ Zlaté pravidlo bezpečnosti:</h5> |
||||
|
<p class="mb-0 fs-5"> |
||||
|
<strong>"DON'T TRUST THE INPUT"</strong> - Nikdy nedůvěřujte tomu, co uživatel zadá do formuláře! |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- POSTUP LEKCE --> |
||||
|
<div class="row mt-5"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow border-primary"> |
||||
|
<div class="card-header bg-primary text-white"> |
||||
|
<h3 class="mb-0">📚 Doporučený postup lekce:</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<ol class="fs-5"> |
||||
|
<li class="mb-3"> |
||||
|
<strong>Krok 1:</strong> Nejdřív otevřete <span class="badge bg-danger">ZRANITELNOU VERZI</span> |
||||
|
<ul class="mt-2"> |
||||
|
<li>Vyzkoušejte si XSS útoky z pravého sloupce</li> |
||||
|
<li>Zkopírujte kód a vložte do formuláře</li> |
||||
|
<li>Pozorujte, co se stane!</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li class="mb-3"> |
||||
|
<strong>Krok 2:</strong> Prostudujte si kód ve spodní sekci "Co se děje pod kapotou" |
||||
|
<ul class="mt-2"> |
||||
|
<li>Pochopte proč je <code>innerHTML</code> nebezpečné</li> |
||||
|
<li>Podívejte se do konzole (F12)</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li class="mb-3"> |
||||
|
<strong>Krok 3:</strong> Otevřete <span class="badge bg-success">BEZPEČNOU VERZI</span> |
||||
|
<ul class="mt-2"> |
||||
|
<li>Zkuste stejné útoky - nebudou fungovat!</li> |
||||
|
<li>Pochopte rozdíl v přístupu</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li class="mb-3"> |
||||
|
<strong>Krok 4:</strong> Prostudujte si bezpečný kód |
||||
|
<ul class="mt-2"> |
||||
|
<li>Naučte se používat <code>textContent</code></li> |
||||
|
<li>Naučte se <code>createElement()</code></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li> |
||||
|
<strong>Krok 5:</strong> Zapamatujte si pravidlo <strong>"DON'T TRUST THE INPUT"</strong> |
||||
|
</li> |
||||
|
</ol> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- POROVNÁNÍ KÓDU --> |
||||
|
<div class="row mt-5 mb-5"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow"> |
||||
|
<div class="card-header bg-info text-white"> |
||||
|
<h3 class="mb-0">💻 Porovnání kódu</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6"> |
||||
|
<h5 class="text-danger">❌ NEBEZPEČNÝ KÓD:</h5> |
||||
|
<pre class="bg-danger bg-opacity-10 p-3 rounded"><code>// ❌ ŠPATNĚ - innerHTML! |
||||
|
const html = ` |
||||
|
<div> |
||||
|
<strong>${name}</strong> |
||||
|
<p>${message}</p> |
||||
|
</div> |
||||
|
`; |
||||
|
element.innerHTML = html; |
||||
|
|
||||
|
// Pokud message obsahuje: |
||||
|
// <script>alert('XSS')</script> |
||||
|
// → SPUSTÍ SE!</code></pre> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<h5 class="text-success">✅ BEZPEČNÝ KÓD:</h5> |
||||
|
<pre class="bg-success bg-opacity-10 p-3 rounded"><code>// ✅ SPRÁVNĚ - createElement! |
||||
|
const div = document.createElement('div'); |
||||
|
|
||||
|
const strong = document.createElement('strong'); |
||||
|
strong.textContent = name; |
||||
|
|
||||
|
const p = document.createElement('p'); |
||||
|
p.textContent = message; |
||||
|
|
||||
|
div.appendChild(strong); |
||||
|
div.appendChild(p); |
||||
|
element.appendChild(div); |
||||
|
|
||||
|
// HTML kód se zobrazí jako TEXT |
||||
|
// → BEZPEČNÉ!</code></pre> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<footer class="bg-dark text-white py-4"> |
||||
|
<div class="container text-center"> |
||||
|
<p class="mb-0">🛡️ XSS Security Demo | WTL 2025 | Lekce 18a</p> |
||||
|
<p class="mb-0"><small>Remember: <strong>DON'T TRUST THE INPUT!</strong></small></p> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,154 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Návštěvní kniha - ZRANITELNÁ ⚠️</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
</head> |
||||
|
<body class="bg-light p-4"> |
||||
|
<div class="container"> |
||||
|
<!-- VAROVÁNÍ --> |
||||
|
<div class="alert alert-danger"> |
||||
|
<h3>⚠️ NEBEZPEČNÁ VERZE - lze hacknout!</h3> |
||||
|
<p>Používá <code>innerHTML</code> - ŠPATNĚ!</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<!-- FORMULÁŘ --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card"> |
||||
|
<div class="card-header bg-danger text-white"> |
||||
|
<h3>📖 Návštěvní kniha</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<form id="myForm"> |
||||
|
<div class="mb-3"> |
||||
|
<label class="form-label">Jméno:</label> |
||||
|
<input type="text" class="form-control" id="name"> |
||||
|
</div> |
||||
|
<div class="mb-3"> |
||||
|
<label class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="message" rows="3"></textarea> |
||||
|
</div> |
||||
|
<button type="submit" class="btn btn-danger">Přidat záznam</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ÚTOKY --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card border-danger"> |
||||
|
<div class="card-header bg-dark text-white"> |
||||
|
<h4>🎯 Zkuste tyto útoky:</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Do pole "Zpráva" zkopírujte:</h5> |
||||
|
|
||||
|
<div class="alert alert-success mb-2"> |
||||
|
<strong>✅ 1. IMG útok (FUNGUJE!):</strong> |
||||
|
<pre class="mb-0"><code><img src=x onerror="alert('HACKNUTÝ!')"></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-success mb-2"> |
||||
|
<strong>✅ 2. Změna pozadí (FUNGUJE!):</strong> |
||||
|
<pre class="mb-0"><code><img src=x onerror="document.body.style.background='red'"></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-success mb-2"> |
||||
|
<strong>✅ 3. Změna HTML (FUNGUJE!):</strong> |
||||
|
<pre class="mb-0"><code><h1 style="color:red; font-size:50px">HACKED!</h1></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-secondary mb-2"> |
||||
|
<strong>❌ 4. Script tag (NEFUNGUJE):</strong> |
||||
|
<pre class="mb-0"><code><script>alert('XSS')</script></code></pre> |
||||
|
<small class="text-muted">Prohlížeč blokuje script v innerHTML</small> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-info"> |
||||
|
<strong>💡 Poznámka:</strong><br> |
||||
|
<code><script></code> v innerHTML nefunguje, ale <strong>event handlery ANO</strong>!<br> |
||||
|
Proto je innerHTML STÁLE nebezpečné! |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ZÁZNAMY --> |
||||
|
<div class="card mt-4"> |
||||
|
<div class="card-header bg-primary text-white"> |
||||
|
<h4>📝 Záznamy</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div id="entries"> |
||||
|
<p class="text-muted">Zatím žádné záznamy...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- VYSVĚTLENÍ --> |
||||
|
<div class="card mt-4 border-warning"> |
||||
|
<div class="card-header bg-warning"> |
||||
|
<h4>🔍 Problematický kód:</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<pre class="bg-light p-3"><code>// ❌ NEBEZPEČNÉ! |
||||
|
const html = `<p><strong>${name}</strong>: ${message}</p>`; |
||||
|
entriesDiv.innerHTML += html; // TADY JE PROBLÉM!</code></pre> |
||||
|
<div class="alert alert-danger mt-3 mb-0"> |
||||
|
<h5 class="alert-heading">⚠️ Proč je to nebezpečné?</h5> |
||||
|
<p><strong>innerHTML spustí HTML a event handlery!</strong></p> |
||||
|
|
||||
|
<h6 class="mt-3">❌ Nefunguje (prohlížeč blokuje):</h6> |
||||
|
<ul> |
||||
|
<li><code><script>alert(1)</script></code> - NESPUSTÍ SE</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h6 class="mt-3">✅ Funguje (útočníci tohle používají!):</h6> |
||||
|
<ul class="mb-0"> |
||||
|
<li><code><img src=x onerror="alert(1)"></code> - SPUSTÍ SE!</li> |
||||
|
<li><code><body onload="alert(1)"></code> - SPUSTÍ SE!</li> |
||||
|
<li><code><svg onload="alert(1)"></code> - SPUSTÍ SE!</li> |
||||
|
<li><code><input onfocus="alert(1)" autofocus></code> - SPUSTÍ SE!</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
// ===== ZRANITELNÝ KÓD ===== |
||||
|
|
||||
|
const form = document.getElementById('myForm'); |
||||
|
const entriesDiv = document.getElementById('entries'); |
||||
|
|
||||
|
// Co dělá e.preventDefault()? |
||||
|
// → Zastaví normální chování formuláře (odeslání a reload stránky) |
||||
|
// → Abychom mohli zpracovat data sami přes JavaScript |
||||
|
|
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); // Zastaví odeslání formuláře! |
||||
|
|
||||
|
// Získáme data |
||||
|
const name = document.getElementById('name').value; |
||||
|
const message = document.getElementById('message').value; |
||||
|
|
||||
|
// ❌ PROBLÉM: Vytvoříme HTML string |
||||
|
const html = ` |
||||
|
<div class="alert alert-info"> |
||||
|
<strong>${name}</strong>: ${message} |
||||
|
</div> |
||||
|
`; |
||||
|
|
||||
|
// ❌ KRITICKÝ PROBLÉM: innerHTML spustí JavaScript! |
||||
|
entriesDiv.innerHTML += html; |
||||
|
|
||||
|
// Resetujeme formulář |
||||
|
form.reset(); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,273 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Návštěvní kniha - ZRANITELNÁ VERZE ⚠️</title> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
<style> |
||||
|
.entry { |
||||
|
border-left: 4px solid #0d6efd; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
.entry:hover { |
||||
|
background-color: #f8f9fa; |
||||
|
transform: translateX(5px); |
||||
|
} |
||||
|
.danger-banner { |
||||
|
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); |
||||
|
color: white; |
||||
|
padding: 20px; |
||||
|
margin-bottom: 30px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3); |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body class="bg-light"> |
||||
|
<!-- NEBEZPEČÍ BANNER --> |
||||
|
<div class="container mt-4"> |
||||
|
<div class="danger-banner"> |
||||
|
<h2>⚠️ VAROVÁNÍ: ZRANITELNÁ VERZE ⚠️</h2> |
||||
|
<p class="mb-0"> |
||||
|
<strong>Tato verze JE ZÁMĚRNĚ NEBEZPEČNÁ!</strong> Používá <code>innerHTML</code> bez ošetření vstupu. |
||||
|
Lze ji zneužít pomocí XSS (Cross-Site Scripting) útoku. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<!-- LEVÝ SLOUPEC - Formulář --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card shadow-sm"> |
||||
|
<div class="card-header bg-danger text-white"> |
||||
|
<h3 class="mb-0">📖 Návštěvní kniha</h3> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<form id="guestbookForm"> |
||||
|
<div class="mb-3"> |
||||
|
<label for="name" class="form-label">Vaše jméno:</label> |
||||
|
<input type="text" class="form-control" id="name" required> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mb-3"> |
||||
|
<label for="message" class="form-label">Zpráva:</label> |
||||
|
<textarea class="form-control" id="message" rows="4" required></textarea> |
||||
|
<div class="form-text">Napište nám, co si myslíte...</div> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-danger w-100"> |
||||
|
💾 Přidat záznam |
||||
|
</button> |
||||
|
</form> |
||||
|
|
||||
|
<div class="alert alert-warning mt-3"> |
||||
|
<small> |
||||
|
<strong>🔓 Tento formulář NEOŠETŘUJE vstup!</strong><br> |
||||
|
Zkuste zadat HTML nebo JavaScript kód... |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- PRAVÝ SLOUPEC - Nápověda pro hackování --> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="card shadow-sm border-danger"> |
||||
|
<div class="card-header bg-dark text-white"> |
||||
|
<h4 class="mb-0">🎯 Návody na útoky</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Zkuste tyto XSS útoky:</h5> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>1. Jednoduchý alert:</strong> |
||||
|
<pre class="mb-0"><code><script>alert('Byl jsi hacknutý!')</script></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>2. Změna stránky:</strong> |
||||
|
<pre class="mb-0"><code><h1 style="color:red">HACKED!</h1></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>3. Obrázek s chybou:</strong> |
||||
|
<pre class="mb-0"><code><img src=x onerror="alert('XSS')"></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>4. Krádež cookies:</strong> |
||||
|
<pre class="mb-0"><code><script>alert(document.cookie)</script></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-danger"> |
||||
|
<strong>5. Nekonečná smyčka:</strong> |
||||
|
<pre class="mb-0"><code><script>while(true){alert('SPAM')}</script></code></pre> |
||||
|
</div> |
||||
|
|
||||
|
<div class="alert alert-info mt-3"> |
||||
|
<strong>💡 Tip:</strong> Zkopírujte kód výše a vložte do formuláře! |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- ZÁZNAMY --> |
||||
|
<div class="row mt-4"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card shadow-sm"> |
||||
|
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center"> |
||||
|
<h4 class="mb-0">📝 Záznamy návštěvníků</h4> |
||||
|
<button class="btn btn-sm btn-light" onclick="clearEntries()">🗑️ Smazat vše</button> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div id="entries"> |
||||
|
<div class="alert alert-info"> |
||||
|
<em>Zatím žádné záznamy. Buďte první!</em> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- VYSVĚTLENÍ --> |
||||
|
<div class="row mt-4 mb-4"> |
||||
|
<div class="col-12"> |
||||
|
<div class="card border-warning"> |
||||
|
<div class="card-header bg-warning"> |
||||
|
<h4 class="mb-0">🔍 Co se děje "pod kapotou"?</h4> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<h5>Problematický kód v JavaScriptu:</h5> |
||||
|
<pre class="bg-light p-3 rounded"><code>// ❌ NEBEZPEČNÉ - používá innerHTML! |
||||
|
const entryHTML = ` |
||||
|
<div class="entry mb-3 p-3 bg-white rounded"> |
||||
|
<strong>${name}</strong> |
||||
|
<p>${message}</p> |
||||
|
</div> |
||||
|
`; |
||||
|
entriesDiv.innerHTML += entryHTML; // PROBLÉM JE TADY!</code></pre> |
||||
|
|
||||
|
<div class="alert alert-danger mt-3"> |
||||
|
<strong>⚠️ Proč je to nebezpečné?</strong><br> |
||||
|
Když použijeme <code>innerHTML</code>, prohlížeč SPUSTÍ veškerý HTML a JavaScript kód, který uživatel zadá! |
||||
|
Útočník může: |
||||
|
<ul class="mb-0"> |
||||
|
<li>Spustit libovolný JavaScript</li> |
||||
|
<li>Ukrást cookies (přihlašovací údaje)</li> |
||||
|
<li>Změnit vzhled stránky</li> |
||||
|
<li>Přesměrovat na phishingovou stránku</li> |
||||
|
<li>Instalovat keylogger</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script src="js/bootstrap.bundle.js"></script> |
||||
|
<script> |
||||
|
// ===== ZRANITELNÝ KÓD - NEPOUŽÍVEJTE V PRODUKCI! ===== |
||||
|
|
||||
|
const form = document.getElementById('guestbookForm'); |
||||
|
const entriesDiv = document.getElementById('entries'); |
||||
|
|
||||
|
// Načteme záznamy z localStorage při načtení stránky |
||||
|
loadEntries(); |
||||
|
|
||||
|
form.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// Získáme data z formuláře |
||||
|
const name = document.getElementById('name').value; |
||||
|
const message = document.getElementById('message').value; |
||||
|
|
||||
|
// ❌ PROBLÉM: Vytvoříme HTML pomocí template literálu |
||||
|
// Toto NEOŠETŘUJE uživatelský vstup! |
||||
|
const entryHTML = ` |
||||
|
<div class="entry mb-3 p-3 bg-white rounded shadow-sm"> |
||||
|
<div class="d-flex justify-content-between align-items-start"> |
||||
|
<div> |
||||
|
<strong style="color: #0d6efd; font-size: 1.1em;">👤 ${name}</strong> |
||||
|
<small class="text-muted ms-2">${new Date().toLocaleString('cs-CZ')}</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
<hr> |
||||
|
<p class="mb-0">${message}</p> |
||||
|
</div> |
||||
|
`; |
||||
|
|
||||
|
// ❌ KRITICKÝ PROBLÉM: innerHTML spustí veškerý JavaScript! |
||||
|
if (entriesDiv.querySelector('.alert-info')) { |
||||
|
entriesDiv.innerHTML = ''; |
||||
|
} |
||||
|
entriesDiv.innerHTML = entryHTML + entriesDiv.innerHTML; |
||||
|
|
||||
|
// Uložíme do localStorage |
||||
|
saveEntry(name, message); |
||||
|
|
||||
|
// Resetujeme formulář |
||||
|
form.reset(); |
||||
|
}); |
||||
|
|
||||
|
function saveEntry(name, message) { |
||||
|
// Získáme existující záznamy |
||||
|
let entries = JSON.parse(localStorage.getItem('guestbook_vulnerable') || '[]'); |
||||
|
|
||||
|
// Přidáme nový záznam |
||||
|
entries.unshift({ |
||||
|
name: name, |
||||
|
message: message, |
||||
|
timestamp: new Date().toISOString() |
||||
|
}); |
||||
|
|
||||
|
// Uložíme zpět |
||||
|
localStorage.setItem('guestbook_vulnerable', JSON.stringify(entries)); |
||||
|
} |
||||
|
|
||||
|
function loadEntries() { |
||||
|
const entries = JSON.parse(localStorage.getItem('guestbook_vulnerable') || '[]'); |
||||
|
|
||||
|
if (entries.length === 0) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
entriesDiv.innerHTML = ''; |
||||
|
|
||||
|
entries.forEach(entry => { |
||||
|
// ❌ Opět používáme innerHTML - NEBEZPEČNÉ! |
||||
|
const entryHTML = ` |
||||
|
<div class="entry mb-3 p-3 bg-white rounded shadow-sm"> |
||||
|
<div class="d-flex justify-content-between align-items-start"> |
||||
|
<div> |
||||
|
<strong style="color: #0d6efd; font-size: 1.1em;">👤 ${entry.name}</strong> |
||||
|
<small class="text-muted ms-2">${new Date(entry.timestamp).toLocaleString('cs-CZ')}</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
<hr> |
||||
|
<p class="mb-0">${entry.message}</p> |
||||
|
</div> |
||||
|
`; |
||||
|
entriesDiv.innerHTML += entryHTML; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function clearEntries() { |
||||
|
if (confirm('Opravdu chcete smazat všechny záznamy?')) { |
||||
|
localStorage.removeItem('guestbook_vulnerable'); |
||||
|
entriesDiv.innerHTML = '<div class="alert alert-info"><em>Zatím žádné záznamy. Buďte první!</em></div>'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// BONUS: Ukázka co útočník může udělat |
||||
|
// (Toto je jen pro demonstraci - v reálném útoku by to bylo skryté) |
||||
|
console.log('%c⚠️ BEZPEČNOSTNÍ VAROVÁNÍ ⚠️', 'color: red; font-size: 20px; font-weight: bold;'); |
||||
|
console.log('Tato stránka je ZRANITELNÁ vůči XSS útokům!'); |
||||
|
console.log('Zkuste zadat do formuláře: <script>alert("XSS útok!")</script>'); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,249 @@ |
|||||
|
# 🤖 AI Projekty - Příprava na Bootstrap |
||||
|
|
||||
|
Tyto projekty byly vytvořeny pro důkladné procvičení HTML, CSS a JavaScript konceptů před začátkem práce s Bootstrap frameworkem. |
||||
|
|
||||
|
## 📋 Přehled projektů |
||||
|
|
||||
|
### 🎨 AI 01 - CSS Grid & Responzivní Layout |
||||
|
**Složitost:** ⭐⭐ Střední |
||||
|
**Čas:** 45-60 minut |
||||
|
**Zaměření:** CSS Grid, pokročilé selektory, media queries |
||||
|
|
||||
|
**Co se naučíte:** |
||||
|
- CSS Grid (grid-template-columns, gap) |
||||
|
- nth-child, first-child, last-child selektory |
||||
|
- Responzivní design s media queries |
||||
|
- CSS transformace při hover |
||||
|
|
||||
|
**Soubory:** |
||||
|
- `ai_01_grid_responsive/ZADANI.md` - Detailní zadání |
||||
|
- `ai_01_grid_responsive/index.html` - Startovací HTML |
||||
|
- `ai_01_grid_responsive/style.css` - CSS šablona |
||||
|
- `ai_01_grid_responsive/reseni.html` - Kompletní řešení |
||||
|
- `ai_01_grid_responsive/reseni.css` - CSS řešení s komentáři |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### 🏗️ AI 02 - Sémantické HTML5 & CSS Positioning |
||||
|
**Složitost:** ⭐⭐⭐ Náročné |
||||
|
**Čas:** 60-90 minut |
||||
|
**Zaměření:** Sémantické elementy, positioning, jednotky |
||||
|
|
||||
|
**Co se naučíte:** |
||||
|
- HTML5 sémantické elementy (nav, main, section, article, aside) |
||||
|
- Position: fixed, sticky, relative, absolute |
||||
|
- CSS jednotky: rem, em, vh, vw |
||||
|
- Strukturu moderní webové stránky |
||||
|
|
||||
|
**Soubory:** |
||||
|
- `ai_02_semantic_portfolio/ZADANI.md` |
||||
|
- `ai_02_semantic_portfolio/index.html` |
||||
|
- `ai_02_semantic_portfolio/style.css` |
||||
|
- `ai_02_semantic_portfolio/reseni.html` |
||||
|
- `ai_02_semantic_portfolio/reseni.css` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### ✅ AI 03 - Pokročilá Validace Formulářů |
||||
|
**Složitost:** ⭐⭐⭐ Náročné |
||||
|
**Čas:** 90-120 minut |
||||
|
**Zaměření:** JavaScript validace, event handling, RegEx |
||||
|
|
||||
|
**Co se naučíte:** |
||||
|
- addEventListener vs inline events |
||||
|
- Form validation s JavaScriptem |
||||
|
- Regulární výrazy (RegEx) |
||||
|
- DOM manipulace (classList, innerHTML) |
||||
|
- Real-time validace s visual feedbackem |
||||
|
|
||||
|
**Soubory:** |
||||
|
- `ai_03_form_validation/ZADANI.md` |
||||
|
- `ai_03_form_validation/index.html` |
||||
|
- `ai_03_form_validation/style.css` |
||||
|
- `ai_03_form_validation/script.js` |
||||
|
- `ai_03_form_validation/reseni.html` |
||||
|
- `ai_03_form_validation/reseni.css` |
||||
|
- `ai_03_form_validation/reseni.js` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### 🚀 AI 04 - Komplexní Bootstrap Prep Projekt |
||||
|
**Složitost:** ⭐⭐⭐⭐ Velmi náročné |
||||
|
**Čas:** 4-6 hodin |
||||
|
**Zaměření:** Komplexní projekt kombinující VŠE |
||||
|
|
||||
|
**Co se naučíte:** |
||||
|
- Všechny předchozí koncepty dohromady |
||||
|
- CSS proměnné (custom properties) |
||||
|
- Pokročilé animace |
||||
|
- Scroll efekty |
||||
|
- Modal okna, accordions |
||||
|
- Mobile-first přístup |
||||
|
|
||||
|
**Soubory:** |
||||
|
- `ai_04_prep_bootstrap/ZADANI.md` - Komplexní zadání |
||||
|
- `ai_04_prep_bootstrap/index.html` |
||||
|
- `ai_04_prep_bootstrap/css/style.css` |
||||
|
- `ai_04_prep_bootstrap/css/animations.css` |
||||
|
- `ai_04_prep_bootstrap/js/main.js` |
||||
|
- `ai_04_prep_bootstrap/js/validation.js` |
||||
|
- `ai_04_prep_bootstrap/js/scroll.js` |
||||
|
- `ai_04_prep_bootstrap/RESENI_PRIKLAD.md` - Tips & příklady |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎯 Doporučený postup |
||||
|
|
||||
|
### Týden 1: |
||||
|
- **Den 1-2:** AI 01 - CSS Grid (+ opakování Grid konceptů) |
||||
|
- **Den 3-4:** AI 02 - Sémantika & Positioning (+ opakování HTML5) |
||||
|
|
||||
|
### Týden 2: |
||||
|
- **Den 1-3:** AI 03 - Validace formulářů (+ opakování JavaScript) |
||||
|
- **Den 4-5:** Příprava na AI 04 (zopakovat vše) |
||||
|
|
||||
|
### Týden 3: |
||||
|
- **Celý týden:** AI 04 - Komplexní projekt |
||||
|
- **Prezentace:** Konec týdne |
||||
|
|
||||
|
### Týden 4: |
||||
|
- **Začátek Bootstrap!** 🎉 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📚 Co budete znát po dokončení všech projektů |
||||
|
|
||||
|
### HTML: |
||||
|
✅ Sémantické HTML5 elementy |
||||
|
✅ Formuláře a jejich atributy |
||||
|
✅ Správná struktura dokumentu |
||||
|
✅ Accessibility best practices |
||||
|
|
||||
|
### CSS: |
||||
|
✅ CSS Grid systém |
||||
|
✅ Flexbox |
||||
|
✅ Positioning (všechny typy) |
||||
|
✅ Media queries & responzivita |
||||
|
✅ CSS proměnné |
||||
|
✅ Jednotky (rem, em, vh, vw) |
||||
|
✅ Pseudo-třídy a pseudo-elementy |
||||
|
✅ Animations & transitions |
||||
|
✅ Gradienty, shadows, filters |
||||
|
|
||||
|
### JavaScript: |
||||
|
✅ DOM manipulace |
||||
|
✅ Event handling (addEventListener) |
||||
|
✅ Form validation |
||||
|
✅ Podmínky a cykly |
||||
|
✅ Funkce (function declaration, arrow functions) |
||||
|
✅ Regulární výrazy (RegEx) |
||||
|
✅ Práce s objekty a poli |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🔍 Proč tyto projekty před Bootstrapem? |
||||
|
|
||||
|
Bootstrap je mocný framework, ale bez pochopení základních konceptů můžete: |
||||
|
- Neumět framework přizpůsobit svým potřebám |
||||
|
- Vytvářet neefektivní kód |
||||
|
- Záviset na frameworku místo pochopení problému |
||||
|
- Mít problém při debugování |
||||
|
|
||||
|
**Po těchto projektech budete:** |
||||
|
- Rozumět, co Bootstrap dělá "pod kapotou" |
||||
|
- Umět rozhodnout, kdy Bootstrap použít a kdy ne |
||||
|
- Efektivně přizpůsobovat Bootstrap komponenty |
||||
|
- Psát lepší a čistší kód |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 💡 Tips pro studenty |
||||
|
|
||||
|
### Při řešení projektů: |
||||
|
1. **Nejdřív HTML struktura** - Vždy začněte správnou HTML strukturou |
||||
|
2. **Pak mobile styling** - CSS začněte od mobile verzí (mobile-first) |
||||
|
3. **JavaScript na konec** - Interaktivitu přidávejte, když máte hotové HTML & CSS |
||||
|
4. **Časté testování** - Testujte často v browseru, nečekejte na konec |
||||
|
5. **Developer tools** - Používejte Chrome DevTools (F12) pro debugování |
||||
|
6. **Commit často** - Pokud používáte Git, commitujte po každé sekci |
||||
|
|
||||
|
### Užitečné VS Code extensions: |
||||
|
- Live Server - pro live reload |
||||
|
- Prettier - pro formátování kódu |
||||
|
- Auto Rename Tag - automatické přejmenování párových tagů |
||||
|
- CSS Peek - rychlý náhled CSS definic |
||||
|
|
||||
|
### Keyboard shortcuts: |
||||
|
- `Ctrl + /` - zakomentovat/odkomentovat |
||||
|
- `Alt + Shift + F` - formátovat dokument |
||||
|
- `Ctrl + D` - vybrat další výskyt slova |
||||
|
- `Alt + Up/Down` - přesunout řádek nahoru/dolů |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🆘 Když si nevíte rady |
||||
|
|
||||
|
1. **Přečtěte si zadání znovu** - Často je odpověď v zadání |
||||
|
2. **Podívejte se na předchozí lekce** - V `01_uvod` až `11_json` najdete příklady |
||||
|
3. **Použijte console.log()** - Pro debugging JavaScriptu |
||||
|
4. **Zkontrolujte Developer Tools** - Konzole často ukazuje chyby |
||||
|
5. **Postupujte po malých krocích** - Neřešte vše najednou |
||||
|
6. **Koukněte na reseni.html/css/js** - Ale zkuste to sami nejdřív! |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📊 Self-assessment checklist |
||||
|
|
||||
|
Po dokončení všech projektů byste měli umět odpovědět ANO na tyto otázky: |
||||
|
|
||||
|
### HTML: |
||||
|
- [ ] Znám rozdíl mezi `<div>` a sémantickými elementy? |
||||
|
- [ ] Umím vytvořit správnou strukturu formuláře? |
||||
|
- [ ] Vím, kdy použít `<section>`, `<article>`, `<aside>`? |
||||
|
|
||||
|
### CSS: |
||||
|
- [ ] Rozumím rozdílu mezi Grid a Flexbox? |
||||
|
- [ ] Umím vytvořit responzivní layout bez frameworku? |
||||
|
- [ ] Znám všechny typy positioningu a kdy je použít? |
||||
|
- [ ] Umím pracovat s rem, em jednotkami? |
||||
|
- [ ] Vím, jak fungují media queries? |
||||
|
|
||||
|
### JavaScript: |
||||
|
- [ ] Umím validovat formulář pomocí JavaScriptu? |
||||
|
- [ ] Rozumím event listenerům? |
||||
|
- [ ] Umím manipulovat s DOM? |
||||
|
- [ ] Znám základy RegEx? |
||||
|
- [ ] Umím vytvořit jednoduchou interaktivitu? |
||||
|
|
||||
|
**Pokud máte většinu zaškrtlou, jste připraveni na Bootstrap!** 🎉 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📈 Co dál po Bootstrap? |
||||
|
|
||||
|
Po zvládnutí Bootstrap můžete pokračovat v: |
||||
|
- **Tailwind CSS** - utility-first framework |
||||
|
- **React** - JavaScript library pro UI |
||||
|
- **Vue.js** - progresivní JavaScript framework |
||||
|
- **SASS/SCSS** - CSS preprocessor |
||||
|
- **Node.js & Express** - backend JavaScript |
||||
|
- **Databáze** - MySQL, MongoDB |
||||
|
- **Full-stack projekty** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🙏 Acknowledgments |
||||
|
|
||||
|
Projekty vytvořeny pro předmět **Webové Technologie** (WTL) |
||||
|
Cílová skupina: Studenti 3. ročníku IT |
||||
|
Generováno: 2025 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
**Hodně štěstí s projekty! Pokud máte jakékoliv dotazy, neváhejte se zeptat.** 🚀 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📞 Kontakt na učitele |
||||
|
|
||||
|
Při problémech nebo dotazech se obraťte na vyučujícího během konzultačních hodin nebo přes školní email. |
||||
@ -0,0 +1,21 @@ |
|||||
|
Ahoj, |
||||
|
|
||||
|
posílám seznam témát které budeme dělat na programovaní, na náš kurzu na amos "PRG 1 - ročník 25/26" (máme společně s Radkem Rybákem, máme je rozdělené na skupiny) |
||||
|
moje skupina má studijní materiály z hodiny zde: https://git.asgard.odbornaskola.cz/skrabanek/1i_prg |
||||
|
|
||||
|
Seznam témat: |
||||
|
- input, podminky, cykly |
||||
|
- ošetření chyb |
||||
|
- základní moduly (random, os, time, datetime) |
||||
|
- seznamy |
||||
|
- práce se soubory |
||||
|
- funkce |
||||
|
- pokročilá práce s funkcemi |
||||
|
- práce s textem a stringy |
||||
|
- instalace knihoven a pip |
||||
|
- CLI aplikace |
||||
|
- Objektově orientované programování (OOP) |
||||
|
- JSON & HTTP requests |
||||
|
|
||||
|
Děkuji, snad jsem na nic nezpoměl |
||||
|
Jakub Škrabánek |
||||
@ -0,0 +1,428 @@ |
|||||
|
# Individuální studijní plán - Webové technologie (WTL) |
||||
|
## 3. ročník IT - školní rok 2025/2026 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Základní informace |
||||
|
|
||||
|
**Předmět:** Webové technologie (WTL) |
||||
|
**Ročník:** 3. ročník IT |
||||
|
**Vyučující:** [Jméno vyučujícího] |
||||
|
**Studijní materiály:** https://[odkaz na váš repozitář] |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Celkový přehled kurzu |
||||
|
|
||||
|
Kurz Webových technologií je rozdělen do **dvou pololetí**: |
||||
|
|
||||
|
### **1. pololetí (září - leden)** |
||||
|
- Základy HTML, CSS a JavaScriptu |
||||
|
- Responzivní webdesign |
||||
|
- Bootstrap framework |
||||
|
- Webová bezpečnost (XSS útoky) |
||||
|
- Komplexní frontend projekty |
||||
|
|
||||
|
### **2. pololetí (únor - červen)** |
||||
|
- PHP základy |
||||
|
- Databáze (MySQL/MariaDB) |
||||
|
- Backend web development |
||||
|
- Webové aplikace (frontend + backend) |
||||
|
- Závěrečný projekt |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📋 Seznam témat - 1. pololetí (Frontend) |
||||
|
|
||||
|
### 1. Úvod do HTML |
||||
|
- Struktura HTML dokumentu |
||||
|
- Sémantické elementy (header, nav, main, footer, article, section, aside) |
||||
|
- Nadpisy, odstavce, seznamy |
||||
|
- Odkazy a obrázky |
||||
|
- Tabulky |
||||
|
- **Výstup:** Základní webová stránka |
||||
|
|
||||
|
### 2. HTML Formuláře |
||||
|
- Formulářové elementy (input, textarea, select, button) |
||||
|
- Typy inputů (text, email, password, number, date, atd.) |
||||
|
- Atributy formulářů (required, placeholder, pattern) |
||||
|
- **Výstup:** Kontaktní formulář |
||||
|
|
||||
|
### 3. Úvod do CSS |
||||
|
- Selektory (element, třída, ID) |
||||
|
- Box model (margin, padding, border) |
||||
|
- Barvy a pozadí |
||||
|
- Typografie (fonts, text styling) |
||||
|
- Pseudo-třídy (:hover, :visited, :focus) |
||||
|
- Gradienty |
||||
|
- **Výstup:** Nastylovaná webová stránka |
||||
|
|
||||
|
### 4. CSS Layout |
||||
|
- Display property (block, inline, inline-block) |
||||
|
- Float a clear (legacy layout) |
||||
|
- Základy pozicování (static, relative, absolute, fixed) |
||||
|
- **Výstup:** Vícesloupcový layout |
||||
|
|
||||
|
### 5. Úvod do JavaScriptu |
||||
|
- Proměnné (let, const, var) |
||||
|
- Datové typy (string, number, boolean, object, array) |
||||
|
- Operátory |
||||
|
- Podmínky (if, else, switch) |
||||
|
- Cykly (for, while) |
||||
|
- Funkce (function declaration, arrow functions) |
||||
|
- **Výstup:** Jednoduché JS skripty |
||||
|
|
||||
|
### 6. JavaScript + HTML |
||||
|
- DOM (Document Object Model) |
||||
|
- Manipulace s HTML elementy |
||||
|
- querySelector, getElementById |
||||
|
- innerHTML, innerText, textContent |
||||
|
- Vytváření a odstraňování elementů |
||||
|
- **Výstup:** Dynamická webová stránka |
||||
|
|
||||
|
### 7. JavaScript + CSS + DOM |
||||
|
- Manipulace s CSS přes JavaScript |
||||
|
- classList (add, remove, toggle) |
||||
|
- Změna stylů (style property) |
||||
|
- Event handling (onclick, addEventListener) |
||||
|
- **Výstup:** Interaktivní elementy (toggle, show/hide) |
||||
|
|
||||
|
### 8. JavaScript Formuláře |
||||
|
- Event handling u formulářů |
||||
|
- Validace formulářů s JavaScriptem |
||||
|
- preventDefault() |
||||
|
- Získávání hodnot z formulářů |
||||
|
- **Výstup:** Validovaný formulář |
||||
|
|
||||
|
### 9. Media Queries & Responzivní Design |
||||
|
- Viewport meta tag |
||||
|
- Media queries (@media) |
||||
|
- Breakpoints (mobile, tablet, desktop) |
||||
|
- Mobile-first přístup |
||||
|
- Responzivní obrázky |
||||
|
- **Výstup:** Responzivní webová stránka |
||||
|
|
||||
|
### 10. CSS Flexbox |
||||
|
- display: flex |
||||
|
- flex-direction, justify-content, align-items |
||||
|
- flex-wrap, gap |
||||
|
- Flex položky (flex-grow, flex-shrink, flex-basis) |
||||
|
- **Výstup:** Flexbox layout |
||||
|
|
||||
|
### 11. JSON & AJAX |
||||
|
- Formát JSON |
||||
|
- Fetch API |
||||
|
- Asynchronní JavaScript (promises, async/await) |
||||
|
- REST API základy |
||||
|
- **Výstup:** Aplikace načítající data z API |
||||
|
|
||||
|
### 12. CSS Grid |
||||
|
- display: grid |
||||
|
- grid-template-columns, grid-template-rows |
||||
|
- gap, grid-gap |
||||
|
- Grid areas |
||||
|
- Rozdíl Grid vs Flexbox |
||||
|
- **Výstup:** Grid-based layout |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🤖 AI Přípravné projekty (před Bootstrapem) |
||||
|
|
||||
|
### AI 01 - CSS Grid & Responzivní Layout |
||||
|
- Pokročilé Grid techniky |
||||
|
- nth-child selektory |
||||
|
- Komplexní responzivní design |
||||
|
- **Hodnocení:** 10 bodů |
||||
|
|
||||
|
### AI 02 - Sémantické HTML5 & CSS Positioning |
||||
|
- Sémantická struktura stránky |
||||
|
- Position: sticky, absolute, fixed, relative |
||||
|
- CSS jednotky (rem, em, vh, vw) |
||||
|
- **Hodnocení:** 15 bodů |
||||
|
|
||||
|
### AI 03 - Pokročilá Validace Formulářů |
||||
|
- addEventListener |
||||
|
- Regulární výrazy (RegEx) |
||||
|
- Real-time validace |
||||
|
- Visual feedback |
||||
|
- **Hodnocení:** 20 bodů |
||||
|
|
||||
|
### AI 04 - Komplexní Bootstrap Prep Projekt |
||||
|
- Kombinace všech předchozích konceptů |
||||
|
- CSS custom properties (variables) |
||||
|
- Pokročilé animace |
||||
|
- Modal, accordion implementace |
||||
|
- **Hodnocení:** 30 bodů |
||||
|
|
||||
|
**Celkem za AI projekty: 75 bodů** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎨 Bootstrap Framework |
||||
|
|
||||
|
### 13. Bootstrap Úvod |
||||
|
- Instalace a setup Bootstrapu |
||||
|
- Bootstrap grid systém |
||||
|
- Container, row, col |
||||
|
- Utility třídy |
||||
|
|
||||
|
### 14. Bootstrap Layout |
||||
|
- Responzivní breakpoints |
||||
|
- Grid options |
||||
|
- Flexbox utilities |
||||
|
- Spacing utilities (m-, p-) |
||||
|
|
||||
|
### 15. Bootstrap Komponenty |
||||
|
- Buttons, badges, alerts |
||||
|
- Cards |
||||
|
- Navbar |
||||
|
- Forms (Bootstrap form styling) |
||||
|
- Tables |
||||
|
|
||||
|
### 16. Bootstrap Carousel |
||||
|
- Carousel komponenta |
||||
|
- Indicators, controls |
||||
|
- Automatické přepínání |
||||
|
- **Výstup:** Fotogalerie s carousel |
||||
|
|
||||
|
### 17. Bootstrap Modal |
||||
|
- Modal dialog |
||||
|
- Triggery pro modal |
||||
|
- Modal velikosti |
||||
|
- **Výstup:** Aplikace s modal dialogy |
||||
|
|
||||
|
### 18. Bootstrap Form Validation |
||||
|
- Bootstrap validační třídy |
||||
|
- JavaScript validace s Bootstrapem |
||||
|
- Custom validation styles |
||||
|
- **Výstup:** Profesionální registrační formulář |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🔒 Webová bezpečnost |
||||
|
|
||||
|
### 19. XSS (Cross-Site Scripting) Demo |
||||
|
- Co je XSS útok |
||||
|
- Reflected XSS |
||||
|
- Stored XSS |
||||
|
- Prevence XSS útoků |
||||
|
- HTML sanitizace |
||||
|
- **Výstup:** Demo aplikace s XSS zranitelností a její oprava |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🚀 Komplexní Frontend projekty |
||||
|
|
||||
|
### 20. TODO List aplikace |
||||
|
- CRUD operace (Create, Read, Update, Delete) |
||||
|
- LocalStorage |
||||
|
- Bootstrap UI |
||||
|
- JavaScript manipulace s daty |
||||
|
- **Výstup:** Funkční TODO list |
||||
|
|
||||
|
### 21. AJAX & API Integration |
||||
|
- Fetch API pokročile |
||||
|
- Práce s REST API |
||||
|
- Error handling |
||||
|
- Loading states |
||||
|
- **Výstup:** Aplikace pracující s externím API |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📋 Seznam témat - 2. pololetí (Backend) |
||||
|
|
||||
|
### 22. Úvod do PHP |
||||
|
- PHP syntaxe |
||||
|
- Proměnné a datové typy |
||||
|
- Podmínky a cykly |
||||
|
- Funkce v PHP |
||||
|
- Superglobals ($_GET, $_POST, $_SERVER) |
||||
|
|
||||
|
### 23. PHP & Formuláře |
||||
|
- Zpracování formulářů (GET, POST) |
||||
|
- Validace na straně serveru |
||||
|
- Sanitizace vstupů |
||||
|
- CSRF ochrana |
||||
|
|
||||
|
### 24. PHP & Soubory |
||||
|
- Čtení a zápis souborů |
||||
|
- Nahrávání souborů |
||||
|
- Práce s adresáři |
||||
|
- File permissions |
||||
|
|
||||
|
### 25. Úvod do databází |
||||
|
- Relační databáze |
||||
|
- MySQL/MariaDB |
||||
|
- phpMyAdmin |
||||
|
- SQL příkazy (SELECT, INSERT, UPDATE, DELETE) |
||||
|
|
||||
|
### 26. PHP & MySQL |
||||
|
- Připojení k databázi (mysqli, PDO) |
||||
|
- Prepared statements |
||||
|
- SQL injection prevence |
||||
|
- Databázové dotazy z PHP |
||||
|
|
||||
|
### 27. Sessions & Cookies |
||||
|
- HTTP sessions |
||||
|
- Cookies |
||||
|
- Autentizace uživatelů |
||||
|
- Session security |
||||
|
|
||||
|
### 28. Registrace & Login systém |
||||
|
- Uživatelská registrace |
||||
|
- Hash hesel (password_hash, password_verify) |
||||
|
- Login/logout funkcionalita |
||||
|
- Ochrana stránek (middleware) |
||||
|
|
||||
|
### 29. CRUD Webová aplikace |
||||
|
- Create, Read, Update, Delete operace |
||||
|
- Databázové operace |
||||
|
- Admin rozhraní |
||||
|
- **Výstup:** Blog nebo e-shop backend |
||||
|
|
||||
|
### 30. REST API v PHP |
||||
|
- JSON responses |
||||
|
- API endpoints |
||||
|
- HTTP metody (GET, POST, PUT, DELETE) |
||||
|
- API authentication |
||||
|
|
||||
|
### 31. Závěrečný projekt |
||||
|
- Komplexní webová aplikace |
||||
|
- Frontend (HTML, CSS, JS, Bootstrap) |
||||
|
- Backend (PHP, MySQL) |
||||
|
- Funkční features (registrace, login, CRUD) |
||||
|
- Responzivní design |
||||
|
- **Hodnocení:** 100 bodů |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎯 Očekávané výstupy kurzu |
||||
|
|
||||
|
Po dokončení kurzu by studenti měli umět: |
||||
|
|
||||
|
### Frontend: |
||||
|
✅ Vytvořit sémanticky správnou HTML strukturu |
||||
|
✅ Nastylovat moderní responzivní web pomocí CSS |
||||
|
✅ Používat CSS Grid a Flexbox pro layout |
||||
|
✅ Psát čistý a efektivní JavaScript kód |
||||
|
✅ Manipulovat s DOM a zpracovávat eventy |
||||
|
✅ Validovat formuláře |
||||
|
✅ Pracovat s JSON a API pomocí Fetch |
||||
|
✅ Používat Bootstrap framework |
||||
|
✅ Rozumět základům webové bezpečnosti (XSS) |
||||
|
|
||||
|
### Backend: |
||||
|
✅ Psát PHP skripty |
||||
|
✅ Zpracovávat formuláře na serveru |
||||
|
✅ Pracovat s MySQL databází |
||||
|
✅ Vytvořit registrační a přihlašovací systém |
||||
|
✅ Implementovat CRUD operace |
||||
|
✅ Zabezpečit webovou aplikaci (SQL injection, XSS, CSRF) |
||||
|
✅ Vytvořit jednoduché REST API |
||||
|
|
||||
|
### Soft skills: |
||||
|
✅ Debugovat kód pomocí Developer Tools |
||||
|
✅ Používat Git pro verzování kódu |
||||
|
✅ Psát čitelný a udržovatelný kód |
||||
|
✅ Testovat aplikace v různých prohlížečích |
||||
|
✅ Pracovat samostatně i v týmu |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📊 Hodnocení |
||||
|
|
||||
|
### 1. pololetí: |
||||
|
- **AI projekty:** 75 bodů (AI 01-04) |
||||
|
- **Průběžné projekty:** 50 bodů |
||||
|
- **Aktivita a domácí úkoly:** 25 bodů |
||||
|
- **Test z frontend technologií:** 50 bodů |
||||
|
- **Celkem:** 200 bodů |
||||
|
|
||||
|
### 2. pololetí: |
||||
|
- **PHP & MySQL projekty:** 50 bodů |
||||
|
- **Závěrečný projekt:** 100 bodů |
||||
|
- **Aktivita a domácí úkoly:** 25 bodů |
||||
|
- **Test z backend technologií:** 25 bodů |
||||
|
- **Celkem:** 200 bodů |
||||
|
|
||||
|
### Celkové hodnocení za rok: 400 bodů |
||||
|
|
||||
|
**Klasifikace:** |
||||
|
- 90-100% (360-400 bodů): Výborný (1) |
||||
|
- 75-89% (300-359 bodů): Chvalitebný (2) |
||||
|
- 60-74% (240-299 bodů): Dobrý (3) |
||||
|
- 45-59% (180-239 bodů): Dostatečný (4) |
||||
|
- 0-44% (0-179 bodů): Nedostatečný (5) |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🛠️ Doporučené nástroje |
||||
|
|
||||
|
### Editor: |
||||
|
- **Visual Studio Code** (primární doporučení) |
||||
|
- Extensions: Live Server, Prettier, Auto Rename Tag, CSS Peek |
||||
|
|
||||
|
### Prohlížeče: |
||||
|
- **Google Chrome** (primární pro vývoj) |
||||
|
- Firefox, Edge (testování kompatibility) |
||||
|
- Chrome DevTools (F12) pro debugging |
||||
|
|
||||
|
### Backend (2. pololetí): |
||||
|
- **XAMPP** nebo **WAMP** (Apache + MySQL + PHP) |
||||
|
- **phpMyAdmin** (správa databáze) |
||||
|
|
||||
|
### Ostatní: |
||||
|
- **Git** pro verzování kódu |
||||
|
- **GitHub/GitLab** pro sdílení projektů |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📚 Užitečné zdroje |
||||
|
|
||||
|
### Dokumentace: |
||||
|
- [MDN Web Docs](https://developer.mozilla.org/) - HTML, CSS, JavaScript |
||||
|
- [Bootstrap dokumentace](https://getbootstrap.com/docs/) |
||||
|
- [PHP dokumentace](https://www.php.net/manual/en/) |
||||
|
- [MySQL dokumentace](https://dev.mysql.com/doc/) |
||||
|
|
||||
|
### Online nástroje: |
||||
|
- [CodePen](https://codepen.io/) - Online playground |
||||
|
- [regex101.com](https://regex101.com/) - RegEx tester |
||||
|
- [Can I Use](https://caniuse.com/) - Browser compatibility |
||||
|
- [CSS-Tricks](https://css-tricks.com/) - CSS tutoriály |
||||
|
|
||||
|
### Komunita: |
||||
|
- [Stack Overflow](https://stackoverflow.com/) - Q&A |
||||
|
- [CSS Tricks](https://css-tricks.com/) |
||||
|
- [JavaScript.info](https://javascript.info/) |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📞 Kontakt |
||||
|
|
||||
|
**Vyučující:** [Jméno vyučujícího] |
||||
|
**Email:** [email] |
||||
|
**Konzultační hodiny:** [časy] |
||||
|
**Repozitář:** [odkaz na Git repozitář] |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📝 Poznámky |
||||
|
|
||||
|
- Všechny projekty a úkoly budou zadávány průběžně během školního roku |
||||
|
- Studenti jsou povinni dodržovat termíny odevzdání |
||||
|
- Plagiátorství (kopírování kódu) bude sankcionováno |
||||
|
- Aktivní účast na hodinách je důležitá pro pochopení látky |
||||
|
- Doporučuje se pravidelné opakování a procvičování |
||||
|
- Studenti mohou využít konzultační hodiny pro pomoc s projekty |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
**Vytvořeno:** [datum] |
||||
|
**Předmět:** Webové Technologie (WTL) |
||||
|
**Cílová skupina:** 3. ročník IT |
||||
|
**Školní rok:** 2025/2026 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
*Tento studijní plán může být upraven na základě potřeb studentů a aktuálního pokroku ve výuce.* |
||||
@ -0,0 +1,31 @@ |
|||||
|
Ahoj, |
||||
|
|
||||
|
posílám seznam témat které budeme dělat na Webových technologiích, na náš kurzu "WTL - 3. ročník 25/26" |
||||
|
studijní materiály z hodiny zde: [odkaz na repozitář] |
||||
|
|
||||
|
Seznam témat - 1. pololetí (Frontend): |
||||
|
- úvod do HTML (struktura, sémantika, formuláře, tabulky) |
||||
|
- úvod do CSS (selektory, box model, barvy, typografie) |
||||
|
- CSS layout (float, positioning, flexbox, grid) |
||||
|
- media queries a responzivní design |
||||
|
- úvod do JavaScriptu (proměnné, podmínky, cykly, funkce) |
||||
|
- JavaScript + DOM (manipulace s HTML, querySelector, innerHTML) |
||||
|
- JavaScript eventy a validace formulářů |
||||
|
- JSON & Fetch API (asynchronní JavaScript, REST API) |
||||
|
- Bootstrap framework (grid systém, komponenty, utilities) |
||||
|
- Bootstrap pokročile (carousel, modal, form validation) |
||||
|
- webová bezpečnost (XSS útoky, prevence, sanitizace) |
||||
|
- komplexní frontend projekty (TODO list, AJAX aplikace) |
||||
|
|
||||
|
Seznam témat - 2. pololetí (Backend): |
||||
|
- úvod do PHP (syntaxe, proměnné, podmínky, cykly, funkce) |
||||
|
- PHP formuláře (GET, POST, validace, sanitizace) |
||||
|
- PHP práce se soubory (čtení, zápis, upload) |
||||
|
- úvod do databází (MySQL, SQL příkazy) |
||||
|
- PHP & MySQL (připojení, dotazy, prepared statements) |
||||
|
- sessions & cookies (autentizace, zabezpečení) |
||||
|
- registrace & login systém (hash hesel, ochrana) |
||||
|
- závěrečný full-stack projekt (frontend + backend + databáze) |
||||
|
|
||||
|
Děkuji, snad jsem na nic nezapomněl |
||||
|
[Tvoje jméno] |
||||
@ -0,0 +1,101 @@ |
|||||
|
# 📚 AI Extra Material - Doplňkové Studijní Materiály |
||||
|
|
||||
|
## 🎯 Účel této složky |
||||
|
|
||||
|
Tato složka obsahuje **doplňkové studijní materiály** pro hlubší pochopení pokročilých konceptů webového vývoje. Tyto materiály jsou navíc k základnímu učivu a slouží k samostudiu. |
||||
|
|
||||
|
## 📂 Co složka obsahuje |
||||
|
|
||||
|
### 🎓 AI Projekty (Základní verze v /AI složce) |
||||
|
|
||||
|
Tato složka obsahuje **duplikáty AI projektů** z hlavní složky `/AI`. Jsou zde pro pohodlný přístup k materiálům. |
||||
|
|
||||
|
- **ai_01_grid_responsive** - CSS Grid & Responzivní Layout |
||||
|
- **ai_02_semantic_portfolio** - Sémantické HTML5 & CSS Positioning |
||||
|
- **ai_03_form_validation** - Pokročilá Validace Formulářů s JavaScript |
||||
|
- **ai_04_prep_bootstrap** - Komplexní Bootstrap Prep Projekt |
||||
|
|
||||
|
### 📋 Informační Soubory |
||||
|
|
||||
|
- **AI_PROJEKTY_README.md** - Přehled všech AI projektů |
||||
|
- **UCITEL_INFO.md** - Informace pro učitele o projektech, hodnocení, harmonogramu |
||||
|
- **ISP_WTL_3I.md** - Individuální studijní plán (ISP) |
||||
|
- **ISP_WTL_3I.txt** - ISP v textové podobě |
||||
|
|
||||
|
### 🚀 Bootstrap Doplňkové Projekty |
||||
|
|
||||
|
#### 18_form_validation_bootstrap |
||||
|
Ukázka validace formulářů s Bootstrap 5. |
||||
|
- Bootstrap validační třídy |
||||
|
- Custom validace s JavaScriptem |
||||
|
- Visual feedback pro uživatele |
||||
|
- Propojení s Bootstrap styly |
||||
|
|
||||
|
**Kdy použít:** Pro pochopení, jak Bootstrap řeší validaci formulářů "out of the box". |
||||
|
|
||||
|
#### 18a_form_xss_demo |
||||
|
**BEZPEČNOSTNÍ DEMO** - ukázka XSS (Cross-Site Scripting) zranitelnosti. |
||||
|
- Demonstrace nebezpečného kódu |
||||
|
- Jak vznikají XSS útoky |
||||
|
- Jak se bránit (sanitizace inputů) |
||||
|
- Best practices pro bezpečnost |
||||
|
|
||||
|
**⚠️ VAROVÁNÍ:** Tento kód je záměrně zranitelný pro výukové účely. **NIKDY** nepoužívejte tento přístup v produkčním kódu! |
||||
|
|
||||
|
## 🎓 Jak pracovat s těmito materiály |
||||
|
|
||||
|
### Pro studenty: |
||||
|
|
||||
|
1. **Nejdříve dokončete základní AI projekty** v hlavní složce `/AI` |
||||
|
2. **Pokud chcete víc:** Projděte si tyto doplňkové materiály |
||||
|
3. **Bootstrap validace:** Po dokončení AI 03, prozkoumejte `18_form_validation_bootstrap` |
||||
|
4. **Bezpečnost:** Po práci s formuláři si prostudujte `18a_form_xss_demo` |
||||
|
|
||||
|
### Pro učitele: |
||||
|
|
||||
|
- Přečtěte si **UCITEL_INFO.md** pro detailní informace o projektech |
||||
|
- **AI_PROJEKTY_README.md** obsahuje přehled všech AI projektů |
||||
|
- **ISP** soubory obsahují studijní plán |
||||
|
|
||||
|
## 🔗 Návaznost na hlavní kurz |
||||
|
|
||||
|
| Základní kurz | Extra Material | Proč je užitečný | |
||||
|
|---------------|----------------|------------------| |
||||
|
| 08_js_form | 18_form_validation_bootstrap | Ukáže Bootstrap přístup k validaci | |
||||
|
| AI 03 | 18a_form_xss_demo | Bezpečnostní aspekty formulářů | |
||||
|
| 13-17 Bootstrap | AI projekty (duplikáty) | Opakování před Bootstrapem | |
||||
|
|
||||
|
## 💡 Doporučené Pořadí Studia |
||||
|
|
||||
|
1. **Základní kurz** (01-20) - absolvujte nejdříve |
||||
|
2. **AI projekty** v hlavní složce `/AI` - praktické projekty |
||||
|
3. **Bootstrap validace** (`18_form_validation_bootstrap`) - po Bootstrap lekcích |
||||
|
4. **XSS Demo** (`18a_form_xss_demo`) - pro pochopení bezpečnosti |
||||
|
5. **ISP materiály** - pro samostudium dle potřeby |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
- ✅ Tyto materiály jsou **nepovinné** - jsou navíc k základnímu kurzu |
||||
|
- ✅ Projekty v této složce jsou **duplikáty** - hlavní verze jsou v `/AI` |
||||
|
- ⚠️ **XSS Demo** je záměrně zranitelný - slouží pouze k výukovým účelům |
||||
|
- 📚 **UCITEL_INFO.md** obsahuje hodnocení a harmonogram pro učitele |
||||
|
|
||||
|
## 📖 Hlavní AI Projekty |
||||
|
|
||||
|
**POZOR:** Hlavní verze AI projektů jsou v kořenové složce **`/AI`**! |
||||
|
|
||||
|
Pro práci na projektech používejte soubory z `/AI`, ne z této složky. Tato složka slouží jako archiv a reference. |
||||
|
|
||||
|
## 🎯 Cíle Extra Materiálů |
||||
|
|
||||
|
Po prostudování těchto materiálů budete: |
||||
|
- ✅ Rozumět Bootstrap validaci formulářů |
||||
|
- ✅ Vědět, jak se bránit XSS útokům |
||||
|
- ✅ Mít hlubší pochopení bezpečnosti webových aplikací |
||||
|
- ✅ Umět propojit Bootstrap s custom validací |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
**Hodně štěstí s dalším studiem! 📚✨** |
||||
|
|
||||
|
*Tyto materiály rozšiřují základní kurz a poskytují hlubší vhled do pokročilých témat.* |
||||
@ -0,0 +1,351 @@ |
|||||
|
# 👨🏫 Informace pro učitele - AI Projekty |
||||
|
|
||||
|
## 📊 Analýza současného stavu studentů |
||||
|
|
||||
|
### ✅ Co studenti již zvládají: |
||||
|
|
||||
|
**HTML:** |
||||
|
- Základní struktura, nadpisy (h1-h6) |
||||
|
- Odkazy, obrázky |
||||
|
- Formuláře (input, textarea, select, button) |
||||
|
- Tabulky a seznamy |
||||
|
- Částečně sémantické elementy (header, footer, aside, article) |
||||
|
|
||||
|
**CSS:** |
||||
|
- Základní selektory (element, třída, ID) |
||||
|
- Box model (margin, padding, border) |
||||
|
- Pseudo-třídy (:hover, :visited) |
||||
|
- Gradienty a transitions |
||||
|
- Flexbox (základy) |
||||
|
- Media queries (základy) |
||||
|
- Float-based layout (starší přístup) |
||||
|
|
||||
|
**JavaScript:** |
||||
|
- Proměnné (let, const, var) |
||||
|
- Datové typy a objekty |
||||
|
- Podmínky a cykly |
||||
|
- Funkce |
||||
|
- DOM manipulace (getElementById, innerHTML, innerText) |
||||
|
- Event handling (inline onclick) |
||||
|
- JSON a Fetch API |
||||
|
|
||||
|
### ⚠️ Co chybí před Bootstrapem: |
||||
|
|
||||
|
**KRITICKÉ mezery:** |
||||
|
1. **CSS Grid** - chybí úplně |
||||
|
2. **addEventListener** - používají jen inline onclick |
||||
|
3. **Pokročilé CSS selektory** (nth-child, ::before, ::after) |
||||
|
4. **CSS jednotky** - používají jen px, ne rem/em/vh/vw |
||||
|
5. **Position: sticky a absolute** - nepoužito |
||||
|
6. **Form validace s JS** - jen základní |
||||
|
|
||||
|
**DOPORUČUJI doplnit:** |
||||
|
7. **CSS proměnné** (custom properties) |
||||
|
8. **Pokročilé animace** |
||||
|
9. **Scroll efekty** |
||||
|
10. **Mobile-first přístup** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎯 Účel AI projektů |
||||
|
|
||||
|
Projekty byly navrženy tak, aby: |
||||
|
1. **Systematicky doplnily mezery** v znalostech |
||||
|
2. **Postupně zvyšovaly náročnost** (od jednoduchého po komplexní) |
||||
|
3. **Připravily na Bootstrap filozofii** (grid systém, utility třídy, komponenty) |
||||
|
4. **Poskytly praktickou zkušenost** s real-world projekty |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📋 Přehled projektů pro učitele |
||||
|
|
||||
|
### AI 01 - CSS Grid & Responzivní Layout |
||||
|
**Čas:** 1-2 vyučovací hodiny |
||||
|
**Obtížnost:** Střední |
||||
|
**Cíl:** Naučit CSS Grid před Bootstrap grid systémem |
||||
|
|
||||
|
**Klíčové koncepty:** |
||||
|
- `display: grid` |
||||
|
- `grid-template-columns` |
||||
|
- `gap` |
||||
|
- Pokročilé selektory (nth-child) |
||||
|
- Media queries pro responzivitu |
||||
|
|
||||
|
**Výstup:** Responzivní galerie s 9 položkami |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### AI 02 - Sémantické HTML5 & CSS Positioning |
||||
|
**Čas:** 2-3 vyučovací hodiny |
||||
|
**Obtížnost:** Náročné |
||||
|
**Cíl:** Sémantický HTML5 a všechny typy positioning |
||||
|
|
||||
|
**Klíčové koncepty:** |
||||
|
- Sémantické elementy (nav, main, section, article, aside) |
||||
|
- Position: fixed, sticky, relative, absolute |
||||
|
- CSS jednotky: rem, em, vh, vw |
||||
|
- Správná struktura moderní stránky |
||||
|
|
||||
|
**Výstup:** Portfolio stránka s fixní navigací a sticky sidebar |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### AI 03 - Pokročilá Validace Formulářů |
||||
|
**Čas:** 2-3 vyučovací hodiny |
||||
|
**Obtížnost:** Náročné |
||||
|
**Cíl:** Real-time validace s JS (Bootstrap má validační třídy) |
||||
|
|
||||
|
**Klíčové koncepty:** |
||||
|
- `addEventListener` místo inline events |
||||
|
- RegEx pro validaci |
||||
|
- DOM manipulace (classList) |
||||
|
- Real-time feedback |
||||
|
- UX best practices |
||||
|
|
||||
|
**Výstup:** Registrační formulář s kompletní validací |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### AI 04 - Komplexní Bootstrap Prep Projekt |
||||
|
**Čas:** 4-6 vyučovacích hodin (nebo domácí práce) |
||||
|
**Obtížnost:** Velmi náročné |
||||
|
**Cíl:** Komplexní projekt kombinující všechny koncepty |
||||
|
|
||||
|
**Klíčové koncepty:** |
||||
|
- Všechny předchozí koncepty |
||||
|
- CSS proměnné |
||||
|
- Scroll efekty |
||||
|
- Modal, accordion |
||||
|
- Mobile-first |
||||
|
|
||||
|
**Výstup:** Plně funkční landing page |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📅 Doporučený harmonogram |
||||
|
|
||||
|
### Varianta A - Intenzivní (2 týdny) |
||||
|
``` |
||||
|
Týden 1: |
||||
|
Po: AI 01 + AI 02 začátek |
||||
|
St: AI 02 dokončení + AI 03 začátek |
||||
|
Pá: AI 03 dokončení |
||||
|
|
||||
|
Týden 2: |
||||
|
Po-Pá: AI 04 (průběžně) |
||||
|
Pá: Prezentace AI 04 |
||||
|
|
||||
|
Týden 3: |
||||
|
Bootstrap start! |
||||
|
``` |
||||
|
|
||||
|
### Varianta B - Standardní (3 týdny) |
||||
|
``` |
||||
|
Týden 1: |
||||
|
Lekce 1: AI 01 |
||||
|
Lekce 2: AI 02 |
||||
|
|
||||
|
Týden 2: |
||||
|
Lekce 1: AI 03 část 1 |
||||
|
Lekce 2: AI 03 část 2 |
||||
|
|
||||
|
Týden 3: |
||||
|
Lekce 1-2: AI 04 (práce ve třídě) |
||||
|
DÚ: Dokončení AI 04 |
||||
|
|
||||
|
Týden 4: |
||||
|
Bootstrap start! |
||||
|
``` |
||||
|
|
||||
|
### Varianta C - Volnočasová (4 týdny) |
||||
|
``` |
||||
|
Týden 1: AI 01 |
||||
|
Týden 2: AI 02 |
||||
|
Týden 3: AI 03 |
||||
|
Týden 4: AI 04 |
||||
|
|
||||
|
Týden 5: Bootstrap start! |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎓 Hodnocení projektů |
||||
|
|
||||
|
### AI 01 (10 bodů) |
||||
|
- HTML struktura (2b) |
||||
|
- CSS Grid implementace (3b) |
||||
|
- Media queries (2b) |
||||
|
- Pokročilé selektory (2b) |
||||
|
- Responzivita (1b) |
||||
|
|
||||
|
### AI 02 (15 bodů) |
||||
|
- Sémantická struktura (4b) |
||||
|
- Position: fixed, sticky (3b) |
||||
|
- Position: relative, absolute (3b) |
||||
|
- CSS jednotky (rem, em, vh) (2b) |
||||
|
- Responzivita (3b) |
||||
|
|
||||
|
### AI 03 (20 bodů) |
||||
|
- addEventListener použití (4b) |
||||
|
- Validační funkce (6b) |
||||
|
- RegEx implementace (3b) |
||||
|
- Visual feedback (4b) |
||||
|
- Submit handling (3b) |
||||
|
|
||||
|
### AI 04 (30 bodů) |
||||
|
- HTML struktura (5b) |
||||
|
- CSS Grid & Flexbox (6b) |
||||
|
- Positioning (4b) |
||||
|
- JavaScript interaktivita (6b) |
||||
|
- Responzivita (4b) |
||||
|
- Design & UX (3b) |
||||
|
- Clean code (2b) |
||||
|
|
||||
|
**Celkem: 75 bodů** |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 💡 Tips pro učitele |
||||
|
|
||||
|
### Při výuce AI 01: |
||||
|
1. Začněte s vysvětlením rozdílu Grid vs Flexbox |
||||
|
2. Ukažte Chrome DevTools - Grid overlay |
||||
|
3. Procvičte nth-child na příkladech |
||||
|
4. Zdůrazněte mobile-first přístup |
||||
|
|
||||
|
### Při výuce AI 02: |
||||
|
1. Narýsujte positioning na tabuli (fixed, sticky, relative, absolute) |
||||
|
2. Ukažte proč používat rem místo px |
||||
|
3. Vysvětlete z-index context |
||||
|
4. Zdůrazněte důležitost sémantiky pro SEO |
||||
|
|
||||
|
### Při výuce AI 03: |
||||
|
1. Živě ukažte addEventListener vs onclick |
||||
|
2. Procvičte RegEx na regex101.com |
||||
|
3. Vysvětlete event.preventDefault() |
||||
|
4. Ukažte console.log() debugging |
||||
|
|
||||
|
### Při výuce AI 04: |
||||
|
1. Nechte studenty pracovat samostatně |
||||
|
2. Buďte dostupní pro konzultace |
||||
|
3. Povzbuďte kreativitu |
||||
|
4. Na konci nechte studenty prezentovat |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🔧 Troubleshooting - Časté problémy studentů |
||||
|
|
||||
|
### CSS Grid: |
||||
|
**Problem:** "Grid nefunguje" |
||||
|
**Řešení:** Zkontrolujte `display: grid` na kontejneru, ne na položkách |
||||
|
|
||||
|
### Positioning: |
||||
|
**Problem:** "Absolute element je mimo stránku" |
||||
|
**Řešení:** Parent musí mít `position: relative` |
||||
|
|
||||
|
### addEventListener: |
||||
|
**Problem:** "Funkce se volá hned při načtení" |
||||
|
**Řešení:** Nepsat `validateName()` ale jen `validateName` (bez závorek) |
||||
|
|
||||
|
### RegEx: |
||||
|
**Problem:** "RegEx nefunguje" |
||||
|
**Řešení:** Otestujte na regex101.com, možná chybí escape znaky |
||||
|
|
||||
|
### Media queries: |
||||
|
**Problem:** "Responzivita nefunguje" |
||||
|
**Řešení:** Zkontrolujte `<meta name="viewport">` v head |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📊 Očekávané výsledky |
||||
|
|
||||
|
Po dokončení všech projektů by studenti měli: |
||||
|
|
||||
|
### Znát: |
||||
|
✅ Rozdíl mezi Grid a Flexbox a kdy co použít |
||||
|
✅ Všechny typy CSS positioning |
||||
|
✅ Jak vytvořit responzivní layout bez frameworku |
||||
|
✅ Jak validovat formuláře v JavaScriptu |
||||
|
✅ addEventListener a event handling |
||||
|
✅ Základy RegEx |
||||
|
✅ Mobile-first přístup |
||||
|
|
||||
|
### Umět: |
||||
|
✅ Vytvořit komplexní responzivní stránku |
||||
|
✅ Implementovat interaktivní funkce |
||||
|
✅ Validovat formuláře s visual feedbackem |
||||
|
✅ Používat pokročilé CSS selektory |
||||
|
✅ Debugovat pomocí Developer Tools |
||||
|
|
||||
|
### Být připraveni na: |
||||
|
✅ Bootstrap grid systém (pochopí jak funguje) |
||||
|
✅ Bootstrap komponenty (pochopí co řeší) |
||||
|
✅ Bootstrap utilities (pochopí proč existují) |
||||
|
✅ Přizpůsobení frameworku vlastním potřebám |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎯 Přechod na Bootstrap |
||||
|
|
||||
|
Po dokončení AI projektů vysvětlete studentům: |
||||
|
|
||||
|
1. **Co Bootstrap řeší:** |
||||
|
- "Vzpomínáte, jak jste v AI 01 vytvářeli grid systém? Bootstrap to má už hotové." |
||||
|
- "Vzpomínáte na validaci formuláře v AI 03? Bootstrap má validační třídy." |
||||
|
|
||||
|
2. **Proč jsme to dělali ručně:** |
||||
|
- "Teď rozumíte, co Bootstrap dělá pod kapotou." |
||||
|
- "Když něco nebude fungovat, budete vědět proč." |
||||
|
- "Umíte to bez frameworku = jste lepší developer." |
||||
|
|
||||
|
3. **Kdy použít Bootstrap vs custom CSS:** |
||||
|
- Bootstrap: Rychlé prototypování, standardní projekty |
||||
|
- Custom: Unikátní design, optimalizace, portfolio projekty |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📞 Podpora |
||||
|
|
||||
|
Pokud najdete chyby v projektech nebo máte návrhy na zlepšení, kontaktujte: |
||||
|
- GitHub Issues v repozitáři |
||||
|
- Email učiteli |
||||
|
- Během konzultačních hodin |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📝 Poznámky k implementaci |
||||
|
|
||||
|
### Struktura souborů: |
||||
|
``` |
||||
|
ai_XX_project_name/ |
||||
|
├── ZADANI.md # Detailní zadání pro studenty |
||||
|
├── index.html # Startovací HTML (s TODO komentáři) |
||||
|
├── style.css # CSS šablona (s TODO komentáři) |
||||
|
├── script.js # JS šablona (s TODO komentáři) |
||||
|
├── reseni.html # Kompletní řešení |
||||
|
├── reseni.css # CSS s podrobnými komentáři |
||||
|
└── reseni.js # JS s podrobnými komentáři |
||||
|
``` |
||||
|
|
||||
|
### Filozofie: |
||||
|
- **Startovací soubory** obsahují TODO a strukturu |
||||
|
- **Řešení** obsahuje detailní komentáře vysvětlující každý řádek |
||||
|
- **ZADANI.md** obsahuje learning objectives a užitečné odkazy |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 🎉 Závěr |
||||
|
|
||||
|
Tyto projekty důkladně připraví studenty na Bootstrap. Investovaný čas se vrátí v: |
||||
|
- Lepším pochopení frameworku |
||||
|
- Schopnosti přizpůsobení |
||||
|
- Debugovacích dovednostech |
||||
|
- Celkově lepších web development skills |
||||
|
|
||||
|
**Hodně štěstí při výuce!** 🚀 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
Vytvořeno: 24. října 2025 |
||||
|
Předmět: Webové Technologie (WTL) |
||||
|
Cílová skupina: 3. ročník IT |
||||
@ -0,0 +1,158 @@ |
|||||
|
# AI 01 - CSS Grid & Responzivní Layout |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
|
||||
|
Naučit se pracovat s **CSS Grid systémem** a **pokročilými CSS selektory**, které jsou důležité pro pochopení Bootstrap grid systému. |
||||
|
|
||||
|
## 📋 Co se naučíte |
||||
|
|
||||
|
- **CSS Grid základy** - `display: grid`, `grid-template-columns` |
||||
|
- **Grid gaps** - mezery mezi položkami |
||||
|
- **Responzivní grid** s media queries |
||||
|
- **Pokročilé CSS selektory** - `:nth-child()`, `:first-child`, `:last-child` |
||||
|
- **CSS transformace** - `scale()` při hover |
||||
|
- **Grid template areas** - pojmenované oblasti |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- **ZADANI.md** - detailní zadání projektu s požadavky |
||||
|
- **index.html** - startovací HTML soubor (s TODO komentáři pro vás) |
||||
|
- **style.css** - CSS šablona (s TODO komentáři) |
||||
|
- **reseni.html** - kompletní řešení (podívejte se, když zaseknete) |
||||
|
- **reseni.css** - CSS s podrobnými komentáři vysvětlující každý řádek |
||||
|
|
||||
|
## 🚀 Jak pracovat s projektem |
||||
|
|
||||
|
### Krok 1: Přečtěte si ZADANI.md |
||||
|
- Otevřete `ZADANI.md` a přečtěte si celé zadání |
||||
|
- Pochopte, co máte vytvořit |
||||
|
- Prohlédněte si ukázky kódu |
||||
|
|
||||
|
### Krok 2: Začněte s index.html a style.css |
||||
|
- Otevřete `index.html` a `style.css` |
||||
|
- Najděte **TODO komentáře** - to jsou místa, kde máte psát kód |
||||
|
- Postupujte podle TODO instrukcí |
||||
|
|
||||
|
### Krok 3: Testujte responzivitu |
||||
|
1. Otevřete `index.html` v prohlížeči |
||||
|
2. Otevřete Developer Tools (F12) |
||||
|
3. Zapněte Device Toolbar (Ctrl+Shift+M) |
||||
|
4. Testujte různé velikosti: |
||||
|
- Desktop (> 768px) - 3 sloupce |
||||
|
- Tablet (768px) - 2 sloupce |
||||
|
- Mobil (480px) - 1 sloupec |
||||
|
|
||||
|
### Krok 4: Když se zaseknete |
||||
|
- Podívejte se do `reseni.css` - jsou tam podrobné komentáře |
||||
|
- Zkuste pochopit PROČ to funguje, ne jen zkopírovat |
||||
|
- Porovnejte své řešení s hotovým |
||||
|
|
||||
|
## 💡 Klíčové koncepty |
||||
|
|
||||
|
### CSS Grid pattern: |
||||
|
```css |
||||
|
/* Kontejner */ |
||||
|
.grid-container { |
||||
|
display: grid; /* MUSÍ BÝT! */ |
||||
|
grid-template-columns: repeat(3, 1fr); /* 3 sloupce */ |
||||
|
gap: 20px; /* mezery */ |
||||
|
} |
||||
|
|
||||
|
/* Položky se umístí automaticky */ |
||||
|
.grid-item { |
||||
|
background-color: lightblue; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Responzivní breakpointy: |
||||
|
```css |
||||
|
/* Desktop (výchozí) - 3 sloupce */ |
||||
|
.grid-container { |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
} |
||||
|
|
||||
|
/* Tablet */ |
||||
|
@media (max-width: 768px) { |
||||
|
.grid-container { |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Mobil */ |
||||
|
@media (max-width: 480px) { |
||||
|
.grid-container { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Pokročilé selektory: |
||||
|
```css |
||||
|
/* Liché položky (1, 3, 5, ...) */ |
||||
|
.grid-item:nth-child(odd) { |
||||
|
background-color: lightblue; |
||||
|
} |
||||
|
|
||||
|
/* Sudé položky (2, 4, 6, ...) */ |
||||
|
.grid-item:nth-child(even) { |
||||
|
background-color: lightgreen; |
||||
|
} |
||||
|
|
||||
|
/* První položka */ |
||||
|
.grid-item:first-child { |
||||
|
background-color: gold; |
||||
|
} |
||||
|
|
||||
|
/* Poslední položka */ |
||||
|
.grid-item:last-child { |
||||
|
background-color: pink; |
||||
|
} |
||||
|
|
||||
|
/* Hover efekt */ |
||||
|
.grid-item:hover { |
||||
|
transform: scale(1.05); /* zvětší o 5% */ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Časté chyby |
||||
|
|
||||
|
❌ **Grid nefunguje** |
||||
|
→ Zapomněli jste `display: grid` na kontejneru |
||||
|
|
||||
|
❌ **Responzivita nefunguje** |
||||
|
→ Chybí `<meta name="viewport">` v `<head>` |
||||
|
|
||||
|
❌ **nth-child nefunguje** |
||||
|
→ Zkontrolujte syntax: `:nth-child(odd)` ne `.nth-child(odd)` |
||||
|
|
||||
|
❌ **Gap nefunguje** |
||||
|
→ `gap` funguje pouze v grid/flex containeru |
||||
|
|
||||
|
## 🎓 Hodnocení (10 bodů) |
||||
|
|
||||
|
- **HTML struktura** (2b) - správná struktura, 9+ položek |
||||
|
- **CSS Grid implementace** (3b) - grid-template-columns, gap |
||||
|
- **Media queries** (2b) - 3 breakpointy (desktop, tablet, mobil) |
||||
|
- **Pokročilé selektory** (2b) - nth-child, first/last-child, hover |
||||
|
- **Responzivita** (1b) - funguje na všech zařízeních |
||||
|
|
||||
|
## 🔗 Užitečné odkazy |
||||
|
|
||||
|
- [CSS Grid Guide - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) |
||||
|
- [nth-child selector - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) |
||||
|
- [CSS Transform - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas |
||||
|
|
||||
|
**45-60 minut** |
||||
|
|
||||
|
## 🎯 Po dokončení |
||||
|
|
||||
|
Po dokončení tohoto projektu budete rozumět: |
||||
|
- Jak funguje CSS Grid (základ pro Bootstrap grid) |
||||
|
- Jak vytvořit responzivní layout bez frameworku |
||||
|
- Pokročilé CSS selektory |
||||
|
|
||||
|
➡️ **Další projekt:** AI 02 - Sémantické HTML5 & CSS Positioning |
||||
@ -0,0 +1,49 @@ |
|||||
|
# AI 01 - CSS Grid & Responzivní Layout |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
Naučit se pracovat s CSS Grid systémem a pokročilými CSS selektory, které jsou důležité pro pochopení Bootstrap grid systému. |
||||
|
|
||||
|
## 📝 Zadání |
||||
|
|
||||
|
Vytvořte responzivní галерию obrázků s následujícími vlastnostmi: |
||||
|
|
||||
|
### HTML požadavky: |
||||
|
1. Vytvořte stránku s hlavičkou (h1) "Galerie Obrázků" |
||||
|
2. Vytvořte grid kontejner s minimálně 9 položkami (divy s třídou "grid-item") |
||||
|
3. Každá položka má obsahovat: |
||||
|
- Číslo položky (h3) |
||||
|
- Text "Obsah položky" (p) |
||||
|
- Barvu pozadí (přes CSS) |
||||
|
|
||||
|
### CSS požadavky: |
||||
|
|
||||
|
#### Grid Layout: |
||||
|
- Použijte `display: grid` |
||||
|
- Na desktopu: 3 sloupce se stejnou šířkou |
||||
|
- Na tabletu (max-width: 768px): 2 sloupce |
||||
|
- Na mobilu (max-width: 480px): 1 sloupec |
||||
|
- Mezery mezi položkami: 20px |
||||
|
|
||||
|
#### Pokročilé selektory: |
||||
|
Použijte tyto selektory pro obarvení položek: |
||||
|
- `.grid-item:nth-child(odd)` - liché položky -> světle modrá |
||||
|
- `.grid-item:nth-child(even)` - sudé položky -> světle zelená |
||||
|
- `.grid-item:first-child` - první položka -> zlatá |
||||
|
- `.grid-item:last-child` - poslední položka -> růžová |
||||
|
- `.grid-item:hover` - při najetí myší -> ztmavnout + zvětšit o 5% |
||||
|
|
||||
|
#### Extra výzva: |
||||
|
- Použijte `grid-template-areas` pro vytvoření speciálního layoutu, kde první položka zabírá 2 sloupce |
||||
|
|
||||
|
## 💡 Co se naučíte: |
||||
|
- CSS Grid základy (display: grid, grid-template-columns) |
||||
|
- Grid gaps (mezery) |
||||
|
- Responzivní grid s media queries |
||||
|
- Pokročilé CSS selektory (nth-child, first-child, last-child) |
||||
|
- CSS transformace (scale při hover) |
||||
|
|
||||
|
## 🔗 Užitečné odkazy: |
||||
|
- CSS Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid/ |
||||
|
- nth-child selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas: 45-60 minut |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 01 - CSS Grid Galerie</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Galerie Obrázků</h1> |
||||
|
|
||||
|
<!-- TODO: Zde začněte pracovat --> |
||||
|
<!-- Vytvořte kontejner s třídou "grid-container" --> |
||||
|
<!-- Vytvořte 9 divů s třídou "grid-item" --> |
||||
|
<!-- Každý div má obsahovat h3 s číslem a p s textem --> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,151 @@ |
|||||
|
/* AI 01 - CSS Grid & Responzivní Layout - ŘEŠENÍ */ |
||||
|
|
||||
|
/* Základní styly pro body */ |
||||
|
body { |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
margin: 0; |
||||
|
padding: 20px; |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
/* Grid kontejner */ |
||||
|
.grid-container { |
||||
|
/* Display grid aktivuje grid layout */ |
||||
|
display: grid; |
||||
|
|
||||
|
/* Vytvoří 3 sloupce se stejnou šířkou (1fr = 1 fraction/část) */ |
||||
|
grid-template-columns: 1fr 1fr 1fr; |
||||
|
/* Alternativně: repeat(3, 1fr) - opakuje 1fr třikrát */ |
||||
|
|
||||
|
/* Gap vytváří mezery mezi grid položkami */ |
||||
|
gap: 20px; |
||||
|
/* Alternativně: grid-gap: 20px; (starší syntax) */ |
||||
|
|
||||
|
/* Maximální šířka kontejneru */ |
||||
|
max-width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
/* Styling jednotlivých grid položek */ |
||||
|
.grid-item { |
||||
|
/* Základní styling */ |
||||
|
background-color: white; |
||||
|
padding: 30px; |
||||
|
border-radius: 10px; |
||||
|
text-align: center; |
||||
|
|
||||
|
/* Box shadow pro hezčí vzhled */ |
||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
/* Transition pro plynulé animace */ |
||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.grid-item h3 { |
||||
|
margin-top: 0; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.grid-item p { |
||||
|
color: #666; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/* POKROČILÉ SELEKTORY */ |
||||
|
|
||||
|
/* nth-child(odd) = liché položky (1, 3, 5, 7, 9) */ |
||||
|
.grid-item:nth-child(odd) { |
||||
|
background-color: #e3f2fd; /* světle modrá */ |
||||
|
} |
||||
|
|
||||
|
/* nth-child(even) = sudé položky (2, 4, 6, 8) */ |
||||
|
.grid-item:nth-child(even) { |
||||
|
background-color: #e8f5e9; /* světle zelená */ |
||||
|
} |
||||
|
|
||||
|
/* first-child = první položka */ |
||||
|
.grid-item:first-child { |
||||
|
background-color: #ffd700; /* zlatá */ |
||||
|
/* Můžeme použít grid-column pro natažení přes 2 sloupce */ |
||||
|
grid-column: span 2; |
||||
|
} |
||||
|
|
||||
|
/* last-child = poslední položka */ |
||||
|
.grid-item:last-child { |
||||
|
background-color: #ffb6c1; /* růžová */ |
||||
|
} |
||||
|
|
||||
|
/* Hover efekt - při najetí myší */ |
||||
|
.grid-item:hover { |
||||
|
/* Transform scale zvětší element o 5% (1.05 = 105%) */ |
||||
|
transform: scale(1.05); |
||||
|
|
||||
|
/* Větší shadow při hover */ |
||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
||||
|
|
||||
|
/* Můžeme také změnit kurzor */ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* MEDIA QUERIES - Responzivita */ |
||||
|
|
||||
|
/* Tablet - maximální šířka 768px */ |
||||
|
@media only screen and (max-width: 768px) { |
||||
|
.grid-container { |
||||
|
/* Na tabletu jen 2 sloupce */ |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
/* Alternativně: repeat(2, 1fr) */ |
||||
|
} |
||||
|
|
||||
|
/* První položka už nezabírá 2 sloupce na tabletu */ |
||||
|
.grid-item:first-child { |
||||
|
grid-column: span 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Mobil - maximální šířka 480px */ |
||||
|
@media only screen and (max-width: 480px) { |
||||
|
body { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.grid-container { |
||||
|
/* Na mobilu jen 1 sloupec */ |
||||
|
grid-template-columns: 1fr; |
||||
|
|
||||
|
/* Menší gap na mobilu */ |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.grid-item { |
||||
|
/* Menší padding na mobilu */ |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* BONUS: Další užitečné selektory */ |
||||
|
|
||||
|
/* Každá třetí položka (3, 6, 9) */ |
||||
|
/* .grid-item:nth-child(3n) { |
||||
|
border: 3px solid #ff6b6b; |
||||
|
} */ |
||||
|
|
||||
|
/* Všechny položky kromě první */ |
||||
|
/* .grid-item:not(:first-child) { |
||||
|
opacity: 0.9; |
||||
|
} */ |
||||
|
|
||||
|
/* První 3 položky */ |
||||
|
/* .grid-item:nth-child(-n+3) { |
||||
|
font-weight: bold; |
||||
|
} */ |
||||
@ -0,0 +1,51 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 01 - CSS Grid Galerie - ŘEŠENÍ</title> |
||||
|
<link rel="stylesheet" href="reseni.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Galerie Obrázků</h1> |
||||
|
|
||||
|
<div class="grid-container"> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 1</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 2</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 3</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 4</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 5</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 6</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 7</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 8</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<h3>Položka 9</h3> |
||||
|
<p>Obsah položky</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,50 @@ |
|||||
|
/* AI 01 - CSS Grid & Responzivní Layout */ |
||||
|
|
||||
|
/* Základní styly pro body */ |
||||
|
body { |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
margin: 0; |
||||
|
padding: 20px; |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
/* TODO: Zde začněte pracovat s Grid */ |
||||
|
|
||||
|
/* 1. Vytvořte .grid-container s display: grid */ |
||||
|
|
||||
|
|
||||
|
/* 2. Nastavte grid-template-columns pro 3 sloupce (desktop) */ |
||||
|
|
||||
|
|
||||
|
/* 3. Nastavte gap (mezery) mezi položkami na 20px */ |
||||
|
|
||||
|
|
||||
|
/* 4. Nastylujte .grid-item */ |
||||
|
|
||||
|
|
||||
|
/* 5. Použijte pokročilé selektory pro obarvení */ |
||||
|
/* .grid-item:nth-child(odd) - liché položky */ |
||||
|
|
||||
|
|
||||
|
/* .grid-item:nth-child(even) - sudé položky */ |
||||
|
|
||||
|
|
||||
|
/* .grid-item:first-child - první položka */ |
||||
|
|
||||
|
|
||||
|
/* .grid-item:last-child - poslední položka */ |
||||
|
|
||||
|
|
||||
|
/* .grid-item:hover - hover efekt */ |
||||
|
|
||||
|
|
||||
|
/* 6. Media query pro tablet (max-width: 768px) - 2 sloupce */ |
||||
|
|
||||
|
|
||||
|
/* 7. Media query pro mobil (max-width: 480px) - 1 sloupec */ |
||||
@ -0,0 +1,221 @@ |
|||||
|
# AI 02 - Sémantické HTML5 & CSS Positioning |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
|
||||
|
Naučit se používat **sémantické HTML5 elementy** a **CSS positioning** (absolute, relative, fixed, sticky), které jsou důležité pro moderní webový vývoj a Bootstrap. |
||||
|
|
||||
|
## 📋 Co se naučíte |
||||
|
|
||||
|
- **Sémantické HTML5 elementy** - `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>` |
||||
|
- **CSS Positioning** - `fixed`, `sticky`, `relative`, `absolute` |
||||
|
- **CSS jednotky** - `rem`, `em`, `vh`, `vw` (ne jen `px`!) |
||||
|
- **Strukturu moderní webové stránky** |
||||
|
- **Z-index** - vrstvení elementů |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- **ZADANI.md** - detailní zadání projektu |
||||
|
- **index.html** - startovací HTML (s TODO komentáři) |
||||
|
- **style.css** - CSS šablona (s TODO komentáři) |
||||
|
- **reseni.html** - kompletní řešení |
||||
|
- **reseni.css** - CSS s podrobnými komentáři |
||||
|
|
||||
|
## 🚀 Jak pracovat s projektem |
||||
|
|
||||
|
### Krok 1: Přečtěte si ZADANI.md |
||||
|
- Pochopte, jaké elementy máte vytvořit |
||||
|
- Projděte si požadavky na positioning |
||||
|
|
||||
|
### Krok 2: Vytvořte strukturu stránky |
||||
|
Vytvořte **portfolio stránku** s těmito sekcemi: |
||||
|
1. **`<nav>`** - fixní navigace nahoře |
||||
|
2. **`<header>`** - úvodní sekce (hero) |
||||
|
3. **`<main>`** s `<section>` elementy: |
||||
|
- O mně |
||||
|
- Projekty (s `<article>` elementy) |
||||
|
- Kontakt |
||||
|
4. **`<aside>`** - sticky boční panel |
||||
|
5. **`<footer>`** - zápatí |
||||
|
|
||||
|
### Krok 3: Aplikujte CSS Positioning |
||||
|
|
||||
|
**Fixed navigace:** |
||||
|
```css |
||||
|
nav { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
z-index: 1000; /* nad ostatními elementy */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Sticky aside:** |
||||
|
```css |
||||
|
aside { |
||||
|
position: sticky; |
||||
|
top: 100px; /* od vrcholu po scrollování */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Absolute badge:** |
||||
|
```css |
||||
|
.project { |
||||
|
position: relative; /* kontejner */ |
||||
|
} |
||||
|
|
||||
|
.badge { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Krok 4: Použijte moderní jednotky |
||||
|
```css |
||||
|
/* ❌ Staré (pouze px) */ |
||||
|
font-size: 16px; |
||||
|
padding: 20px; |
||||
|
height: 600px; |
||||
|
|
||||
|
/* ✅ Moderní (rem, em, vh) */ |
||||
|
font-size: 1rem; /* 16px (skaluje s root) */ |
||||
|
padding: 1.25rem; /* 20px */ |
||||
|
height: 60vh; /* 60% výšky viewportu */ |
||||
|
``` |
||||
|
|
||||
|
## 💡 Klíčové koncepty |
||||
|
|
||||
|
### Sémantické HTML5 elementy: |
||||
|
|
||||
|
```html |
||||
|
<!-- ✅ SPRÁVNĚ - sémantické --> |
||||
|
<nav> |
||||
|
<a href="#home">Domů</a> |
||||
|
</nav> |
||||
|
|
||||
|
<main> |
||||
|
<section id="about"> |
||||
|
<h2>O mně</h2> |
||||
|
<article>...</article> |
||||
|
</section> |
||||
|
</main> |
||||
|
|
||||
|
<aside>Boční panel</aside> |
||||
|
|
||||
|
<footer>© 2025</footer> |
||||
|
|
||||
|
<!-- ❌ ŠPATNĚ - nesémantické --> |
||||
|
<div class="nav"> |
||||
|
<a href="#home">Domů</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="main"> |
||||
|
<div class="section">...</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
### CSS Positioning: |
||||
|
|
||||
|
**Static (výchozí):** |
||||
|
- Normální tok dokumentu |
||||
|
- Nelze posunout pomocí top/left/right/bottom |
||||
|
|
||||
|
**Relative:** |
||||
|
- Relativní k původní pozici |
||||
|
- Nezabírá místo v místě posunutí |
||||
|
```css |
||||
|
.element { |
||||
|
position: relative; |
||||
|
top: 20px; /* posune se 20px dolů od původní pozice */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Absolute:** |
||||
|
- Absolutní k nejbližšímu pozicovanému rodiči |
||||
|
- Vyjmut z normálního toku |
||||
|
```css |
||||
|
.parent { |
||||
|
position: relative; /* !! důležité !! */ |
||||
|
} |
||||
|
|
||||
|
.child { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Fixed:** |
||||
|
- Fixní k viewportu |
||||
|
- Zůstává na místě při scrollování |
||||
|
```css |
||||
|
.navbar { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Sticky:** |
||||
|
- Kombinace relative a fixed |
||||
|
- Sticky když dojedete na určitou pozici |
||||
|
```css |
||||
|
.sidebar { |
||||
|
position: sticky; |
||||
|
top: 20px; /* zůstane 20px od vrcholu */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### CSS Jednotky: |
||||
|
|
||||
|
| Jednotka | Popis | Použití | |
||||
|
|----------|-------|---------| |
||||
|
| `px` | Pixel (absolutní) | Borders, malé hodnoty | |
||||
|
| `rem` | Relativní k root font-size | Font sizes, paddingy | |
||||
|
| `em` | Relativní k parent font-size | Specifické případy | |
||||
|
| `%` | Procenta z parenta | Šířky, výšky | |
||||
|
| `vh` | 1% výšky viewportu | Full-screen sekce | |
||||
|
| `vw` | 1% šířky viewportu | Responzivní šířky | |
||||
|
|
||||
|
## ⚠️ Časté chyby |
||||
|
|
||||
|
❌ **Absolute element není kde má být** |
||||
|
→ Zapomněli jste `position: relative` na rodiče |
||||
|
|
||||
|
❌ **Fixed navigace překrývá obsah** |
||||
|
→ Přidejte `padding-top` na body nebo main |
||||
|
|
||||
|
❌ **Sticky nefunguje** |
||||
|
→ Zkontrolujte, že má rodič dostatek výšky na scrollování |
||||
|
|
||||
|
❌ **Z-index nefunguje** |
||||
|
→ Funguje pouze na pozicovaných elementech (ne static) |
||||
|
|
||||
|
## 🎓 Hodnocení (15 bodů) |
||||
|
|
||||
|
- **Sémantická struktura** (4b) - správné použití nav, main, section, article, aside, footer |
||||
|
- **Position: fixed, sticky** (3b) - fixní navigace, sticky aside |
||||
|
- **Position: relative, absolute** (3b) - badge na projektu |
||||
|
- **CSS jednotky (rem, em, vh)** (2b) - použití místo px |
||||
|
- **Responzivita** (3b) - aside zmizí na mobilu, funguje na všech zařízeních |
||||
|
|
||||
|
## 🔗 Užitečné odkazy |
||||
|
|
||||
|
- [HTML5 Semantic Elements - W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp) |
||||
|
- [CSS Position - CSS Tricks](https://css-tricks.com/almanac/properties/p/position/) |
||||
|
- [CSS Units - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas |
||||
|
|
||||
|
**60-90 minut** |
||||
|
|
||||
|
## 🎯 Po dokončení |
||||
|
|
||||
|
Po dokončení tohoto projektu budete rozumět: |
||||
|
- Sémantické HTML5 (důležité pro SEO a přístupnost) |
||||
|
- Všem typům CSS positioning |
||||
|
- Moderním CSS jednotkám (rem, vh, vw) |
||||
|
- Jak vytvořit sticky/fixed elementy |
||||
|
|
||||
|
➡️ **Další projekt:** AI 03 - Pokročilá Validace Formulářů s JavaScript |
||||
@ -0,0 +1,67 @@ |
|||||
|
# AI 02 - Sémantické HTML5 & CSS Positioning |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
Naučit se používat sémantické HTML5 elementy a CSS positioning (absolute, relative, fixed, sticky), které jsou důležité pro moderní webový vývoj a Bootstrap. |
||||
|
|
||||
|
## 📝 Zadání |
||||
|
|
||||
|
Vytvořte jednoduchou osobní portfolio stránku s následujícími sekcemi: |
||||
|
|
||||
|
### HTML požadavky - Použijte SÉMANTICKÉ elementy: |
||||
|
|
||||
|
1. **`<nav>`** - Navigační menu (fixní nahoře) |
||||
|
- Logo (h2) |
||||
|
- 4 odkazy: Domů, O mně, Projekty, Kontakt |
||||
|
|
||||
|
2. **`<header>`** - Úvodní sekce |
||||
|
- Hlavní nadpis s vaším jménem (h1) |
||||
|
- Podnadpis s profesí (p) |
||||
|
- Tlačítko "Více o mně" |
||||
|
|
||||
|
3. **`<main>`** - Hlavní obsah stránky obsahující: |
||||
|
|
||||
|
**`<section id="about">`** - O mně |
||||
|
- Nadpis (h2) |
||||
|
- 2-3 odstavce textu (p) |
||||
|
- Obrázek (placeholder: https://via.placeholder.com/300) |
||||
|
|
||||
|
**`<section id="projects">`** - Projekty |
||||
|
- Nadpis (h2) |
||||
|
- 3x `<article>` s projekty |
||||
|
- Každý article má: h3 (název), p (popis), obrázek |
||||
|
|
||||
|
**`<section id="contact">`** - Kontakt |
||||
|
- Nadpis (h2) |
||||
|
- Formulář (jméno, email, zpráva, tlačítko) |
||||
|
|
||||
|
4. **`<footer>`** - Zápatí |
||||
|
- Copyright text |
||||
|
- Sociální sítě odkazy |
||||
|
|
||||
|
5. **`<aside>`** - Boční panel (sticky) |
||||
|
- "Rychlé info" |
||||
|
- Email, Telefon, Lokace |
||||
|
|
||||
|
### CSS Positioning požadavky: |
||||
|
|
||||
|
1. **`position: fixed`** - Navigace zůstává nahoře při scrollování |
||||
|
2. **`position: sticky`** - Aside zůstává viditelný při scrollování (od určitého bodu) |
||||
|
3. **`position: relative`** - Kontejner pro absolutně pozicované elementy |
||||
|
4. **`position: absolute`** - Badge "NOVÝ!" u jednoho projektu |
||||
|
|
||||
|
### Design požadavky: |
||||
|
- Použijte jednotky: rem, em, vh (ne jen px!) |
||||
|
- Přidejte barvy a odstupy pro přehlednost |
||||
|
- Responzivní (aside zmizí na mobilu) |
||||
|
|
||||
|
## 💡 Co se naučíte: |
||||
|
- Sémantické HTML5 elementy (nav, main, section, article, aside) |
||||
|
- CSS Positioning (fixed, sticky, relative, absolute) |
||||
|
- CSS jednotky (rem, em, vh, vw) |
||||
|
- Strukturu moderní webové stránky |
||||
|
|
||||
|
## 🔗 Užitečné odkazy: |
||||
|
- HTML5 Semantic Elements: https://www.w3schools.com/html/html5_semantic_elements.asp |
||||
|
- CSS Position: https://css-tricks.com/almanac/properties/p/position/ |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas: 60-90 minut |
||||
@ -0,0 +1,36 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 02 - Portfolio</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- TODO: Začněte zde --> |
||||
|
|
||||
|
<!-- 1. Vytvořte <nav> s navigací --> |
||||
|
|
||||
|
|
||||
|
<!-- 2. Vytvořte <header> s úvodní sekcí --> |
||||
|
|
||||
|
|
||||
|
<!-- 3. Vytvořte <main> s hlavním obsahem --> |
||||
|
|
||||
|
<!-- 3a. <section id="about"> - O mně --> |
||||
|
|
||||
|
|
||||
|
<!-- 3b. <section id="projects"> - Projekty (obsahuje 3x <article>) --> |
||||
|
|
||||
|
|
||||
|
<!-- 3c. <section id="contact"> - Kontakt s formulářem --> |
||||
|
|
||||
|
|
||||
|
<!-- 4. Vytvořte <aside> s rychlými informacemi (bude sticky) --> |
||||
|
|
||||
|
|
||||
|
<!-- 5. Vytvořte <footer> se zápatím --> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,422 @@ |
|||||
|
/* AI 02 - Sémantické HTML5 & CSS Positioning - ŘEŠENÍ */ |
||||
|
|
||||
|
/* ============================================ |
||||
|
ZÁKLADNÍ RESET A NASTAVENÍ |
||||
|
============================================ */ |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* Root font-size pro REM jednotky */ |
||||
|
html { |
||||
|
font-size: 16px; /* 1rem = 16px */ |
||||
|
scroll-behavior: smooth; /* Plynulé scrollování k kotevním odkazům */ |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
||||
|
line-height: 1.6; |
||||
|
color: #333; |
||||
|
/* Padding-top kvůli fixní navigaci */ |
||||
|
padding-top: 4rem; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
NAVIGACE - position: fixed |
||||
|
============================================ */ |
||||
|
nav { |
||||
|
/* FIXED positioning - zůstává na stejném místě při scrollování */ |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
width: 100%; |
||||
|
|
||||
|
background-color: #2c3e50; |
||||
|
padding: 1rem 0; |
||||
|
z-index: 1000; /* Vysoký z-index aby byl nav nad vším ostatním */ |
||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.nav-container { |
||||
|
max-width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
padding: 0 2rem; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
color: white; |
||||
|
font-size: 1.5rem; /* 24px (16px * 1.5) */ |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.nav-links { |
||||
|
display: flex; |
||||
|
list-style: none; |
||||
|
gap: 2rem; /* Mezery mezi položkami */ |
||||
|
} |
||||
|
|
||||
|
.nav-links a { |
||||
|
color: white; |
||||
|
text-decoration: none; |
||||
|
font-size: 1rem; |
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nav-links a:hover { |
||||
|
color: #3498db; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
HEADER - Úvodní sekce |
||||
|
============================================ */ |
||||
|
header { |
||||
|
/* vh jednotka = viewport height (výška viewportu) */ |
||||
|
height: 100vh; /* Celá výška obrazovky */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
header h1 { |
||||
|
font-size: 3rem; /* 48px */ |
||||
|
margin-bottom: 1rem; |
||||
|
animation: fadeInDown 1s ease; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 1.5rem; /* 24px */ |
||||
|
margin-bottom: 2rem; |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
display: inline-block; |
||||
|
padding: 0.75rem 2rem; |
||||
|
background-color: white; |
||||
|
color: #667eea; |
||||
|
text-decoration: none; |
||||
|
border-radius: 30px; |
||||
|
font-weight: bold; |
||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.btn:hover { |
||||
|
transform: translateY(-3px); |
||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
MAIN - Hlavní obsah |
||||
|
============================================ */ |
||||
|
main { |
||||
|
max-width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
padding: 0 2rem; |
||||
|
/* Margin-right pro aside (boční panel) */ |
||||
|
margin-right: 320px; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
SECTION - Jednotlivé sekce |
||||
|
============================================ */ |
||||
|
section { |
||||
|
padding: 4rem 0; /* rem jednotka (relativní k root font-size) */ |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
|
||||
|
section h2 { |
||||
|
font-size: 2.5rem; /* 40px */ |
||||
|
margin-bottom: 2rem; |
||||
|
color: #2c3e50; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* O MNĚ sekce */ |
||||
|
#about .about-content { |
||||
|
display: flex; |
||||
|
gap: 3rem; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
#about img { |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.about-text p { |
||||
|
margin-bottom: 1rem; |
||||
|
font-size: 1.1rem; |
||||
|
text-align: justify; |
||||
|
} |
||||
|
|
||||
|
/* PROJEKTY sekce */ |
||||
|
#projects .projects-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
||||
|
gap: 2rem; |
||||
|
margin-top: 2rem; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
ARTICLE - Projekt karty |
||||
|
============================================ */ |
||||
|
article.project-card { |
||||
|
background: white; |
||||
|
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
/* RELATIVE positioning - vytváří kontext pro absolute positioning */ |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
article.project-card:hover { |
||||
|
transform: translateY(-10px); |
||||
|
} |
||||
|
|
||||
|
article.project-card img { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
article.project-card h3 { |
||||
|
padding: 1rem; |
||||
|
font-size: 1.5rem; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
article.project-card p { |
||||
|
padding: 0 1rem 1.5rem; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
/* Badge "NOVÝ!" - position: absolute */ |
||||
|
.badge { |
||||
|
/* ABSOLUTE positioning - pozicuje se relativně k prvnímu parent elementu s position: relative */ |
||||
|
position: absolute; |
||||
|
top: 1rem; |
||||
|
right: 1rem; |
||||
|
|
||||
|
background-color: #e74c3c; |
||||
|
color: white; |
||||
|
padding: 0.5rem 1rem; |
||||
|
border-radius: 20px; |
||||
|
font-weight: bold; |
||||
|
font-size: 0.875rem; /* 14px */ |
||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* KONTAKT sekce */ |
||||
|
#contact { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.contact-form { |
||||
|
margin-top: 2rem; |
||||
|
} |
||||
|
|
||||
|
.form-group { |
||||
|
margin-bottom: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.form-group label { |
||||
|
display: block; |
||||
|
margin-bottom: 0.5rem; |
||||
|
font-weight: bold; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
.form-group input, |
||||
|
.form-group textarea { |
||||
|
width: 100%; |
||||
|
padding: 0.75rem; |
||||
|
border: 2px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
font-size: 1rem; |
||||
|
font-family: inherit; |
||||
|
transition: border-color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.form-group input:focus, |
||||
|
.form-group textarea:focus { |
||||
|
outline: none; |
||||
|
border-color: #667eea; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
ASIDE - Boční panel, position: sticky |
||||
|
============================================ */ |
||||
|
aside { |
||||
|
/* STICKY positioning - chová se jako relative, dokud nedosáhne určitého bodu, pak se chová jako fixed */ |
||||
|
position: sticky; |
||||
|
top: 5rem; /* Odshora (pod navigací) */ |
||||
|
|
||||
|
/* Umístění vpravo */ |
||||
|
position: fixed; |
||||
|
right: 2rem; |
||||
|
top: 6rem; |
||||
|
width: 250px; |
||||
|
|
||||
|
background-color: #f8f9fa; |
||||
|
padding: 1.5rem; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
aside h3 { |
||||
|
color: #2c3e50; |
||||
|
margin-bottom: 1.5rem; |
||||
|
font-size: 1.25rem; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
margin-bottom: 1rem; |
||||
|
padding-bottom: 1rem; |
||||
|
border-bottom: 1px solid #ddd; |
||||
|
} |
||||
|
|
||||
|
.info-item:last-child { |
||||
|
border-bottom: none; |
||||
|
margin-bottom: 0; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.info-item strong { |
||||
|
display: block; |
||||
|
color: #667eea; |
||||
|
margin-bottom: 0.25rem; |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
.info-item p { |
||||
|
color: #555; |
||||
|
margin: 0; |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
FOOTER - Zápatí |
||||
|
============================================ */ |
||||
|
footer { |
||||
|
background-color: #2c3e50; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
padding: 2rem; |
||||
|
margin-top: 4rem; |
||||
|
margin-right: 320px; /* Kvůli aside */ |
||||
|
} |
||||
|
|
||||
|
footer p { |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
|
||||
|
.social-links { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
gap: 2rem; |
||||
|
} |
||||
|
|
||||
|
.social-links a { |
||||
|
color: white; |
||||
|
text-decoration: none; |
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.social-links a:hover { |
||||
|
color: #3498db; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
ANIMACE |
||||
|
============================================ */ |
||||
|
@keyframes fadeInDown { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-20px); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
MEDIA QUERIES - Responzivita |
||||
|
============================================ */ |
||||
|
@media screen and (max-width: 768px) { |
||||
|
/* Schovat aside na menších obrazovkách */ |
||||
|
aside { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* Odstranit margin-right z main a footer */ |
||||
|
main, |
||||
|
footer { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
/* Úprava navigace */ |
||||
|
.nav-container { |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
|
||||
|
.nav-links { |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
|
||||
|
/* Zmenšit font sizes */ |
||||
|
header h1 { |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
section h2 { |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
/* O mně - stack na mobilu */ |
||||
|
#about .about-content { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
/* Kontakt - celá šířka */ |
||||
|
#contact { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 480px) { |
||||
|
body { |
||||
|
padding-top: 6rem; /* Více místa pro higher nav */ |
||||
|
} |
||||
|
|
||||
|
main { |
||||
|
padding: 0 1rem; |
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
padding: 2rem 0; |
||||
|
} |
||||
|
|
||||
|
.projects-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 02 - Portfolio - ŘEŠENÍ</title> |
||||
|
<link rel="stylesheet" href="reseni.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- NAVIGACE - Sémantický element pro navigaci --> |
||||
|
<nav> |
||||
|
<div class="nav-container"> |
||||
|
<h2 class="logo">MůjWeb</h2> |
||||
|
<ul class="nav-links"> |
||||
|
<li><a href="#home">Domů</a></li> |
||||
|
<li><a href="#about">O mně</a></li> |
||||
|
<li><a href="#projects">Projekty</a></li> |
||||
|
<li><a href="#contact">Kontakt</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- HEADER - Úvodní hlavička stránky --> |
||||
|
<header id="home"> |
||||
|
<h1>Jan Novák</h1> |
||||
|
<p class="subtitle">Web Developer & Designer</p> |
||||
|
<a href="#about" class="btn">Více o mně</a> |
||||
|
</header> |
||||
|
|
||||
|
<!-- MAIN - Hlavní obsah stránky --> |
||||
|
<main> |
||||
|
<!-- SECTION - Sémantický element pro sekci stránky --> |
||||
|
<section id="about"> |
||||
|
<h2>O mně</h2> |
||||
|
<div class="about-content"> |
||||
|
<img src="https://via.placeholder.com/300" alt="Profilový obrázek"> |
||||
|
<div class="about-text"> |
||||
|
<p>Jsem web developer s vášní pro vytváření moderních a responzivních webových stránek. Specializuji se na frontend technologie jako HTML, CSS, JavaScript a Bootstrap.</p> |
||||
|
<p>Ve volném čase se rád věnuji učení nových technologií a pracuji na open-source projektech. Mým cílem je vytvářet webové aplikace, které jsou nejen funkční, ale i esteticky příjemné.</p> |
||||
|
<p>Pokud hledáte někoho, kdo vašemu projektu dodá profesionální vzhled a špičkovou funkcionalitu, jste na správném místě!</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- SECTION - Projekty --> |
||||
|
<section id="projects"> |
||||
|
<h2>Moje Projekty</h2> |
||||
|
<div class="projects-grid"> |
||||
|
<!-- ARTICLE - Sémantický element pro samostatný obsah --> |
||||
|
<article class="project-card"> |
||||
|
<span class="badge">NOVÝ!</span> |
||||
|
<img src="https://via.placeholder.com/350x200" alt="Projekt 1"> |
||||
|
<h3>E-shop s oblečením</h3> |
||||
|
<p>Moderní e-commerce stránka s košíkem, filtrováním produktů a responzivním designem. Použité technologie: HTML, CSS, JavaScript.</p> |
||||
|
</article> |
||||
|
|
||||
|
<article class="project-card"> |
||||
|
<img src="https://via.placeholder.com/350x200" alt="Projekt 2"> |
||||
|
<h3>Portfolio fotografie</h3> |
||||
|
<p>Elegantní portfolio pro fotografa s galerií, lightboxem a plynulými animacemi. Optimalizováno pro mobily.</p> |
||||
|
</article> |
||||
|
|
||||
|
<article class="project-card"> |
||||
|
<img src="https://via.placeholder.com/350x200" alt="Projekt 3"> |
||||
|
<h3>Firemní web</h3> |
||||
|
<p>Profesionální prezentace firmy s informacemi o službách, referencemi a kontaktním formulářem.</p> |
||||
|
</article> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- SECTION - Kontakt --> |
||||
|
<section id="contact"> |
||||
|
<h2>Kontaktujte mě</h2> |
||||
|
<form class="contact-form"> |
||||
|
<div class="form-group"> |
||||
|
<label for="name">Jméno:</label> |
||||
|
<input type="text" id="name" name="name" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="email">Email:</label> |
||||
|
<input type="email" id="email" name="email" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="message">Zpráva:</label> |
||||
|
<textarea id="message" name="message" rows="5" required></textarea> |
||||
|
</div> |
||||
|
<button type="submit" class="btn">Odeslat zprávu</button> |
||||
|
</form> |
||||
|
</section> |
||||
|
</main> |
||||
|
|
||||
|
<!-- ASIDE - Boční panel s rychlými informacemi --> |
||||
|
<aside> |
||||
|
<h3>Rychlé info</h3> |
||||
|
<div class="info-item"> |
||||
|
<strong>Email:</strong> |
||||
|
<p>jan.novak@email.cz</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<strong>Telefon:</strong> |
||||
|
<p>+420 123 456 789</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<strong>Lokace:</strong> |
||||
|
<p>Praha, Česká republika</p> |
||||
|
</div> |
||||
|
</aside> |
||||
|
|
||||
|
<!-- FOOTER - Zápatí stránky --> |
||||
|
<footer> |
||||
|
<p>© 2025 Jan Novák. Všechna práva vyhrazena.</p> |
||||
|
<div class="social-links"> |
||||
|
<a href="#">Facebook</a> |
||||
|
<a href="#">LinkedIn</a> |
||||
|
<a href="#">GitHub</a> |
||||
|
</div> |
||||
|
</footer> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,54 @@ |
|||||
|
/* AI 02 - Sémantické HTML5 & CSS Positioning */ |
||||
|
|
||||
|
/* Základní reset a nastavení */ |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* TODO: Nastavte root font-size pro rem jednotky */ |
||||
|
html { |
||||
|
/* 1rem = 16px (výchozí) */ |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
line-height: 1.6; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* TODO: NAVIGACE - position: fixed */ |
||||
|
/* nav {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: HEADER - úvodní sekce */ |
||||
|
/* header {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: MAIN - hlavní obsah */ |
||||
|
/* main {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: SECTION - jednotlivé sekce */ |
||||
|
/* section {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: ARTICLE - projekty */ |
||||
|
/* article {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: ASIDE - boční panel, position: sticky */ |
||||
|
/* aside {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: FOOTER - zápatí */ |
||||
|
/* footer {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: POSITIONING */ |
||||
|
/* Vytvořte badge "NOVÝ!" s position: absolute */ |
||||
|
|
||||
|
|
||||
|
/* TODO: MEDIA QUERIES */ |
||||
|
/* Na mobilu (max-width: 768px) schovat aside */ |
||||
@ -0,0 +1,301 @@ |
|||||
|
# AI 03 - Pokročilá Validace Formulářů s JavaScript |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
|
||||
|
Naučit se **pokročilou práci s formuláři** a **JavaScript validací**. Bootstrap má vestavěné validační třídy, takže je důležité rozumět, jak validace funguje "pod kapotou". |
||||
|
|
||||
|
## 📋 Co se naučíte |
||||
|
|
||||
|
- **addEventListener** - moderní přístup místo inline `onclick` |
||||
|
- **Form validation** v JavaScriptu |
||||
|
- **RegEx** (regulární výrazy) pro validaci formátů |
||||
|
- **DOM manipulace** - `classList`, `innerHTML`, `textContent` |
||||
|
- **Event handling** - `input`, `submit` events |
||||
|
- **Real-time feedback** - validace při psaní |
||||
|
- **Visual feedback** - červená/zelená border, ikony, zprávy |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- **ZADANI.md** - detailní zadání s požadavky na validaci |
||||
|
- **index.html** - startovací HTML (s TODO komentáři) |
||||
|
- **style.css** - CSS šablona |
||||
|
- **script.js** - JavaScript šablona (s TODO komentáři) |
||||
|
- **reseni.html** - kompletní řešení |
||||
|
- **reseni.css** - CSS s komentáři |
||||
|
- **reseni.js** - JavaScript s podrobnými komentáři |
||||
|
|
||||
|
## 🚀 Jak pracovat s projektem |
||||
|
|
||||
|
### Krok 1: Přečtěte si ZADANI.md |
||||
|
- Pochopte požadavky na validaci každého pole |
||||
|
- Projděte si příklady kódu |
||||
|
|
||||
|
### Krok 2: Vytvořte registrační formulář |
||||
|
|
||||
|
Formulář obsahuje: |
||||
|
1. **Jméno** - min 3 znaky, jen písmena |
||||
|
2. **Email** - validní formát |
||||
|
3. **Heslo** - min 8 znaků, velké písmeno, číslo, speciální znak |
||||
|
4. **Potvrzení hesla** - musí se shodovat |
||||
|
5. **Věk** - 18-120 |
||||
|
6. **Souhlas s podmínkami** - checkbox |
||||
|
|
||||
|
### Krok 3: Implementujte addEventListener |
||||
|
|
||||
|
❌ **STARÝ způsob (inline):** |
||||
|
```html |
||||
|
<input type="text" onchange="validateName()"> |
||||
|
``` |
||||
|
|
||||
|
✅ **NOVÝ způsob (addEventListener):** |
||||
|
```html |
||||
|
<input type="text" id="jmeno"> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
document.getElementById("jmeno").addEventListener("input", validateName); |
||||
|
``` |
||||
|
|
||||
|
### Krok 4: Vytvořte validační funkce |
||||
|
|
||||
|
```javascript |
||||
|
// Validace jména |
||||
|
function validateName() { |
||||
|
const nameInput = document.getElementById("jmeno"); |
||||
|
const nameValue = nameInput.value; |
||||
|
const errorElement = document.getElementById("jmeno-error"); |
||||
|
|
||||
|
// Kontrola délky |
||||
|
if (nameValue.length < 3) { |
||||
|
showError(nameInput, errorElement, "Jméno musí mít alespoň 3 znaky"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola pouze písmen (RegEx) |
||||
|
const nameRegex = /^[a-zA-ZáčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ\s]+$/; |
||||
|
if (!nameRegex.test(nameValue)) { |
||||
|
showError(nameInput, errorElement, "Jméno může obsahovat pouze písmena"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Vše OK |
||||
|
showSuccess(nameInput, errorElement); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// Helper funkce |
||||
|
function showError(input, errorElement, message) { |
||||
|
input.classList.add("error"); |
||||
|
input.classList.remove("success"); |
||||
|
errorElement.textContent = message; |
||||
|
errorElement.style.display = "block"; |
||||
|
} |
||||
|
|
||||
|
function showSuccess(input, errorElement) { |
||||
|
input.classList.remove("error"); |
||||
|
input.classList.add("success"); |
||||
|
errorElement.style.display = "none"; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 💡 Klíčové koncepty |
||||
|
|
||||
|
### addEventListener vs onclick: |
||||
|
|
||||
|
```javascript |
||||
|
// ✅ MODERNÍ - addEventListener (doporučený) |
||||
|
const button = document.getElementById("myButton"); |
||||
|
button.addEventListener("click", function() { |
||||
|
console.log("Kliknuto!"); |
||||
|
}); |
||||
|
|
||||
|
// ❌ STARŠÍ - inline onclick |
||||
|
// <button onclick="handleClick()">Click</button> |
||||
|
``` |
||||
|
|
||||
|
**Výhody addEventListener:** |
||||
|
- Více listenerů na jeden element |
||||
|
- Oddělení HTML a JavaScriptu |
||||
|
- Možnost odstranit listener |
||||
|
- Lepší čitelnost |
||||
|
|
||||
|
### RegEx příklady: |
||||
|
|
||||
|
```javascript |
||||
|
// Email |
||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
emailRegex.test("user@email.com"); // true |
||||
|
|
||||
|
// Heslo (min 8 znaků, velké, malé, číslo, spec. znak) |
||||
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; |
||||
|
|
||||
|
// Pouze písmena (včetně diakritiky) |
||||
|
const nameRegex = /^[a-zA-ZáčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ\s]+$/; |
||||
|
|
||||
|
// Telefon (CZ formát) |
||||
|
const phoneRegex = /^(\+420)?[0-9]{9}$/; |
||||
|
``` |
||||
|
|
||||
|
### classList manipulace: |
||||
|
|
||||
|
```javascript |
||||
|
// Přidání třídy |
||||
|
element.classList.add("error"); |
||||
|
|
||||
|
// Odebrání třídy |
||||
|
element.classList.remove("error"); |
||||
|
|
||||
|
// Toggle (přidá/odebere) |
||||
|
element.classList.toggle("active"); |
||||
|
|
||||
|
// Kontrola existence |
||||
|
if (element.classList.contains("error")) { |
||||
|
// ... |
||||
|
} |
||||
|
|
||||
|
// Více tříd najednou |
||||
|
element.classList.add("error", "shake"); |
||||
|
``` |
||||
|
|
||||
|
### Event types: |
||||
|
|
||||
|
```javascript |
||||
|
// Při každé změně (real-time) |
||||
|
input.addEventListener("input", validateName); |
||||
|
|
||||
|
// Po opuštění pole |
||||
|
input.addEventListener("blur", validateName); |
||||
|
|
||||
|
// Při odeslání formuláře |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); // zabrání odeslání |
||||
|
// validace... |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
## 🎯 Úplný příklad - Email validace |
||||
|
|
||||
|
```html |
||||
|
<!-- HTML --> |
||||
|
<div class="form-group"> |
||||
|
<label for="email">Email:</label> |
||||
|
<input type="email" id="email" class="form-control"> |
||||
|
<span class="error-message" id="email-error"></span> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
```javascript |
||||
|
// JavaScript |
||||
|
document.getElementById("email").addEventListener("input", validateEmail); |
||||
|
|
||||
|
function validateEmail() { |
||||
|
const emailInput = document.getElementById("email"); |
||||
|
const emailValue = emailInput.value; |
||||
|
const errorElement = document.getElementById("email-error"); |
||||
|
|
||||
|
// Email regex |
||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
|
||||
|
if (!emailRegex.test(emailValue)) { |
||||
|
emailInput.classList.add("error"); |
||||
|
emailInput.classList.remove("success"); |
||||
|
errorElement.textContent = "Zadejte platný email"; |
||||
|
errorElement.style.display = "block"; |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
emailInput.classList.remove("error"); |
||||
|
emailInput.classList.add("success"); |
||||
|
errorElement.style.display = "none"; |
||||
|
return true; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
```css |
||||
|
/* CSS */ |
||||
|
.form-control { |
||||
|
border: 2px solid #ccc; |
||||
|
transition: border-color 0.3s; |
||||
|
} |
||||
|
|
||||
|
.form-control.error { |
||||
|
border-color: #dc3545; /* červená */ |
||||
|
} |
||||
|
|
||||
|
.form-control.success { |
||||
|
border-color: #28a745; /* zelená */ |
||||
|
} |
||||
|
|
||||
|
.error-message { |
||||
|
color: #dc3545; |
||||
|
font-size: 0.875rem; |
||||
|
display: none; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Časté chyby |
||||
|
|
||||
|
❌ **addEventListener s závorkami** |
||||
|
```javascript |
||||
|
// ŠPATNĚ |
||||
|
input.addEventListener("input", validateName()); // volá funkci hned |
||||
|
|
||||
|
// SPRÁVNĚ |
||||
|
input.addEventListener("input", validateName); // předá referenci |
||||
|
``` |
||||
|
|
||||
|
❌ **Zapomenutý e.preventDefault()** |
||||
|
```javascript |
||||
|
form.addEventListener("submit", function(e) { |
||||
|
e.preventDefault(); // MUSÍ BÝT! Jinak se formulář odešle |
||||
|
// validace... |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
❌ **RegEx bez escape znaků** |
||||
|
```javascript |
||||
|
// ŠPATNĚ |
||||
|
const regex = /^user@email.com$/; // . = jakýkoliv znak |
||||
|
|
||||
|
// SPRÁVNĚ |
||||
|
const regex = /^user@email\.com$/; // \. = literální tečka |
||||
|
``` |
||||
|
|
||||
|
## 🎓 Hodnocení (20 bodů) |
||||
|
|
||||
|
- **addEventListener použití** (4b) - všechny eventy přes addEventListener |
||||
|
- **Validační funkce** (6b) - 6 funkčních validací |
||||
|
- **RegEx implementace** (3b) - správné regex pro email, heslo, jméno |
||||
|
- **Visual feedback** (4b) - červená/zelená border, chybové zprávy |
||||
|
- **Submit handling** (3b) - kontrola všech polí, preventDefault |
||||
|
|
||||
|
## 🔗 Užitečné odkazy |
||||
|
|
||||
|
- [Form Validation - W3Schools](https://www.w3schools.com/js/js_validation.asp) |
||||
|
- [RegEx Tutorial - RegExr](https://regexr.com/) |
||||
|
- [addEventListener - MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) |
||||
|
- [RegEx Tester - Regex101](https://regex101.com/) |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas |
||||
|
|
||||
|
**90-120 minut** |
||||
|
|
||||
|
## 💪 Bonus výzvy |
||||
|
|
||||
|
1. **Password strength meter** - slabé/střední/silné heslo |
||||
|
2. **Show/hide password** - ikona oka pro zobrazení hesla |
||||
|
3. **Email suggestion** - když napíšu `@gmal.com` → návrh `@gmail.com` |
||||
|
4. **Character counter** - zobrazí 3/20 znaků |
||||
|
5. **Shake animation** - třese se při chybě |
||||
|
|
||||
|
## 🎯 Po dokončení |
||||
|
|
||||
|
Po dokončení tohoto projektu budete rozumět: |
||||
|
- Modernímu event handlingu (addEventListener) |
||||
|
- Form validation v JavaScriptu |
||||
|
- RegEx pro validaci formátů |
||||
|
- Visual feedback a UX best practices |
||||
|
|
||||
|
Bootstrap form validation vám pak bude dávat smysl, protože budete vědět, co se děje "pod kapotou"! |
||||
|
|
||||
|
➡️ **Další projekt:** AI 04 - Komplexní Bootstrap Prep Projekt |
||||
@ -0,0 +1,93 @@ |
|||||
|
# AI 03 - Pokročilá Validace Formulářů s JavaScript |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
Naučit se pokročilou práci s formuláři a JavaScript validací. Bootstrap má vestavěné validační třídy, takže je důležité rozumět, jak validace funguje. |
||||
|
|
||||
|
## 📝 Zadání |
||||
|
|
||||
|
Vytvořte registrační formulář s real-time validací pomocí JavaScriptu. |
||||
|
|
||||
|
### HTML požadavky - Formulářové pole: |
||||
|
|
||||
|
1. **Jméno** (text input) |
||||
|
- Min. 3 znaky, max. 20 znaků |
||||
|
- Pouze písmena |
||||
|
|
||||
|
2. **Email** (email input) |
||||
|
- Musí obsahovat @ a . |
||||
|
- Validní formát emailu |
||||
|
|
||||
|
3. **Heslo** (password input) |
||||
|
- Min. 8 znaků |
||||
|
- Alespoň 1 velké písmeno |
||||
|
- Alespoň 1 číslo |
||||
|
- Alespoň 1 speciální znak |
||||
|
|
||||
|
4. **Potvrzení hesla** (password input) |
||||
|
- Musí se shodovat s heslem |
||||
|
|
||||
|
5. **Věk** (number input) |
||||
|
- Min. 18, max. 120 |
||||
|
|
||||
|
6. **Souhlas s podmínkami** (checkbox) |
||||
|
- Musí být zaškrtnutý |
||||
|
|
||||
|
7. **Tlačítko Registrovat** (button) |
||||
|
|
||||
|
### JavaScript požadavky: |
||||
|
|
||||
|
#### 1. Použijte `addEventListener` místo inline onclick! |
||||
|
```javascript |
||||
|
document.getElementById("jmeno").addEventListener("input", validateName); |
||||
|
``` |
||||
|
|
||||
|
#### 2. Real-time validace |
||||
|
- Validujte při každé změně (event: "input") |
||||
|
- Zobrazujte chybové zprávy pod každým polem |
||||
|
- Měňte border color (červená = chyba, zelená = OK) |
||||
|
|
||||
|
#### 3. Validační funkce |
||||
|
Vytvořte separátní funkce pro validaci: |
||||
|
- `validateName()` |
||||
|
- `validateEmail()` |
||||
|
- `validatePassword()` |
||||
|
- `validatePasswordMatch()` |
||||
|
- `validateAge()` |
||||
|
- `validateCheckbox()` |
||||
|
|
||||
|
#### 4. Submit validace |
||||
|
- Při kliknutí na "Registrovat" zkontrolujte všechna pole |
||||
|
- Pokud je něco špatně, zobrazte alert a zabraňte odeslání |
||||
|
- Pokud je vše OK, zobrazte success zprávu |
||||
|
|
||||
|
#### 5. Visual feedback |
||||
|
- Červený border + chybová zpráva = chyba |
||||
|
- Zelený border = OK |
||||
|
- Ikona checkmark (✓) u správných polí |
||||
|
- Ikona X (✗) u chybných polí |
||||
|
|
||||
|
### CSS požadavky: |
||||
|
- Hezký design formuláře |
||||
|
- Responzivní |
||||
|
- Animace při chybách (shake effect) |
||||
|
|
||||
|
## 💡 Co se naučíte: |
||||
|
- addEventListener vs inline events |
||||
|
- Form validation v JavaScriptu |
||||
|
- RegEx (regulární výrazy) pro validaci |
||||
|
- DOM manipulace (classList, innerHTML) |
||||
|
- Event handling |
||||
|
- Podmínky a logické operátory |
||||
|
|
||||
|
## 🔗 Užitečné odkazy: |
||||
|
- Form Validation: https://www.w3schools.com/js/js_validation.asp |
||||
|
- RegEx Tutorial: https://regexr.com/ |
||||
|
- addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas: 90-120 minut |
||||
|
|
||||
|
## 💪 Bonus výzvy: |
||||
|
1. Password strength meter (slabé/střední/silné heslo) |
||||
|
2. Show/hide password tlačítko |
||||
|
3. Email suggestion (když napíšu @gmal.com → návrd @gmail.com) |
||||
|
4. Character counter pro jméno |
||||
@ -0,0 +1,50 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 03 - Validace Formulářů</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1>Registrace</h1> |
||||
|
|
||||
|
<form id="registrationForm"> |
||||
|
<!-- TODO: Vytvořte formulářová pole podle zadání --> |
||||
|
|
||||
|
<!-- Příklad struktury pro jedno pole: --> |
||||
|
<!-- |
||||
|
<div class="form-group"> |
||||
|
<label for="jmeno">Jméno:</label> |
||||
|
<input type="text" id="jmeno" name="jmeno"> |
||||
|
<span class="error-message" id="jmenoError"></span> |
||||
|
</div> |
||||
|
--> |
||||
|
|
||||
|
<!-- 1. Pole pro jméno --> |
||||
|
|
||||
|
|
||||
|
<!-- 2. Pole pro email --> |
||||
|
|
||||
|
|
||||
|
<!-- 3. Pole pro heslo --> |
||||
|
|
||||
|
|
||||
|
<!-- 4. Pole pro potvrzení hesla --> |
||||
|
|
||||
|
|
||||
|
<!-- 5. Pole pro věk --> |
||||
|
|
||||
|
|
||||
|
<!-- 6. Checkbox pro souhlas s podmínkami --> |
||||
|
|
||||
|
|
||||
|
<!-- 7. Tlačítko --> |
||||
|
|
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<script src="script.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,256 @@ |
|||||
|
/* AI 03 - Validace Formulářů - ŘEŠENÍ */ |
||||
|
|
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
min-height: 100vh; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
background: white; |
||||
|
padding: 40px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
||||
|
width: 100%; |
||||
|
max-width: 500px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
margin-bottom: 30px; |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
FORM STYLING |
||||
|
======================================== */ |
||||
|
|
||||
|
.form-group { |
||||
|
margin-bottom: 20px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.form-group label { |
||||
|
display: block; |
||||
|
margin-bottom: 8px; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
font-size: 0.95rem; |
||||
|
} |
||||
|
|
||||
|
.form-group input { |
||||
|
width: 100%; |
||||
|
padding: 12px 15px; |
||||
|
border: 2px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
font-size: 1rem; |
||||
|
transition: all 0.3s ease; |
||||
|
font-family: inherit; |
||||
|
} |
||||
|
|
||||
|
.form-group input:focus { |
||||
|
outline: none; |
||||
|
border-color: #667eea; |
||||
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
||||
|
} |
||||
|
|
||||
|
.form-group small { |
||||
|
display: block; |
||||
|
margin-top: 5px; |
||||
|
color: #999; |
||||
|
font-size: 0.85rem; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
VALIDATION STATES |
||||
|
======================================== */ |
||||
|
|
||||
|
/* SUCCESS - zelený border */ |
||||
|
.form-group.success input { |
||||
|
border-color: #2ecc71; |
||||
|
} |
||||
|
|
||||
|
/* Přidá checkmark ikonu */ |
||||
|
.form-group.success input { |
||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%232ecc71' d='M7.629 14.566l-4.586-4.586-1.457 1.457 6.043 6.043 12.957-12.957-1.457-1.457z'/%3E%3C/svg%3E"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: right 12px center; |
||||
|
background-size: 20px; |
||||
|
padding-right: 40px; |
||||
|
} |
||||
|
|
||||
|
/* ERROR - červený border */ |
||||
|
.form-group.error input { |
||||
|
border-color: #e74c3c; |
||||
|
} |
||||
|
|
||||
|
/* Přidá X ikonu */ |
||||
|
.form-group.error input { |
||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23e74c3c' d='M10 8.586l-7.071-7.071-1.414 1.414 7.071 7.071-7.071 7.071 1.414 1.414 7.071-7.071 7.071 7.071 1.414-1.414-7.071-7.071 7.071-7.071-1.414-1.414z'/%3E%3C/svg%3E"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: right 12px center; |
||||
|
background-size: 16px; |
||||
|
padding-right: 40px; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
ERROR MESSAGE |
||||
|
======================================== */ |
||||
|
|
||||
|
.error-message { |
||||
|
display: block; |
||||
|
color: #e74c3c; |
||||
|
font-size: 0.875rem; |
||||
|
margin-top: 5px; |
||||
|
min-height: 20px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
CHECKBOX GROUP |
||||
|
======================================== */ |
||||
|
|
||||
|
.checkbox-group { |
||||
|
margin-bottom: 25px; |
||||
|
} |
||||
|
|
||||
|
.checkbox-group label { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-weight: normal; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.checkbox-group input[type="checkbox"] { |
||||
|
width: auto; |
||||
|
margin-right: 10px; |
||||
|
cursor: pointer; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
SUBMIT BUTTON |
||||
|
======================================== */ |
||||
|
|
||||
|
.btn-submit { |
||||
|
width: 100%; |
||||
|
padding: 15px; |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
font-size: 1.1rem; |
||||
|
font-weight: bold; |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.btn-submit:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); |
||||
|
} |
||||
|
|
||||
|
.btn-submit:active { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.btn-submit:disabled { |
||||
|
background: #ccc; |
||||
|
cursor: not-allowed; |
||||
|
transform: none; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
SUCCESS MESSAGE |
||||
|
======================================== */ |
||||
|
|
||||
|
.success-box { |
||||
|
text-align: center; |
||||
|
padding: 30px; |
||||
|
background-color: #d4edda; |
||||
|
border: 2px solid #28a745; |
||||
|
border-radius: 10px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.success-box h2 { |
||||
|
color: #155724; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.success-box p { |
||||
|
color: #155724; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
ANIMATIONS |
||||
|
======================================== */ |
||||
|
|
||||
|
/* Shake animace pro chyby */ |
||||
|
@keyframes shake { |
||||
|
0%, 100% { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
10%, 30%, 50%, 70%, 90% { |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
20%, 40%, 60%, 80% { |
||||
|
transform: translateX(10px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-group.error { |
||||
|
animation: shake 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
/* Fade in animace */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-20px); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.success-box { |
||||
|
animation: fadeIn 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
/* ======================================== |
||||
|
RESPONSIVE |
||||
|
======================================== */ |
||||
|
|
||||
|
@media screen and (max-width: 480px) { |
||||
|
.container { |
||||
|
padding: 25px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.form-group input { |
||||
|
padding: 10px 12px; |
||||
|
font-size: 0.95rem; |
||||
|
} |
||||
|
|
||||
|
.btn-submit { |
||||
|
padding: 12px; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,76 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>AI 03 - Validace Formulářů - ŘEŠENÍ</title> |
||||
|
<link rel="stylesheet" href="reseni.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1>Registrace</h1> |
||||
|
|
||||
|
<form id="registrationForm"> |
||||
|
<!-- Jméno --> |
||||
|
<div class="form-group"> |
||||
|
<label for="jmeno">Jméno:</label> |
||||
|
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák"> |
||||
|
<span class="error-message" id="jmenoError"></span> |
||||
|
<small>Min. 3 znaky, max. 20 znaků, pouze písmena</small> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Email --> |
||||
|
<div class="form-group"> |
||||
|
<label for="email">Email:</label> |
||||
|
<input type="email" id="email" name="email" placeholder="jan@email.cz"> |
||||
|
<span class="error-message" id="emailError"></span> |
||||
|
<small>Zadejte platný email</small> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Heslo --> |
||||
|
<div class="form-group"> |
||||
|
<label for="heslo">Heslo:</label> |
||||
|
<input type="password" id="heslo" name="heslo" placeholder="••••••••"> |
||||
|
<span class="error-message" id="hesloError"></span> |
||||
|
<small>Min. 8 znaků, 1 velké písmeno, 1 číslo, 1 speciální znak</small> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Potvrzení hesla --> |
||||
|
<div class="form-group"> |
||||
|
<label for="hesloPotvrzeni">Potvrzení hesla:</label> |
||||
|
<input type="password" id="hesloPotvrzeni" name="hesloPotvrzeni" placeholder="••••••••"> |
||||
|
<span class="error-message" id="hesloPotvrzeniError"></span> |
||||
|
<small>Hesla se musí shodovat</small> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Věk --> |
||||
|
<div class="form-group"> |
||||
|
<label for="vek">Věk:</label> |
||||
|
<input type="number" id="vek" name="vek" placeholder="18"> |
||||
|
<span class="error-message" id="vekError"></span> |
||||
|
<small>Min. 18 let</small> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Checkbox --> |
||||
|
<div class="form-group checkbox-group"> |
||||
|
<label> |
||||
|
<input type="checkbox" id="souhlas" name="souhlas"> |
||||
|
Souhlasím s podmínkami používání |
||||
|
</label> |
||||
|
<span class="error-message" id="souhlasError"></span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Submit button --> |
||||
|
<button type="submit" class="btn-submit">Registrovat</button> |
||||
|
</form> |
||||
|
|
||||
|
<!-- Success message (skrytá) --> |
||||
|
<div id="successMessage" class="success-box" style="display: none;"> |
||||
|
<h2>✓ Registrace úspěšná!</h2> |
||||
|
<p>Váš účet byl úspěšně vytvořen.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script src="reseni.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,376 @@ |
|||||
|
// AI 03 - Validace Formulářů - ŘEŠENÍ
|
||||
|
|
||||
|
console.log("Script načten"); |
||||
|
|
||||
|
// ========================================
|
||||
|
// ZÍSKÁNÍ REFERENCÍ NA ELEMENTY
|
||||
|
// ========================================
|
||||
|
|
||||
|
const jmenoInput = document.getElementById("jmeno"); |
||||
|
const emailInput = document.getElementById("email"); |
||||
|
const hesloInput = document.getElementById("heslo"); |
||||
|
const hesloPotvrzeniInput = document.getElementById("hesloPotvrzeni"); |
||||
|
const vekInput = document.getElementById("vek"); |
||||
|
const souhlasInput = document.getElementById("souhlas"); |
||||
|
const form = document.getElementById("registrationForm"); |
||||
|
const successMessage = document.getElementById("successMessage"); |
||||
|
|
||||
|
// ========================================
|
||||
|
// EVENT LISTENERS - REAL-TIME VALIDACE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// Důležité: Používáme addEventListener místo inline onclick!
|
||||
|
// Výhody:
|
||||
|
// 1. Oddělení HTML a JavaScriptu
|
||||
|
// 2. Můžeme přidat více listenerů na jeden element
|
||||
|
// 3. Lepší kontrola nad event objektem
|
||||
|
|
||||
|
jmenoInput.addEventListener("input", validateName); |
||||
|
emailInput.addEventListener("input", validateEmail); |
||||
|
hesloInput.addEventListener("input", validatePassword); |
||||
|
hesloPotvrzeniInput.addEventListener("input", validatePasswordMatch); |
||||
|
vekInput.addEventListener("input", validateAge); |
||||
|
souhlasInput.addEventListener("change", validateCheckbox); |
||||
|
|
||||
|
// Event listener pro submit formuláře
|
||||
|
form.addEventListener("submit", handleSubmit); |
||||
|
|
||||
|
// ========================================
|
||||
|
// VALIDAČNÍ FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
/** |
||||
|
* Validace jména |
||||
|
* Požadavky: |
||||
|
* - Min. 3 znaky |
||||
|
* - Max. 20 znaků |
||||
|
* - Pouze písmena (včetně diakritiky) |
||||
|
*/ |
||||
|
function validateName() { |
||||
|
const jmeno = jmenoInput.value.trim(); |
||||
|
|
||||
|
// Kontrola prázdného pole
|
||||
|
if (jmeno === "") { |
||||
|
showError(jmenoInput, "Jméno je povinné"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola délky
|
||||
|
if (jmeno.length < 3) { |
||||
|
showError(jmenoInput, "Jméno musí mít alespoň 3 znaky"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if (jmeno.length > 20) { |
||||
|
showError(jmenoInput, "Jméno může mít maximálně 20 znaků"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// RegEx pro kontrolu, že obsahuje pouze písmena (včetně české diakritiky)
|
||||
|
// ^ = začátek stringu
|
||||
|
// [a-zA-Z...] = povolené znaky
|
||||
|
// \s = mezera (povolíme mezery mezi jménem a příjmením)
|
||||
|
// + = jeden nebo více
|
||||
|
// $ = konec stringu
|
||||
|
const nameRegex = /^[a-zA-ZáčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ\s]+$/; |
||||
|
|
||||
|
if (!nameRegex.test(jmeno)) { |
||||
|
showError(jmenoInput, "Jméno může obsahovat pouze písmena"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Vše OK!
|
||||
|
showSuccess(jmenoInput); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Validace emailu |
||||
|
* Požadavek: Validní formát emailu (obsahuje @ a .) |
||||
|
*/ |
||||
|
function validateEmail() { |
||||
|
const email = emailInput.value.trim(); |
||||
|
|
||||
|
if (email === "") { |
||||
|
showError(emailInput, "Email je povinný"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// RegEx pro email validaci
|
||||
|
// [^\s@]+ = jeden nebo více znaků, které nejsou mezera nebo @
|
||||
|
// @ = musí obsahovat @
|
||||
|
// [^\s@]+ = doména
|
||||
|
// \. = musí obsahovat tečku
|
||||
|
// [^\s@]+ = koncovka (.cz, .com, atd.)
|
||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
|
||||
|
if (!emailRegex.test(email)) { |
||||
|
showError(emailInput, "Zadejte platný email"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
showSuccess(emailInput); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Validace hesla |
||||
|
* Požadavky: |
||||
|
* - Min. 8 znaků |
||||
|
* - Alespoň 1 velké písmeno |
||||
|
* - Alespoň 1 číslo |
||||
|
* - Alespoň 1 speciální znak |
||||
|
*/ |
||||
|
function validatePassword() { |
||||
|
const heslo = hesloInput.value; |
||||
|
|
||||
|
if (heslo === "") { |
||||
|
showError(hesloInput, "Heslo je povinné"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola délky
|
||||
|
if (heslo.length < 8) { |
||||
|
showError(hesloInput, "Heslo musí mít alespoň 8 znaků"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola velkého písmena
|
||||
|
// [A-Z] = obsahuje alespoň jedno velké písmeno
|
||||
|
if (!/[A-Z]/.test(heslo)) { |
||||
|
showError(hesloInput, "Heslo musí obsahovat alespoň jedno velké písmeno"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola čísla
|
||||
|
// [0-9] = obsahuje alespoň jedno číslo
|
||||
|
if (!/[0-9]/.test(heslo)) { |
||||
|
showError(hesloInput, "Heslo musí obsahovat alespoň jedno číslo"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Kontrola speciálního znaku
|
||||
|
// [!@#$%^&*] = obsahuje alespoň jeden speciální znak
|
||||
|
if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(heslo)) { |
||||
|
showError(hesloInput, "Heslo musí obsahovat alespoň jeden speciální znak"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
showSuccess(hesloInput); |
||||
|
|
||||
|
// Pokud je heslo validní, zkontroluj i potvrzení hesla
|
||||
|
if (hesloPotvrzeniInput.value !== "") { |
||||
|
validatePasswordMatch(); |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Validace shody hesel |
||||
|
*/ |
||||
|
function validatePasswordMatch() { |
||||
|
const heslo = hesloInput.value; |
||||
|
const hesloPotvrzeni = hesloPotvrzeniInput.value; |
||||
|
|
||||
|
if (hesloPotvrzeni === "") { |
||||
|
showError(hesloPotvrzeniInput, "Potvrzení hesla je povinné"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Porovnání hesel
|
||||
|
if (heslo !== hesloPotvrzeni) { |
||||
|
showError(hesloPotvrzeniInput, "Hesla se neshodují"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
showSuccess(hesloPotvrzeniInput); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Validace věku |
||||
|
* Požadavek: Min. 18 let, max. 120 let |
||||
|
*/ |
||||
|
function validateAge() { |
||||
|
const vek = parseInt(vekInput.value); |
||||
|
|
||||
|
if (isNaN(vek) || vekInput.value === "") { |
||||
|
showError(vekInput, "Věk je povinný"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if (vek < 18) { |
||||
|
showError(vekInput, "Musíte být starší 18 let"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if (vek > 120) { |
||||
|
showError(vekInput, "Zadejte reálný věk"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
showSuccess(vekInput); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Validace checkboxu |
||||
|
* Požadavek: Musí být zaškrtnutý |
||||
|
*/ |
||||
|
function validateCheckbox() { |
||||
|
// .checked vrací true/false podle toho, jestli je checkbox zaškrtnutý
|
||||
|
if (!souhlasInput.checked) { |
||||
|
showError(souhlasInput, "Musíte souhlasit s podmínkami"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
showSuccess(souhlasInput); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// HELPER FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
/** |
||||
|
* Zobrazí chybovou zprávu a nastaví error stav |
||||
|
* @param {HTMLElement} inputElement - Input element |
||||
|
* @param {string} message - Chybová zpráva |
||||
|
*/ |
||||
|
function showError(inputElement, message) { |
||||
|
// Najdi parent element (.form-group)
|
||||
|
// .parentElement vrací rodičovský element
|
||||
|
const formGroup = inputElement.parentElement; |
||||
|
|
||||
|
// Přidej třídu "error" pro styling
|
||||
|
formGroup.classList.add("error"); |
||||
|
|
||||
|
// Odeber třídu "success" (pokud tam byla)
|
||||
|
formGroup.classList.remove("success"); |
||||
|
|
||||
|
// Najdi element pro chybovou zprávu
|
||||
|
// Předpokládáme, že má id ve formátu: inputId + "Error"
|
||||
|
const errorElement = formGroup.querySelector(".error-message"); |
||||
|
|
||||
|
// Nastav text chybové zprávy
|
||||
|
if (errorElement) { |
||||
|
errorElement.textContent = message; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Zobrazí success stav (zelený border, checkmark) |
||||
|
* @param {HTMLElement} inputElement - Input element |
||||
|
*/ |
||||
|
function showSuccess(inputElement) { |
||||
|
const formGroup = inputElement.parentElement; |
||||
|
|
||||
|
// Přidej třídu "success"
|
||||
|
formGroup.classList.add("success"); |
||||
|
|
||||
|
// Odeber třídu "error"
|
||||
|
formGroup.classList.remove("error"); |
||||
|
|
||||
|
// Vyčisti chybovou zprávu
|
||||
|
const errorElement = formGroup.querySelector(".error-message"); |
||||
|
if (errorElement) { |
||||
|
errorElement.textContent = ""; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// SUBMIT HANDLER
|
||||
|
// ========================================
|
||||
|
|
||||
|
/** |
||||
|
* Handler pro submit formuláře |
||||
|
* @param {Event} e - Event objekt |
||||
|
*/ |
||||
|
function handleSubmit(e) { |
||||
|
// Zabraň výchozímu chování (odeslání formuláře a reload stránky)
|
||||
|
e.preventDefault(); |
||||
|
|
||||
|
console.log("Formulář odeslán"); |
||||
|
|
||||
|
// Zavolej všechny validační funkce
|
||||
|
const isNameValid = validateName(); |
||||
|
const isEmailValid = validateEmail(); |
||||
|
const isPasswordValid = validatePassword(); |
||||
|
const isPasswordMatchValid = validatePasswordMatch(); |
||||
|
const isAgeValid = validateAge(); |
||||
|
const isCheckboxValid = validateCheckbox(); |
||||
|
|
||||
|
// Zkontroluj, jestli jsou všechna pole validní
|
||||
|
// Logický AND (&&) - vrací true pouze pokud jsou všechny hodnoty true
|
||||
|
const isFormValid = |
||||
|
isNameValid && |
||||
|
isEmailValid && |
||||
|
isPasswordValid && |
||||
|
isPasswordMatchValid && |
||||
|
isAgeValid && |
||||
|
isCheckboxValid; |
||||
|
|
||||
|
if (isFormValid) { |
||||
|
// Vše OK - zobraz success zprávu
|
||||
|
console.log("✓ Formulář je validní!"); |
||||
|
|
||||
|
// Schovat formulář
|
||||
|
form.style.display = "none"; |
||||
|
|
||||
|
// Zobrazit success zprávu
|
||||
|
successMessage.style.display = "block"; |
||||
|
|
||||
|
// V reálné aplikaci bychom zde odeslali data na server:
|
||||
|
// fetch("/api/register", {
|
||||
|
// method: "POST",
|
||||
|
// body: JSON.stringify({
|
||||
|
// jmeno: jmenoInput.value,
|
||||
|
// email: emailInput.value,
|
||||
|
// ...
|
||||
|
// })
|
||||
|
// });
|
||||
|
|
||||
|
} else { |
||||
|
// Něco je špatně - zobraz alert
|
||||
|
console.log("✗ Formulář obsahuje chyby!"); |
||||
|
alert("Prosím opravte chyby ve formuláři"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// BONUS FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
/** |
||||
|
* BONUS: Password strength meter |
||||
|
* Můžete přidat indikátor síly hesla |
||||
|
*/ |
||||
|
function checkPasswordStrength(password) { |
||||
|
let strength = 0; |
||||
|
|
||||
|
if (password.length >= 8) strength++; |
||||
|
if (password.length >= 12) strength++; |
||||
|
if (/[a-z]/.test(password)) strength++; |
||||
|
if (/[A-Z]/.test(password)) strength++; |
||||
|
if (/[0-9]/.test(password)) strength++; |
||||
|
if (/[^a-zA-Z0-9]/.test(password)) strength++; |
||||
|
|
||||
|
if (strength <= 2) return "Slabé"; |
||||
|
if (strength <= 4) return "Střední"; |
||||
|
return "Silné"; |
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// DEBUG INFO
|
||||
|
// ========================================
|
||||
|
|
||||
|
console.log("Validační skrip připraven"); |
||||
|
console.log("Event listenery přidány na:", { |
||||
|
jmeno: jmenoInput, |
||||
|
email: emailInput, |
||||
|
heslo: hesloInput, |
||||
|
hesloPotvrzeni: hesloPotvrzeniInput, |
||||
|
vek: vekInput, |
||||
|
souhlas: souhlasInput |
||||
|
}); |
||||
@ -0,0 +1,96 @@ |
|||||
|
// AI 03 - Validace Formulářů - JavaScript
|
||||
|
|
||||
|
console.log("Script načten"); |
||||
|
|
||||
|
// TODO: Získejte reference na elementy
|
||||
|
// const jmenoInput = document.getElementById("jmeno");
|
||||
|
// const emailInput = document.getElementById("email");
|
||||
|
// ... atd
|
||||
|
|
||||
|
|
||||
|
// TODO: Přidejte event listenery pro real-time validaci
|
||||
|
// jmenoInput.addEventListener("input", validateName);
|
||||
|
// emailInput.addEventListener("input", validateEmail);
|
||||
|
// ... atd
|
||||
|
|
||||
|
|
||||
|
// TODO: Event listener pro submit formuláře
|
||||
|
// document.getElementById("registrationForm").addEventListener("submit", handleSubmit);
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// VALIDAČNÍ FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Funkce pro validaci jména
|
||||
|
function validateName() { |
||||
|
// 1. Získej hodnotu z inputu
|
||||
|
// 2. Zkontroluj délku (min 3, max 20)
|
||||
|
// 3. Zkontroluj, že obsahuje jen písmena (použij RegEx: /^[a-zA-ZáčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ\s]+$/)
|
||||
|
// 4. Zobraz chybu nebo success
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro validaci emailu
|
||||
|
function validateEmail() { |
||||
|
// 1. Získej hodnotu
|
||||
|
// 2. Zkontroluj formát emailu (RegEx: /^[^\s@]+@[^\s@]+\.[^\s@]+$/)
|
||||
|
// 3. Zobraz výsledek
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro validaci hesla
|
||||
|
function validatePassword() { |
||||
|
// Musí obsahovat:
|
||||
|
// - Min. 8 znaků
|
||||
|
// - Alespoň 1 velké písmeno (RegEx: /[A-Z]/)
|
||||
|
// - Alespoň 1 číslo (RegEx: /[0-9]/)
|
||||
|
// - Alespoň 1 speciální znak (RegEx: /[!@#$%^&*]/)
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro kontrolu shody hesel
|
||||
|
function validatePasswordMatch() { |
||||
|
// Porovnej hodnoty hesla a potvrzení hesla
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro validaci věku
|
||||
|
function validateAge() { |
||||
|
// Zkontroluj, že věk je číslo mezi 18 a 120
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro validaci checkboxu
|
||||
|
function validateCheckbox() { |
||||
|
// Zkontroluj, že checkbox je zaškrtnutý (.checked)
|
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// HELPER FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Funkce pro zobrazení chyby
|
||||
|
function showError(inputElement, message) { |
||||
|
// 1. Najdi parent element (.form-group)
|
||||
|
// 2. Přidej třídu "error"
|
||||
|
// 3. Odeber třídu "success"
|
||||
|
// 4. Najdi .error-message a nastav text
|
||||
|
// 5. Přidej shake animaci
|
||||
|
} |
||||
|
|
||||
|
// TODO: Funkce pro zobrazení success
|
||||
|
function showSuccess(inputElement) { |
||||
|
// 1. Najdi parent element
|
||||
|
// 2. Přidej třídu "success"
|
||||
|
// 3. Odeber třídu "error"
|
||||
|
// 4. Vyčisti error message
|
||||
|
} |
||||
|
|
||||
|
// ========================================
|
||||
|
// SUBMIT HANDLER
|
||||
|
// ========================================
|
||||
|
|
||||
|
function handleSubmit(e) { |
||||
|
e.preventDefault(); // Zabraň odeslání formuláře
|
||||
|
|
||||
|
// TODO: Zavolej všechny validační funkce
|
||||
|
// TODO: Zkontroluj, jestli jsou všechna pole validní
|
||||
|
// TODO: Pokud ano, zobraz success zprávu
|
||||
|
// TODO: Pokud ne, zobraz alert s chybou
|
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
/* AI 03 - Validace Formulářů */ |
||||
|
|
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||
|
min-height: 100vh; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
background: white; |
||||
|
padding: 40px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
||||
|
width: 100%; |
||||
|
max-width: 500px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
/* TODO: Nastylujte .form-group */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Nastylujte label */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Nastylujte input */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Přidejte třídy pro validaci */ |
||||
|
/* .form-group.success input - zelený border */ |
||||
|
|
||||
|
|
||||
|
/* .form-group.error input - červený border */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Nastylujte .error-message */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Nastylujte button */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Přidejte shake animaci pro chyby */ |
||||
|
@keyframes shake { |
||||
|
/* Vytvořte shake efekt pomocí translateX */ |
||||
|
} |
||||
@ -0,0 +1,377 @@ |
|||||
|
# AI 04 - Komplexní Bootstrap Prep Projekt |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
|
||||
|
**Finální komplexní projekt** kombinující **VŠECHNY naučené koncepty**. Po dokončení tohoto projektu budete plně připraveni na Bootstrap a budete rozumět, proč a jak framework funguje! |
||||
|
|
||||
|
## 📋 Co tento projekt procvičuje |
||||
|
|
||||
|
### HTML: |
||||
|
✅ Sémantické elementy (nav, main, section, article, aside, footer) |
||||
|
✅ Formuláře |
||||
|
✅ Strukturu moderní webové stránky |
||||
|
|
||||
|
### CSS: |
||||
|
✅ **Grid & Flexbox** - komplexní layouty |
||||
|
✅ **Positioning** - všechny typy (fixed, sticky, relative, absolute) |
||||
|
✅ **Media queries** - plná responzivita |
||||
|
✅ **CSS proměnné** - custom properties |
||||
|
✅ **Moderní jednotky** - rem, em, vh, vw |
||||
|
✅ **Gradienty, shadows, transitions** |
||||
|
✅ **Animations** - fadeIn, slideIn |
||||
|
✅ **Pokročilé selektory** - nth-child, ::before, ::after |
||||
|
|
||||
|
### JavaScript: |
||||
|
✅ **addEventListener** |
||||
|
✅ **DOM manipulace** |
||||
|
✅ **Form validation** |
||||
|
✅ **Event handling** |
||||
|
✅ **Scroll efekty** |
||||
|
✅ **Modals, accordions, toggles** |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- **ZADANI.md** - kompletní zadání projektu |
||||
|
- **index.html** - startovací HTML (s TODO komentáři) |
||||
|
- **css/style.css** - hlavní CSS (s TODO komentáři) |
||||
|
- **css/animations.css** - CSS animace |
||||
|
- **js/main.js** - hlavní JavaScript |
||||
|
- **js/validation.js** - form validace |
||||
|
- **js/scroll.js** - scroll efekty |
||||
|
- **reseni/** - kompletní řešení se všemi soubory |
||||
|
|
||||
|
## 🚀 Co budete vytvářet |
||||
|
|
||||
|
**Responzivní Landing Page** pro fiktivní produkt (fitness app, e-learning, SaaS, atd.) |
||||
|
|
||||
|
### Struktura stránky: |
||||
|
|
||||
|
``` |
||||
|
┌─────────────────────────────────────┐ |
||||
|
│ FIXNÍ NAVIGACE (position: fixed) │ |
||||
|
├─────────────────────────────────────┤ |
||||
|
│ │ |
||||
|
│ HERO SEKCE (header) │ |
||||
|
│ Call-to-Action tlačítko │ |
||||
|
│ │ |
||||
|
├──────────────┬──────────────────────┤ |
||||
|
│ STICKY │ │ |
||||
|
│ ASIDE │ FEATURES (grid) │ |
||||
|
│ (boční) │ │ |
||||
|
│ │ PRICING CARDS │ |
||||
|
│ │ (grid) │ |
||||
|
│ │ │ |
||||
|
│ │ TESTIMONIALS │ |
||||
|
│ │ (flex) │ |
||||
|
│ │ │ |
||||
|
│ │ CONTACT FORM │ |
||||
|
│ │ (validation) │ |
||||
|
├──────────────┴──────────────────────┤ |
||||
|
│ FOOTER │ |
||||
|
└─────────────────────────────────────┘ |
||||
|
``` |
||||
|
|
||||
|
## 💡 Klíčové techniky |
||||
|
|
||||
|
### 1. CSS Grid Layout |
||||
|
|
||||
|
**Features sekce:** |
||||
|
```css |
||||
|
.features { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); /* 3 sloupce */ |
||||
|
gap: 2rem; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.features { |
||||
|
grid-template-columns: repeat(2, 1fr); /* 2 na tabletu */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) { |
||||
|
.features { |
||||
|
grid-template-columns: 1fr; /* 1 na mobilu */ |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 2. CSS Proměnné (Custom Properties) |
||||
|
|
||||
|
```css |
||||
|
:root { |
||||
|
--primary-color: #667eea; |
||||
|
--secondary-color: #764ba2; |
||||
|
--text-color: #333; |
||||
|
--bg-color: #f8f9fa; |
||||
|
--spacing-unit: 1rem; |
||||
|
--border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
||||
|
padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); |
||||
|
border-radius: var(--border-radius); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 3. Pricing Toggle (JavaScript) |
||||
|
|
||||
|
```javascript |
||||
|
const toggle = document.getElementById("pricing-toggle"); |
||||
|
const monthlyPrices = document.querySelectorAll(".monthly-price"); |
||||
|
const yearlyPrices = document.querySelectorAll(".yearly-price"); |
||||
|
|
||||
|
toggle.addEventListener("change", function() { |
||||
|
if (this.checked) { |
||||
|
// Zobraz roční ceny |
||||
|
monthlyPrices.forEach(el => el.style.display = "none"); |
||||
|
yearlyPrices.forEach(el => el.style.display = "block"); |
||||
|
} else { |
||||
|
// Zobraz měsíční ceny |
||||
|
monthlyPrices.forEach(el => el.style.display = "block"); |
||||
|
yearlyPrices.forEach(el => el.style.display = "none"); |
||||
|
} |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 4. Smooth Scroll k sekcím |
||||
|
|
||||
|
```javascript |
||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
||||
|
anchor.addEventListener("click", function(e) { |
||||
|
e.preventDefault(); |
||||
|
const target = document.querySelector(this.getAttribute("href")); |
||||
|
target.scrollIntoView({ |
||||
|
behavior: "smooth", |
||||
|
block: "start" |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 5. Scroll to Top tlačítko |
||||
|
|
||||
|
```javascript |
||||
|
const scrollTopBtn = document.getElementById("scroll-top"); |
||||
|
|
||||
|
window.addEventListener("scroll", function() { |
||||
|
if (window.pageYOffset > 300) { |
||||
|
scrollTopBtn.classList.add("show"); |
||||
|
} else { |
||||
|
scrollTopBtn.classList.remove("show"); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
scrollTopBtn.addEventListener("click", function() { |
||||
|
window.scrollTo({ |
||||
|
top: 0, |
||||
|
behavior: "smooth" |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 6. Modal okno |
||||
|
|
||||
|
```javascript |
||||
|
const modal = document.getElementById("myModal"); |
||||
|
const openBtn = document.getElementById("openModal"); |
||||
|
const closeBtn = document.querySelector(".close"); |
||||
|
|
||||
|
openBtn.addEventListener("click", function() { |
||||
|
modal.style.display = "block"; |
||||
|
document.body.style.overflow = "hidden"; // zakáže scrollování |
||||
|
}); |
||||
|
|
||||
|
closeBtn.addEventListener("click", function() { |
||||
|
modal.style.display = "none"; |
||||
|
document.body.style.overflow = "auto"; |
||||
|
}); |
||||
|
|
||||
|
// Zavření kliknutím mimo modal |
||||
|
window.addEventListener("click", function(e) { |
||||
|
if (e.target === modal) { |
||||
|
modal.style.display = "none"; |
||||
|
document.body.style.overflow = "auto"; |
||||
|
} |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 7. FAQ Accordion |
||||
|
|
||||
|
```javascript |
||||
|
const accordionHeaders = document.querySelectorAll(".accordion-header"); |
||||
|
|
||||
|
accordionHeaders.forEach(header => { |
||||
|
header.addEventListener("click", function() { |
||||
|
const content = this.nextElementSibling; |
||||
|
const isActive = this.classList.contains("active"); |
||||
|
|
||||
|
// Zavři všechny ostatní |
||||
|
accordionHeaders.forEach(h => { |
||||
|
h.classList.remove("active"); |
||||
|
h.nextElementSibling.style.maxHeight = null; |
||||
|
}); |
||||
|
|
||||
|
// Toggle aktuální |
||||
|
if (!isActive) { |
||||
|
this.classList.add("active"); |
||||
|
content.style.maxHeight = content.scrollHeight + "px"; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 8. Změna barvy navigace při scrollování |
||||
|
|
||||
|
```javascript |
||||
|
const navbar = document.querySelector("nav"); |
||||
|
|
||||
|
window.addEventListener("scroll", function() { |
||||
|
if (window.pageYOffset > 100) { |
||||
|
navbar.classList.add("scrolled"); |
||||
|
} else { |
||||
|
navbar.classList.remove("scrolled"); |
||||
|
} |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
```css |
||||
|
nav { |
||||
|
background-color: transparent; |
||||
|
transition: background-color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
nav.scrolled { |
||||
|
background-color: rgba(255, 255, 255, 0.95); |
||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🎨 CSS Animations |
||||
|
|
||||
|
```css |
||||
|
/* Fade In */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20px); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fade-in { |
||||
|
animation: fadeIn 0.6s ease-out; |
||||
|
} |
||||
|
|
||||
|
/* Slide In */ |
||||
|
@keyframes slideIn { |
||||
|
from { |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
to { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ⚠️ Časté chyby a řešení |
||||
|
|
||||
|
❌ **Fixed navigace překrývá obsah** |
||||
|
```css |
||||
|
body { |
||||
|
padding-top: 80px; /* výška navigace */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
❌ **Smooth scroll nefunguje** |
||||
|
```css |
||||
|
html { |
||||
|
scroll-behavior: smooth; /* CSS alternativa */ |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
❌ **Modal scrolluje pozadí** |
||||
|
```javascript |
||||
|
// Při otevření modalu |
||||
|
document.body.style.overflow = "hidden"; |
||||
|
|
||||
|
// Při zavření |
||||
|
document.body.style.overflow = "auto"; |
||||
|
``` |
||||
|
|
||||
|
## 🎓 Hodnocení (30 bodů) |
||||
|
|
||||
|
- **HTML struktura** (5b) - sémantické elementy, správná struktura |
||||
|
- **CSS Grid & Flexbox** (6b) - grid pro features/pricing, flex pro navigaci |
||||
|
- **Positioning** (4b) - fixed nav, sticky aside, absolute badge |
||||
|
- **JavaScript interaktivita** (6b) - validace, scroll, modal, accordion |
||||
|
- **Responzivita** (4b) - funguje na mobilu, tabletu, desktopu |
||||
|
- **Design & UX** (3b) - hezký design, dobré barvy, transitions |
||||
|
- **Clean code** (2b) - čitelný, okomentovaný kód |
||||
|
|
||||
|
## 🔗 Design inspirace |
||||
|
|
||||
|
- [Awwwards](https://www.awwwards.com/) |
||||
|
- [Dribbble](https://dribbble.com/) |
||||
|
- [Land-book](https://land-book.com/) |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas |
||||
|
|
||||
|
**4-6 hodin** (pracujte postupně, ne vše najednou!) |
||||
|
|
||||
|
## 💪 Bonus úkoly (nepovinné) |
||||
|
|
||||
|
1. **Counter animace** - číselné statistiky se animují od 0 |
||||
|
2. **Lazy loading obrázků** - obrázky se načtou až při scrollování |
||||
|
3. **Dark mode toggle** - přepínač světlý/tmavý režim |
||||
|
4. **Carousel/Slider** - pro testimonials (bez knihoven!) |
||||
|
5. **Newsletter signup** - s fake AJAX requestem |
||||
|
6. **AOS (Animate On Scroll)** - prvky plynule přijíždějí při scrollování |
||||
|
|
||||
|
## 🎯 Po dokončení projektu |
||||
|
|
||||
|
### Co budete rozumět při učení Bootstrapu: |
||||
|
|
||||
|
✅ **Grid systém** - víte, jak funguje pod kapotou |
||||
|
✅ **Utility třídy** - `.m-2`, `.p-3` → víte, co dělají |
||||
|
✅ **Komponenty** - modals, accordions → umíte je vytvořit sami |
||||
|
✅ **JavaScript plugins** - rozumíte, jak fungují |
||||
|
✅ **Responzivita** - mobile-first přístup dává smysl |
||||
|
|
||||
|
### Bootstrap vám ušetří čas: |
||||
|
|
||||
|
```html |
||||
|
<!-- VÁŠE ŘEŠENÍ (40 řádků CSS) --> |
||||
|
<div class="pricing-card"> |
||||
|
<h3>Basic</h3> |
||||
|
<p class="price">$9/mo</p> |
||||
|
<button class="btn">Subscribe</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- BOOTSTRAP (využívá hotové třídy) --> |
||||
|
<div class="card text-center"> |
||||
|
<div class="card-body"> |
||||
|
<h3 class="card-title">Basic</h3> |
||||
|
<p class="display-4">$9/mo</p> |
||||
|
<button class="btn btn-primary">Subscribe</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
**Ale díky tomuto projektu víte, co se děje pod kapotou!** 🎉 |
||||
|
|
||||
|
## 🏆 Gratulace! |
||||
|
|
||||
|
Po dokončení všech AI projektů (01-04) jste připraveni na Bootstrap! |
||||
|
|
||||
|
Jste schopni: |
||||
|
- ✅ Vytvořit kompletní responzivní web bez frameworku |
||||
|
- ✅ Rozumět, jak frameworky fungují interně |
||||
|
- ✅ Přizpůsobit Bootstrap vlastním potřebám |
||||
|
- ✅ Debugovat problémy v Bootstrapu |
||||
|
|
||||
|
➡️ **Další krok:** Lekce 13 - Úvod do Bootstrapu |
||||
@ -0,0 +1,173 @@ |
|||||
|
# Příklad řešení - AI 04 |
||||
|
|
||||
|
Toto je **zjednodušený příklad** řešení. Vaše implementace by měla být completnější! |
||||
|
|
||||
|
## Struktura HTML (příklad hero sekce) |
||||
|
|
||||
|
```html |
||||
|
<header id="hero"> |
||||
|
<div class="hero-content"> |
||||
|
<h1 class="hero-title">FitPro</h1> |
||||
|
<p class="hero-subtitle">Vaše cesta k lepší kondici začíná zde</p> |
||||
|
<a href="#contact" class="btn btn-primary">Začít zdarma</a> |
||||
|
</div> |
||||
|
</header> |
||||
|
``` |
||||
|
|
||||
|
## CSS Grid příklad (features) |
||||
|
|
||||
|
```css |
||||
|
.features-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr; /* Mobil - 1 sloupec */ |
||||
|
gap: 2rem; |
||||
|
padding: 4rem 2rem; |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 768px) { |
||||
|
.features-grid { |
||||
|
grid-template-columns: repeat(2, 1fr); /* Tablet - 2 sloupce */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 1024px) { |
||||
|
.features-grid { |
||||
|
grid-template-columns: repeat(3, 1fr); /* Desktop - 3 sloupce */ |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## JavaScript smooth scroll příklad |
||||
|
|
||||
|
```javascript |
||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
||||
|
anchor.addEventListener('click', function (e) { |
||||
|
e.preventDefault(); |
||||
|
const target = document.querySelector(this.getAttribute('href')); |
||||
|
target.scrollIntoView({ |
||||
|
behavior: 'smooth', |
||||
|
block: 'start' |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
## Positioning příklad (badge) |
||||
|
|
||||
|
```css |
||||
|
.pricing-card { |
||||
|
position: relative; /* Vytvoří kontext pro absolute */ |
||||
|
} |
||||
|
|
||||
|
.badge { |
||||
|
position: absolute; |
||||
|
top: -10px; |
||||
|
right: -10px; |
||||
|
background: var(--danger-color); |
||||
|
color: white; |
||||
|
padding: 0.5rem 1rem; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## CSS Proměnné použití |
||||
|
|
||||
|
```css |
||||
|
.btn-primary { |
||||
|
background: linear-gradient( |
||||
|
135deg, |
||||
|
var(--primary-color), |
||||
|
var(--secondary-color) |
||||
|
); |
||||
|
color: var(--white); |
||||
|
padding: var(--spacing-sm) var(--spacing-md); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Tips & Tricks |
||||
|
|
||||
|
### 1. Responzivní typografie s clamp() |
||||
|
```css |
||||
|
h1 { |
||||
|
font-size: clamp(2rem, 5vw, 4rem); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 2. Aspect ratio pro obrázky |
||||
|
```css |
||||
|
.image-container { |
||||
|
aspect-ratio: 16/9; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 3. Flexbox centering |
||||
|
```css |
||||
|
.centered { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 4. Grid auto-fit |
||||
|
```css |
||||
|
.grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
||||
|
gap: 2rem; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Checklist před odevzdáním |
||||
|
|
||||
|
- [ ] Všechny sémantické HTML5 elementy použity |
||||
|
- [ ] CSS Grid pro alespoň 2 sekce |
||||
|
- [ ] Flexbox pro alespoň 2 sekce |
||||
|
- [ ] Všechny 4 typy positioning použity |
||||
|
- [ ] Minimálně 3 media queries |
||||
|
- [ ] Formulář s funkční validací |
||||
|
- [ ] Smooth scroll implementován |
||||
|
- [ ] Scroll to top button funguje |
||||
|
- [ ] Použity CSS proměnné |
||||
|
- [ ] Použity rem/em jednotky (ne jen px) |
||||
|
- [ ] Hover efekty na interaktivních prvcích |
||||
|
- [ ] Animace při načtení stránky |
||||
|
- [ ] Responzivní na všech zařízeních |
||||
|
- [ ] Kód je komentovaný |
||||
|
- [ ] Žádné console errory |
||||
|
|
||||
|
## Hodnocení |
||||
|
|
||||
|
### Základní požadavky (70 bodů) |
||||
|
- HTML struktura (10 bodů) |
||||
|
- CSS Grid (10 bodů) |
||||
|
- Flexbox (10 bodů) |
||||
|
- Positioning (10 bodů) |
||||
|
- Media queries (10 bodů) |
||||
|
- JavaScript validace (10 bodů) |
||||
|
- Scroll efekty (10 bodů) |
||||
|
|
||||
|
### Pokročilé funkce (20 bodů) |
||||
|
- CSS proměnné (5 bodů) |
||||
|
- Animace (5 bodů) |
||||
|
- Pokročilé selektory (5 bodů) |
||||
|
- Clean code (5 bodů) |
||||
|
|
||||
|
### Bonus (10 bodů) |
||||
|
- Extra funkce (modal, accordion, atd.) |
||||
|
- Výjimečný design |
||||
|
- Originální nápady |
||||
|
|
||||
|
**Celkem: 100 bodů (+10 bonus)** |
||||
|
|
||||
|
## Užitečné zdroje |
||||
|
|
||||
|
- MDN Web Docs: https://developer.mozilla.org/ |
||||
|
- CSS Tricks: https://css-tricks.com/ |
||||
|
- Can I Use: https://caniuse.com/ |
||||
|
- Coolors (palety barev): https://coolors.co/ |
||||
|
- Google Fonts: https://fonts.google.com/ |
||||
|
|
||||
|
Hodně štěstí! 🚀 |
||||
@ -0,0 +1,166 @@ |
|||||
|
# AI 04 - Komplexní Bootstrap Prep Projekt |
||||
|
|
||||
|
## 🎯 Cíl projektu |
||||
|
Komplexní projekt kombinující VŠECHNY naučené koncepty. Po dokončení tohoto projektu budete připraveni na Bootstrap! |
||||
|
|
||||
|
## 📝 Zadání |
||||
|
|
||||
|
Vytvořte **Responzivní Landing Page pro fiktivní produkt** (např. fitness aplikace, e-learning platforma, nebo jakýkoliv produkt dle vlastního výběru). |
||||
|
|
||||
|
### Požadavky na projekt: |
||||
|
|
||||
|
## 1️⃣ HTML - Sémantická struktura |
||||
|
|
||||
|
Použijte tyto sémantické elementy: |
||||
|
- `<nav>` - Fixní navigace s logem a menu |
||||
|
- `<header>` - Hero sekce s call-to-action |
||||
|
- `<main>` obsahující: |
||||
|
- `<section id="features">` - 3-6 features (ikony + text) |
||||
|
- `<section id="pricing">` - 3 cenové karty |
||||
|
- `<section id="testimonials">` - 3 recenze zákazníků |
||||
|
- `<section id="contact">` - Kontaktní formulář |
||||
|
- `<aside>` - Boční panel s quick links (sticky) |
||||
|
- `<footer>` - Zápatí s odkazy |
||||
|
|
||||
|
## 2️⃣ CSS - Layout & Design |
||||
|
|
||||
|
### Grid Layout: |
||||
|
- Features sekce: CSS Grid, 3 sloupce (desktop), 2 (tablet), 1 (mobil) |
||||
|
- Pricing karty: CSS Grid, 3 sloupce s gap 2rem |
||||
|
|
||||
|
### Flexbox: |
||||
|
- Navigace: flex s space-between |
||||
|
- Footer: flex s justify-content: space-around |
||||
|
- Testimonials: flex s flex-wrap |
||||
|
|
||||
|
### Positioning: |
||||
|
- `position: fixed` - Navigace |
||||
|
- `position: sticky` - Aside |
||||
|
- `position: absolute` - Badge "NEJLEPŠÍ VOLBA!" na jedné cenové kartě |
||||
|
- `position: relative` - Kontejner pro badge |
||||
|
|
||||
|
### Responzivita: |
||||
|
- Mobile first approach! |
||||
|
- Breakpoints: 480px, 768px, 1024px |
||||
|
- Media queries pro všechny sekce |
||||
|
|
||||
|
### Design: |
||||
|
- Použijte CSS proměnné (custom properties): |
||||
|
```css |
||||
|
:root { |
||||
|
--primary-color: #667eea; |
||||
|
--secondary-color: #764ba2; |
||||
|
--text-color: #333; |
||||
|
--bg-color: #f8f9fa; |
||||
|
} |
||||
|
``` |
||||
|
- Jednotky: rem, em, vh, vw (ne jen px!) |
||||
|
- Gradienty na pozadí |
||||
|
- Box shadows pro depth |
||||
|
- Hover efekty s transitions |
||||
|
- Animations (fadeIn, slideIn) |
||||
|
|
||||
|
## 3️⃣ JavaScript - Interaktivita |
||||
|
|
||||
|
### Formulář s validací: |
||||
|
- Jméno (min 3 znaky) |
||||
|
- Email (validní formát) |
||||
|
- Zpráva (min 10 znaků) |
||||
|
- Real-time validace pomocí `addEventListener` |
||||
|
- Visual feedback (červená/zelená) |
||||
|
|
||||
|
### Scroll efekty: |
||||
|
- Smooth scroll k sekcím při kliknutí na menu |
||||
|
- "Scroll to top" tlačítko (zobrazí se po scrollování) |
||||
|
- Změna barvy navigace při scrollování |
||||
|
|
||||
|
### Interaktivní features: |
||||
|
- Pricing toggle: měsíční/roční ceny (switch button) |
||||
|
- FAQ accordion (kliknutí → otevře/zavře odpověď) |
||||
|
- Modal okno pro "Více informací" tlačítko |
||||
|
|
||||
|
### Bonus: |
||||
|
- Counter animace (číselné statistiky se animují od 0) |
||||
|
- Lazy loading obrázků |
||||
|
- Dark mode toggle |
||||
|
|
||||
|
## 4️⃣ Pokročilé CSS selektory |
||||
|
|
||||
|
Použijte minimálně: |
||||
|
- `:nth-child()` - styling každé druhé karty |
||||
|
- `:hover`, `:focus`, `:active` |
||||
|
- `:first-child`, `:last-child` |
||||
|
- `::before`, `::after` - pro dekorativní elementy |
||||
|
- Attribute selectors - `[href^="http"]` pro externí odkazy |
||||
|
|
||||
|
## 📐 Struktura projektu |
||||
|
|
||||
|
``` |
||||
|
ai_04_prep_bootstrap/ |
||||
|
├── index.html |
||||
|
├── css/ |
||||
|
│ ├── style.css |
||||
|
│ └── animations.css |
||||
|
├── js/ |
||||
|
│ ├── main.js |
||||
|
│ ├── validation.js |
||||
|
│ └── scroll.js |
||||
|
└── images/ |
||||
|
└── (vaše obrázky) |
||||
|
``` |
||||
|
|
||||
|
## 💡 Co tento projekt procvičuje: |
||||
|
|
||||
|
### HTML: |
||||
|
✓ Sémantické elementy |
||||
|
✓ Formuláře |
||||
|
✓ Strukturu moderní webové stránky |
||||
|
|
||||
|
### CSS: |
||||
|
✓ Grid & Flexbox |
||||
|
✓ Positioning (všechny typy) |
||||
|
✓ Media queries |
||||
|
✓ CSS proměnné |
||||
|
✓ Jednotky (rem, em, vh, vw) |
||||
|
✓ Gradienty, shadows, transitions |
||||
|
✓ Animations |
||||
|
✓ Pokročilé selektory |
||||
|
|
||||
|
### JavaScript: |
||||
|
✓ addEventListener |
||||
|
✓ DOM manipulace |
||||
|
✓ Form validation |
||||
|
✓ Event handling |
||||
|
✓ Podmínky a cykly |
||||
|
✓ Funkce |
||||
|
|
||||
|
## 🎨 Design inspirace: |
||||
|
- https://www.awwwards.com/ |
||||
|
- https://dribbble.com/ |
||||
|
- Bootstrap examples (ale NEPOUŽÍVEJTE Bootstrap!) |
||||
|
|
||||
|
## ⏱️ Odhadovaný čas: 4-6 hodin |
||||
|
|
||||
|
## 🏆 Bonus úkoly (nepovinné): |
||||
|
1. Přidejte animaci AOS (Animate On Scroll) - při scrollování prvky plynule přijíždějí |
||||
|
2. Implementujte newsletter signup s AJAX (fake API endpoint) |
||||
|
3. Vytvořte carousel/slider pro testimonials (bez knihoven!) |
||||
|
4. Přidejte Easter egg (např. Konami kód) |
||||
|
5. PWA features (manifest.json, service worker) |
||||
|
|
||||
|
## 📚 Co se naučíte pro Bootstrap: |
||||
|
Po dokončení tohoto projektu budete rozumět: |
||||
|
- Jak funguje responzivní grid systém → Bootstrap grid |
||||
|
- Jak fungují utility třídy → Bootstrap utilities |
||||
|
- Jak se stylují komponenty → Bootstrap components |
||||
|
- Jak funguje JavaScript interaktivita → Bootstrap JS |
||||
|
- Mobile-first přístup → Bootstrap philosophy |
||||
|
|
||||
|
## 🚀 Po dokončení: |
||||
|
Gratulujeme! Jste připraveni na Bootstrap. Bootstrap vám nyní ušetří čas tím, že poskytuje: |
||||
|
- Předpřipravený grid systém (místo vašeho CSS Grid/Flexbox) |
||||
|
- Předpřipravené komponenty (tlačítka, karty, navigace) |
||||
|
- Předpřipravené utility třídy (margin, padding, colors) |
||||
|
- Responzivitu "out of the box" |
||||
|
|
||||
|
Ale díky tomuto projektu rozumíte, co se děje "pod kapotou"! |
||||
@ -0,0 +1,42 @@ |
|||||
|
/* AI 04 - CSS Animace */ |
||||
|
|
||||
|
/* ============================================ |
||||
|
KEYFRAME ANIMATIONS |
||||
|
============================================ */ |
||||
|
|
||||
|
/* TODO: FadeIn animace */ |
||||
|
@keyframes fadeIn { |
||||
|
/* from { opacity: 0; } */ |
||||
|
/* to { opacity: 1; } */ |
||||
|
} |
||||
|
|
||||
|
/* TODO: SlideIn animace */ |
||||
|
@keyframes slideInUp { |
||||
|
/* from { transform: translateY(50px); opacity: 0; } */ |
||||
|
/* to { transform: translateY(0); opacity: 1; } */ |
||||
|
} |
||||
|
|
||||
|
/* TODO: Bounce animace */ |
||||
|
@keyframes bounce { |
||||
|
/* 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } */ |
||||
|
/* 40% { transform: translateY(-20px); } */ |
||||
|
/* 60% { transform: translateY(-10px); } */ |
||||
|
} |
||||
|
|
||||
|
/* TODO: Pulse animace (pro tlačítka) */ |
||||
|
@keyframes pulse { |
||||
|
/* 0% { transform: scale(1); } */ |
||||
|
/* 50% { transform: scale(1.05); } */ |
||||
|
/* 100% { transform: scale(1); } */ |
||||
|
} |
||||
|
|
||||
|
/* TODO: Shake animace (pro chyby) */ |
||||
|
@keyframes shake { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
UTILITY TŘÍDY PRO ANIMACE |
||||
|
============================================ */ |
||||
|
|
||||
|
/* TODO: Přidejte třídy jako .fade-in, .slide-in, atd. */ |
||||
@ -0,0 +1,131 @@ |
|||||
|
/* AI 04 - Komplexní Bootstrap Prep Projekt */ |
||||
|
|
||||
|
/* ============================================ |
||||
|
CSS PROMĚNNÉ (Custom Properties) |
||||
|
============================================ */ |
||||
|
:root { |
||||
|
/* Barvy */ |
||||
|
--primary-color: #667eea; |
||||
|
--secondary-color: #764ba2; |
||||
|
--success-color: #2ecc71; |
||||
|
--danger-color: #e74c3c; |
||||
|
--text-color: #333; |
||||
|
--text-light: #666; |
||||
|
--bg-color: #f8f9fa; |
||||
|
--white: #ffffff; |
||||
|
|
||||
|
/* Spacing */ |
||||
|
--spacing-xs: 0.5rem; |
||||
|
--spacing-sm: 1rem; |
||||
|
--spacing-md: 2rem; |
||||
|
--spacing-lg: 4rem; |
||||
|
--spacing-xl: 6rem; |
||||
|
|
||||
|
/* Typography */ |
||||
|
--font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
||||
|
--font-size-base: 1rem; |
||||
|
--font-size-lg: 1.25rem; |
||||
|
--font-size-xl: 2rem; |
||||
|
--font-size-xxl: 3rem; |
||||
|
|
||||
|
/* Breakpoints (pro JavaScript) */ |
||||
|
--breakpoint-sm: 480px; |
||||
|
--breakpoint-md: 768px; |
||||
|
--breakpoint-lg: 1024px; |
||||
|
} |
||||
|
|
||||
|
/* ============================================ |
||||
|
RESET & BASE STYLES |
||||
|
============================================ */ |
||||
|
/* TODO: Přidejte reset styly */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
NAVIGACE (position: fixed) |
||||
|
============================================ */ |
||||
|
/* TODO: Vytvořte fixní navigaci nahoře */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
HEADER / HERO SEKCE |
||||
|
============================================ */ |
||||
|
/* TODO: Hero sekce s gradientem, vycentrovaný text */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
FEATURES SEKCE (CSS GRID) |
||||
|
============================================ */ |
||||
|
/* TODO: Grid layout pro features */ |
||||
|
/* Desktop: 3 sloupce */ |
||||
|
/* Tablet: 2 sloupce */ |
||||
|
/* Mobil: 1 sloupec */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
PRICING SEKCE (CSS GRID + POSITIONING) |
||||
|
============================================ */ |
||||
|
/* TODO: Grid layout pro cenové karty */ |
||||
|
/* Použijte position: relative pro kontejner */ |
||||
|
/* Použijte position: absolute pro "NEJLEPŠÍ VOLBA!" badge */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
TESTIMONIALS SEKCE (FLEXBOX) |
||||
|
============================================ */ |
||||
|
/* TODO: Flex layout s flex-wrap */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
CONTACT SEKCE (FORMULÁŘ) |
||||
|
============================================ */ |
||||
|
/* TODO: Styling formuláře s validačními stavy */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
ASIDE (position: sticky) |
||||
|
============================================ */ |
||||
|
/* TODO: Sticky sidebar */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
FOOTER |
||||
|
============================================ */ |
||||
|
/* TODO: Footer s flexboxem */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
SCROLL TO TOP BUTTON |
||||
|
============================================ */ |
||||
|
/* TODO: Button pro scroll nahoru (position: fixed) */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
POKROČILÉ SELEKTORY |
||||
|
============================================ */ |
||||
|
|
||||
|
/* TODO: Použijte nth-child pro alternativní styling */ |
||||
|
/* .feature-card:nth-child(even) {} */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Použijte ::before a ::after pro dekoraci */ |
||||
|
|
||||
|
|
||||
|
/* TODO: Styling externích odkazů */ |
||||
|
/* a[href^="http"] {} */ |
||||
|
|
||||
|
|
||||
|
/* ============================================ |
||||
|
MEDIA QUERIES - RESPONZIVITA |
||||
|
============================================ */ |
||||
|
|
||||
|
/* Mobile First! */ |
||||
|
|
||||
|
/* Tablet - 768px */ |
||||
|
@media screen and (min-width: 768px) { |
||||
|
/* TODO */ |
||||
|
} |
||||
|
|
||||
|
/* Desktop - 1024px */ |
||||
|
@media screen and (min-width: 1024px) { |
||||
|
/* TODO */ |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta name="description" content="FitPro - Vaše cesta k lepší kondici"> |
||||
|
<title>FitPro - Fitness Aplikace</title> |
||||
|
<link rel="stylesheet" href="css/style.css"> |
||||
|
<link rel="stylesheet" href="css/animations.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- TODO: Začněte zde vytvářet landing page --> |
||||
|
|
||||
|
<!-- 1. NAVIGACE (position: fixed) --> |
||||
|
<!-- nav#navbar --> |
||||
|
|
||||
|
|
||||
|
<!-- 2. HEADER / HERO SEKCE --> |
||||
|
<!-- header#hero --> |
||||
|
|
||||
|
|
||||
|
<!-- 3. MAIN - Hlavní obsah --> |
||||
|
<!-- <main> --> |
||||
|
|
||||
|
<!-- 3a. FEATURES SEKCE (CSS Grid) --> |
||||
|
<!-- section#features --> |
||||
|
|
||||
|
|
||||
|
<!-- 3b. PRICING SEKCE (CSS Grid) --> |
||||
|
<!-- section#pricing --> |
||||
|
|
||||
|
|
||||
|
<!-- 3c. TESTIMONIALS SEKCE (Flexbox) --> |
||||
|
<!-- section#testimonials --> |
||||
|
|
||||
|
|
||||
|
<!-- 3d. KONTAKT SEKCE (Formulář s validací) --> |
||||
|
<!-- section#contact --> |
||||
|
|
||||
|
|
||||
|
<!-- </main> --> |
||||
|
|
||||
|
|
||||
|
<!-- 4. ASIDE (position: sticky) --> |
||||
|
<!-- aside#quicklinks --> |
||||
|
|
||||
|
|
||||
|
<!-- 5. FOOTER --> |
||||
|
<!-- footer --> |
||||
|
|
||||
|
|
||||
|
<!-- 6. SCROLL TO TOP BUTTON (skrytý, zobrazí se při scrollování) --> |
||||
|
<!-- <button id="scrollToTop" class="scroll-top-btn">↑</button> --> |
||||
|
|
||||
|
|
||||
|
<!-- JavaScript soubory --> |
||||
|
<script src="js/validation.js"></script> |
||||
|
<script src="js/scroll.js"></script> |
||||
|
<script src="js/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,37 @@ |
|||||
|
// AI 04 - Main JavaScript
|
||||
|
|
||||
|
console.log("Main.js načten"); |
||||
|
|
||||
|
// ========================================
|
||||
|
// PRICING TOGGLE (měsíční/roční)
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Implementujte přepínání mezi měsíčními a ročními cenami
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// FAQ ACCORDION
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Implementujte accordion (kliknutí otevře/zavře odpověď)
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// MODAL OKNO
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Implementujte modal okno pro "Více informací"
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// COUNTER ANIMACE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Animujte čísla od 0 do cílové hodnoty
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// DARK MODE TOGGLE (BONUS)
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Implementujte přepínání mezi světlým a tmavým režimem
|
||||
@ -0,0 +1,36 @@ |
|||||
|
// AI 04 - Scroll efekty
|
||||
|
|
||||
|
console.log("Scroll.js načten"); |
||||
|
|
||||
|
// ========================================
|
||||
|
// SMOOTH SCROLL K SEKCÍM
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Implementujte smooth scroll při kliknutí na menu linky
|
||||
|
// document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
|
// anchor.addEventListener('click', function (e) {
|
||||
|
// e.preventDefault();
|
||||
|
// // ... smooth scroll
|
||||
|
// });
|
||||
|
// });
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// SCROLL TO TOP BUTTON
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Zobrazit/skrýt "Scroll to top" tlačítko při scrollování
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// ZMĚNA NAVIGACE PŘI SCROLLOVÁNÍ
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Změnit barvu/styl navigace když uživatel scrolluje dolů
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// ANIMATE ON SCROLL (BONUS)
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Přidejte třídu "visible" elementům když se dostanou do viewportu
|
||||
@ -0,0 +1,48 @@ |
|||||
|
// AI 04 - Validace formuláře
|
||||
|
|
||||
|
console.log("Validation.js načten"); |
||||
|
|
||||
|
// TODO: Implementujte validaci kontaktního formuláře
|
||||
|
// Požadavky:
|
||||
|
// - Jméno: min 3 znaky
|
||||
|
// - Email: validní formát
|
||||
|
// - Zpráva: min 10 znaků
|
||||
|
// - Real-time validace pomocí addEventListener
|
||||
|
// - Visual feedback (červená/zelená border)
|
||||
|
|
||||
|
// ========================================
|
||||
|
// ZÍSKÁNÍ REFERENCÍ NA ELEMENTY
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: const contactForm = document.getElementById("contactForm");
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// EVENT LISTENERS
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: Přidejte event listenery pro input eventy
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// VALIDAČNÍ FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: function validateContactName() {}
|
||||
|
// TODO: function validateContactEmail() {}
|
||||
|
// TODO: function validateContactMessage() {}
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// HELPER FUNKCE
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: function showError(element, message) {}
|
||||
|
// TODO: function showSuccess(element) {}
|
||||
|
|
||||
|
|
||||
|
// ========================================
|
||||
|
// SUBMIT HANDLER
|
||||
|
// ========================================
|
||||
|
|
||||
|
// TODO: function handleContactSubmit(e) {}
|
||||
@ -0,0 +1,177 @@ |
|||||
|
# Nový Bootstrap Projekt |
||||
|
|
||||
|
## 🎯 Účel projektu |
||||
|
|
||||
|
Tento projekt slouží jako **prázdná šablona** pro vytváření nových Bootstrap projektů. Obsahuje základní připojení Bootstrap CSS a JS. |
||||
|
|
||||
|
## 📚 Co projekt obsahuje |
||||
|
|
||||
|
- **Bootstrap 5.x** - lokální soubory CSS a JS |
||||
|
- **Základní HTML struktura** - připravená pro vývoj |
||||
|
- **Viewport meta tag** - pro responzivitu |
||||
|
|
||||
|
## 📂 Soubory v projektu |
||||
|
|
||||
|
- `index.html` - základní HTML s připojeným Bootstrapem |
||||
|
- `css/bootstrap.css` - Bootstrap CSS (lokální soubor) |
||||
|
- `js/bootstrap.js` - Bootstrap JavaScript (lokální soubor) |
||||
|
|
||||
|
## 🚀 Jak použít tento projekt |
||||
|
|
||||
|
### Krok 1: Zkopírujte složku |
||||
|
```bash |
||||
|
# Zkopírujte celou složku novyprojekt_bootstrap |
||||
|
# Přejmenujte na název vašeho projektu, např.: |
||||
|
- muj_novy_projekt/ |
||||
|
- portfolio_stranky/ |
||||
|
- eshop_projekt/ |
||||
|
``` |
||||
|
|
||||
|
### Krok 2: Upravte index.html |
||||
|
```html |
||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> <!-- změňte jazyk na cs --> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Můj projekt</title> <!-- změňte title --> |
||||
|
<link rel="stylesheet" href="css/bootstrap.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1 class="display-1">Hello World with Bootstrap!</h1> |
||||
|
<!-- Začněte psát váš kód zde --> |
||||
|
</div> |
||||
|
|
||||
|
<script src="js/bootstrap.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
|
``` |
||||
|
|
||||
|
### Krok 3: Začněte vyvíjet |
||||
|
|
||||
|
**Přidejte Bootstrap komponenty:** |
||||
|
```html |
||||
|
<!-- Navigace --> |
||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light"> |
||||
|
<div class="container"> |
||||
|
<a class="navbar-brand" href="#">Logo</a> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- Grid --> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6">Sloupec 1</div> |
||||
|
<div class="col-md-6">Sloupec 2</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Tlačítka --> |
||||
|
<button class="btn btn-primary">Primary</button> |
||||
|
<button class="btn btn-success">Success</button> |
||||
|
|
||||
|
<!-- Karty --> |
||||
|
<div class="card" style="width: 18rem;"> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title">Název karty</h5> |
||||
|
<p class="card-text">Text karty</p> |
||||
|
<a href="#" class="btn btn-primary">Tlačítko</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
## 💡 Užitečné Bootstrap třídy |
||||
|
|
||||
|
### Container a Grid: |
||||
|
```html |
||||
|
<div class="container"> <!-- Fixní šířka, centrovaný --> |
||||
|
<div class="container-fluid"> <!-- 100% šířka --> |
||||
|
|
||||
|
<div class="row"> <!-- Řádek --> |
||||
|
<div class="col-md-6"> <!-- 50% na tabletu+ --> |
||||
|
``` |
||||
|
|
||||
|
### Utility třídy: |
||||
|
```html |
||||
|
<!-- Margin a Padding --> |
||||
|
m-3 = margin všude |
||||
|
mt-2 = margin-top |
||||
|
px-4 = padding vlevo a vpravo |
||||
|
|
||||
|
<!-- Barvy --> |
||||
|
text-primary = modrý text |
||||
|
bg-danger = červené pozadí |
||||
|
|
||||
|
<!-- Display --> |
||||
|
d-flex = display: flex |
||||
|
d-none d-md-block = skryto na mobilu, zobrazeno na tabletu+ |
||||
|
``` |
||||
|
|
||||
|
### Komponenty: |
||||
|
```html |
||||
|
<!-- Buttons --> |
||||
|
<button class="btn btn-primary">Primary</button> |
||||
|
|
||||
|
<!-- Alerts --> |
||||
|
<div class="alert alert-success">Success!</div> |
||||
|
|
||||
|
<!-- Cards --> |
||||
|
<div class="card">...</div> |
||||
|
|
||||
|
<!-- Modal --> |
||||
|
<button data-bs-toggle="modal" data-bs-target="#myModal"> |
||||
|
Open Modal |
||||
|
</button> |
||||
|
``` |
||||
|
|
||||
|
## 🔗 Bootstrap dokumentace |
||||
|
|
||||
|
- **Oficiální dokumentace:** https://getbootstrap.com/docs/5.3/ |
||||
|
- **Bootstrap Icons:** https://icons.getbootstrap.com/ |
||||
|
- **Bootstrap Examples:** https://getbootstrap.com/docs/5.3/examples/ |
||||
|
|
||||
|
## 📚 Související lekce |
||||
|
|
||||
|
Před použitím tohoto projektu se ujistěte, že jste prošli: |
||||
|
- **13_bootstrap_intro** - úvod do Bootstrapu |
||||
|
- **14_bootstrap_layout** - Bootstrap layout |
||||
|
- **15_bootstrap_components** - Bootstrap komponenty |
||||
|
|
||||
|
## 💡 Tip pro studenty |
||||
|
|
||||
|
**Kdy použít tento projekt:** |
||||
|
- ✅ Nový Bootstrap projekt od nuly |
||||
|
- ✅ Prototypování webové stránky |
||||
|
- ✅ Cvičení Bootstrap komponent |
||||
|
- ✅ Školní projekty |
||||
|
|
||||
|
**Alternativa - CDN (online Bootstrap):** |
||||
|
```html |
||||
|
<!-- Místo lokálních souborů můžete použít CDN --> |
||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
||||
|
``` |
||||
|
|
||||
|
**Výhody lokálních souborů:** |
||||
|
- Funguje offline |
||||
|
- Rychlejší (není potřeba stahovat z internetu) |
||||
|
|
||||
|
**Výhody CDN:** |
||||
|
- Menší velikost projektu |
||||
|
- Možná už v cache prohlížeče |
||||
|
|
||||
|
## ⚠️ Důležité poznámky |
||||
|
|
||||
|
1. **Bootstrap.js vyžaduje** - carousel, modal, dropdown fungují jen s připojeným JS |
||||
|
2. **Viewport meta tag je povinný** - bez něj responzivita nebude fungovat |
||||
|
3. **jQuery není potřeba** - Bootstrap 5 už jQuery nepotřebuje |
||||
|
|
||||
|
## 🎯 Další kroky |
||||
|
|
||||
|
1. Prozkoumejte [Bootstrap dokumentaci](https://getbootstrap.com/) |
||||
|
2. Vyzkoušejte různé komponenty |
||||
|
3. Vytvořte vlastní projekt pomocí této šablony |
||||
|
4. Experimentujte s utility třídami |
||||
|
|
||||
|
Hodně štěstí s vaším projektem! 🚀 |
||||
Loading…
Reference in new issue