Šest úkolů pro front-endového vývojáře

1. Formulář kreditní karty

Skvělý tvar kreditní karty s hladkými a příjemnými mikrointerakcemi. Zahrnuje formátování čísel, ověřování a automatickou detekci typu karty. Je postaven na Vue.js a je také plně responzivní. (Můžeš vidět zde.)

formulář kreditní karty

Co se naučíte:

• Zpracujte a ověřte formuláře
• Zpracování událostí (například když se změní pole)
• Pochopte, jak zobrazit a umístit prvky na stránku, zejména informace o kreditní kartě, které se zobrazují v horní části formuláře

Článek byl přeložen s podporou EDISON Software, která se stará o zdraví programátorů a jejich snídaněa vyvíjí software na zakázku.

2. Histogram

Histogram je tabulka nebo graf, který představuje kategorická data s obdélníkovými pruhy s výškami nebo délkami úměrnými hodnotám, které představují.

Mohou být aplikovány vertikálně nebo horizontálně. Svislý pruhový graf se někdy nazývá spojnicový graf.

Co se naučíte:

• Zobrazte data strukturovaným a srozumitelným způsobem
• Navíc: Naučte se používat prvek canvas a jak s ním kreslit prvky

Zde můžete najít údaje o světové populaci. Jsou seřazeny podle roku.

3. Twitter animace srdce

V roce 2016 představil Twitter tuto úžasnou animaci pro své tweety. Od roku 2019 to stále vypadá jako součást, tak proč si ji nevytvořit sami?

Co se naučíte:

• Práce s atributem CSS keyframes
• Manipulujte a animujte prvky HTML
• Kombinujte JavaScript, HTML a CSS

4. Repozitáře GitHub s funkcí vyhledávání

Není zde nic fantastického – repozitáře GitHub jsou jen oslavovaným seznamem.
Cílem je zobrazit úložiště a umožnit uživateli je filtrovat. Použití oficiální GitHub API získat úložiště pro každého uživatele.

Stránka profilu GitHub - github.com/indreklasn

Co se naučíte:

• Přijímat data z API
• Zobrazení dat z API
• Filtrujte a zobrazte relevantní data pro každé vyhledávání
• Volitelné: Pokud se chystáte na výzvu, použijte API v4, vytvořený pomocí GraphQL. Pokud se chcete naučit GraphQL, přejděte na jeden z mých předchozích článků.

5. Chaty ve stylu Reddit

Chaty jsou oblíbeným způsobem komunikace díky své jednoduchosti a snadnému použití. Ale co skutečně pohání moderní chatovací místnosti? WebSockets!

Co se naučíte:

• Používejte WebSockets, komunikaci v reálném čase a aktualizace dat
• Pracujte s úrovněmi přístupu uživatelů (role má například vlastník chatovacího kanálu admina další v místnosti - user)
• Zpracování a ověření formulářů – pamatujte, že okno chatu pro odeslání zprávy je input
• Vytvořte a připojte se k různým chatům
• Práce s osobními zprávami. Uživatelé mohou soukromě chatovat s ostatními uživateli. V podstatě budete vytvářet připojení WebSocket mezi dvěma uživateli.

6. Navigace ve stylu proužků

Co dělá tuto navigaci jedinečnou, je to, že vyskakovací kontejner se transformuje tak, aby odpovídal obsahu. Tento přechod má eleganci ve srovnání s tradičním chováním otevírání a zavírání nového popoveru.

Co se naučíte:

• Kombinujte animace CSS s přechody
• Ztlumte obsah a aplikujte aktivní třídu na plovoucí prvek

Zkuste to nejprve udělat sami, ale pokud potřebujete pomoc, podívejte se na toto průvodce krok za krokem.

Zdroj: www.habr.com