# 24 - Fetch API (Praktické ukázky)

## 🎯 Co se naučíte

V této lekci si prakticky vyzkoušíte práci s externími API pro načítání textových i obrazových dat.

## 📚 Témata lekce

- **Fetch API** - základní použití s `.then()`
- **Dynamické URL** - skládání parametrů do URL adresy
- **Template Literals** - práce s backticks (`` ` ``) pro vkládání proměnných do řetězců
- **Práce s obrázky** - dynamická změna `src` atributu a událost `onload`
- **Integrace Bootstrapu** - vizuální stránka aplikací

## 📂 Soubory v projektu

- `cnj.html` - generátor náhodných vtipů Chucka Norrise (api.chucknorris.io)
- `picsum.html` - generátor náhodných obrázků s nastavitelnými rozměry (picsum.photos)

## 💻 Klíčové koncepty

### Načítání JSON dat (cnj.html):
```javascript
function getJoke(){
    fetch("https://api.chucknorris.io/jokes/random")
    .then(response => response.json())
    .then(data => {
        jokeText.textContent = data.value;
    });
}
```

### Práce s obrázky a parametry (picsum.html):
```javascript
function getRandomImg(){
    let width = widthIn.value;
    let height = heightIn.value;
    // Použití template literals a náhodného parametru pro zamezení cachování
    let newImgUrl = `https://picsum.photos/${width}/${height}?random=${Math.random()}`
    randomImg.src = newImgUrl;
}
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `cnj.html` a vyzkoušejte tlačítko pro nový vtip.
2. Otevřete `picsum.html`, změňte rozměry a klikněte na "Další obrázek".
3. Prozkoumejte, jak se v JavaScriptu mění atributy HTML elementů.

## 🔗 Související lekce

- **Předchozí:** 20_ajax - Základy Fetch API
- **Následující:** 25_fetch_await - Moderní zápis pomocí async/await