Šesť úloh pre vývojára front-endu

1. Formulár kreditnej karty

Skvelý tvar kreditnej karty s hladkými a príjemnými mikrointerakciami. Zahŕňa formátovanie čísel, overovanie a automatickú detekciu typu karty. Je postavený na Vue.js a je tiež plne responzívny. (Môžeš vidieť tu.)

formulár kreditnej karty

Čo sa naučíte:

• Spracujte a overte formuláre
• Spracovanie udalostí (napríklad keď sa zmenia polia)
• Pochopte, ako zobraziť a umiestniť prvky na stránku, najmä informácie o kreditnej karte, ktoré sa zobrazujú v hornej časti formulára

Článok bol preložený s podporou EDISON Software, ktorá sa stará o zdravie programátorov a ich raňajkya vyvíja softvér na mieru.

2. Histogram

Histogram je tabuľka alebo graf, ktorý predstavuje kategorické údaje s obdĺžnikovými pruhmi s výškami alebo dĺžkami úmernými hodnotám, ktoré predstavujú.

Môžu byť aplikované vertikálne alebo horizontálne. Zvislý pruhový graf sa niekedy nazýva čiarový graf.

Čo sa naučíte:

• Zobrazujte údaje štruktúrovaným a zrozumiteľným spôsobom
• Okrem toho: Naučte sa používať prvok canvas a ako s ním kresliť prvky

Tu môžete nájsť údaje o svetovej populácii. Sú zoradené podľa ročníkov.

3. Twitter Heart Animation

V roku 2016 Twitter predstavil túto úžasnú animáciu pre svoje tweety. Od roku 2019 to stále vyzerá ako súčasť, tak prečo si ju nevytvoriť sami?

Čo sa naučíte:

• Práca s atribútom CSS keyframes
• Manipulujte a animujte prvky HTML
• Kombinujte JavaScript, HTML a CSS

4. Repozitáre GitHub s funkciou vyhľadávania

Nie je tu nič fantastické – repozitáre GitHub sú len oslavovaným zoznamom.
Cieľom je zobraziť úložiská a umožniť používateľovi ich filtrovanie. Použite oficiálne GitHub API získať úložiská pre každého používateľa.

Stránka profilu GitHub - github.com/indreklasn

Čo sa naučíte:

• Prijímať údaje z API
• Zobrazenie údajov z API
• Filtrujte a zobrazte relevantné údaje pre každé vyhľadávanie
• Voliteľné: Ak sa chystáte na výzvu, použite API v4, vytvorený pomocou GraphQL. Ak sa chcete naučiť GraphQL, prejdite na jeden z mojich predchádzajúcich článkov.

5. Chaty v štýle Reddit

Chaty sú obľúbeným spôsobom komunikácie vďaka ich jednoduchosti a jednoduchosti používania. Čo však skutočne poháňa moderné chatovacie miestnosti? WebSockets!

Čo sa naučíte:

• Používajte WebSockets, komunikáciu v reálnom čase a aktualizácie údajov
• Pracujte s úrovňami prístupu používateľov (úlohu má napríklad vlastník chatovacieho kanála admina ďalší v miestnosti - user)
• Spracujte a overte formuláre - nezabudnite, že okno chatu na odoslanie správy je input
• Vytvorte a pripojte sa k rôznym chatom
• Pracujte s osobnými správami. Používatelia môžu súkromne chatovať s ostatnými používateľmi. V podstate vytvoríte pripojenie WebSocket medzi dvoma používateľmi.

6. Navigácia v pruhovom štýle

Čo robí túto navigáciu jedinečnou, je to, že popover kontajner sa transformuje tak, aby zodpovedal obsahu. Tento prechod má eleganciu v porovnaní s tradičným správaním otvárania a zatvárania nového popoveru.

Čo sa naučíte:

• Kombinujte animácie CSS s prechodmi
• Stlmte obsah a aplikujte aktívnu triedu na plávajúci prvok

Skúste to najskôr urobiť sami, ale ak potrebujete pomoc, pozrite si toto sprievodca krok za krokom.

Zdroj: hab.com