Vývoj webových aplikací - JavaScript

Postřehy z opravy domácího úkolu (JavaScript Caesarova šifra)

element.innerHTML += '<li>item</li>';
element.innerHTML = '<li>item</li>';
element.appendChild(newElement);
nepoužívat innerHTML pokud do něho přidáváte obsah z externích zdrojů, nad kterými nemáte kontrolu - hacker Vám tam může hodit cokoliv
bezpečnější bude document.createElement a innerText
elementy vybírejte a ukládejte do proměnných pomocí querySelectoru pouze jednou při inicializaci skriptu
nezapomínejte na základní věci jako const, let, závorky, středníky
funkce alert() funguje tak, že zastaví kód v místě jeho volání, takže spíše nepoužívat

Formuláře, události, selektory
Debugging v prohlížeči
Projekt Pokedex
- https://github.com/nvbach91/4IZ268-2021-2022-ZS/tree/master/www/nguv03/cv10x/pokedex
- Procvičujeme DOM metody, funkce, cykly, event handling, zpracování uživatelských vstupů, atd.
Domácí úkol

otevřete si Developer tools (konzoli) a přejděte na zdrojový kód (soubor main.js)
Chrome: View/Developer/JavaScript Console
zvolte si breakpoint např. ve funkci, která ne nabindovaná k nějaké události a v aplikaci tuto událost spusťte
sledujte celkový stav aplikace a postupně vykrokujte v místě breakpointu
také si ověřte uložené hodnoty v proměnných v rámci scope vybrané funkce

Kde vzít data:
- https://pokemondb.net/pokedex/all
- https://pokemondb.net/pokedex/bulbasaur
Funkční požadavky:
- uživatel napíše jméno Pokemona do inputu, potvrdí a přidá se karta s fotkou Pokemona a jeho název do kolekce
- uživatel napíše více jmen do inputu a potvrdí a objeví se karty s odpovídajícími fotkami
- u každého Pokemona bude tlačítko Odebrat
- ošetření uživatelského vstupu: prázdné stringy, čísla, atp. před přidáváním
- v kolekci nesmí být dva stejní Pokemoni, čili nemůžeme přidat Pokemona, když už ho máme v kolekci
- když uživatel klikne na nějakého Pokemona tak se vhodným způsobem zvýrazní, např. ukáže se na zvětšeném plátně
- filtr pro vyhledávání Pokemona v kolekci (po každém klávesovém zadání do inputu se seznam zaktualizuje podle zadané hodnoty a ukáže pouze Pokemony, jejichž názvy obsahují zadanou hodnotu)
- při generování Pokémona se načítají jeho informace z externího serveru (a potom se zobrazí) - AJAX
- DEMO: https://fcp.vse.cz/4IZ268/2018-2019-ZS/www/nguv03/pokemons/

Znalosti a dovednosti z předchozích domácích úkolů a z účasti na cvičeních jsou nezbytné ke zvládnutí tohoto úkolu. Takže doporučuji, pokud jste neudělali ty staré úkoly, abyste je vyřešili ještě předtím, než se vrhnete do tohoto úkolu. Na druhou stranu si ale myslím, že tento úkol není až tak časově náročné, jednalo by se o 40-60 řádků kódu. Pokud jste dávali pozor na cvičení, neměli byste mít příliš velký problém.
Zadání: https://github.com/nvbach91/4IZ268-2021-2022-ZS/tree/master/www/nguv03/cv10x/homework
Úkol vypracujte a odevzdejte přes Pull Request (návod) a také nahrajte na server eso, aby byl dostupný přes odkaz: https://eso.vse.cz/~xname/cv10/homework (doplňte svůj xname), odkaz mi napište také do Pull Requestu
Termín odevzdání: 02.12.2020 23:59:59