Šest nalog za Front-End razvijalca

1. Obrazec kreditne kartice

Kul oblika kreditne kartice z gladkimi in prijetnimi mikrointerakcijami. Vključuje oblikovanje številk, preverjanje in samodejno zaznavanje vrste kartice. Zgrajen je na Vue.js in je tudi popolnoma odziven. (Lahko vidiš tukaj.)

obrazec za kreditno kartico

Kaj se boste naučili:

• Obdelajte in potrdite obrazce
• Obravnava dogodkov (na primer, ko se spremenijo polja)
• Razumeti, kako prikazati in postaviti elemente na stran, zlasti podatke o kreditni kartici, ki se prikažejo na vrhu obrazca

Članek je bil preveden s podporo EDISON Software, ki skrbi za zdravje programerjev in njihov zajtrkin razvija programsko opremo po meri.

2. Histogram

Histogram je grafikon ali graf, ki predstavlja kategorične podatke s pravokotnimi palicami z višinami ali dolžinami, sorazmernimi z vrednostmi, ki jih predstavljajo.

Nanašajo se lahko navpično ali vodoravno. Navpični palični grafikon se včasih imenuje črtni grafikon.

Kaj se boste naučili:

• Prikažite podatke na strukturiran in razumljiv način
• Dodatno: Naučite se uporabljati element canvas in kako z njim narisati elemente

Tukaj najdete podatke o svetovnem prebivalstvu. Razvrščeni so po letih.

3. Twitter Heart Animation

Leta 2016 je Twitter predstavil to neverjetno animacijo za svoje tvite. Od leta 2019 je še vedno videti del, zakaj ga torej ne bi ustvarili sami?

Kaj se boste naučili:

• Delo z atributom CSS keyframes
• Manipulirajte in animirajte elemente HTML
• Združite JavaScript, HTML in CSS

4. Repozitoriji GitHub s funkcijo iskanja

Tukaj ni nič posebnega – repozitoriji GitHub so le poveličan seznam.
Cilj je prikazati repozitorije in omogočiti uporabniku, da jih filtrira. Uporaba uradni GitHub API pridobiti repozitorije za vsakega uporabnika.

Stran profila GitHub - github.com/indreklasn

Kaj se boste naučili:

• Prejemanje podatkov iz API-ja
• Prikaz podatkov iz API-ja
• Filtrirajte in prikažite ustrezne podatke za vsako iskanje
• Izbirno: Če ste pripravljeni na izziv, uporabite API v4, izdelan z uporabo GraphQL. Če se želite naučiti GraphQL, pojdite na enega od mojih prejšnjih člankov.

5. Klepeti v slogu Reddit

Klepeti so priljubljen način komunikacije zaradi svoje preprostosti in enostavne uporabe. Toda kaj v resnici spodbuja sodobne klepetalnice? WebSockets!

Kaj se boste naučili:

• Uporabite WebSockets, komunikacijo v realnem času in posodobitve podatkov
• Delo z uporabniškimi stopnjami dostopa (na primer, lastnik klepetalnega kanala ima vlogo admin, in drugi v sobi - user)
• Obdelajte in potrdite obrazce – ne pozabite, okno za klepet za pošiljanje sporočil je input
• Ustvarite različne klepete in se jim pridružite
• Delo z osebnimi sporočili. Uporabniki lahko zasebno klepetajo z drugimi uporabniki. V bistvu boste vzpostavili povezavo WebSocket med dvema uporabnikoma.

6. Navigacija v slogu črt

To navigacijo naredi edinstveno to, da se popover vsebnik preoblikuje, da ustreza vsebini. Ta prehod je eleganco v primerjavi s tradicionalnim vedenjem odpiranja in zapiranja novega popoverja.

Kaj se boste naučili:

• Kombinirajte animacije CSS s prehodi
• Zatemnite vsebino in uporabite aktivni razred za lebdeči element

Najprej poskusite to narediti sami, če pa potrebujete pomoč, si oglejte to vodnik po korakih.

Vir: www.habr.com