Seis taken foar in Front-End-ûntwikkelder

1. Credit card formulier

In koele kredytkaartfoarm mei glêde en noflike mikro-ynteraksjes. Omfettet nûmeropmaak, ferifikaasje en automatyske deteksje fan kaarttype. It is boud op Vue.js en is ek folslein responsyf. (Do kinst sjen hjir.)

creditcard-formulier

Wat jo leare:

• Formulier ferwurkje en falidearje
• Behannelje eveneminten (bygelyks as fjilden feroarje)
• Begryp hoe't jo eleminten op 'e side werjaan en pleatse, benammen de kredytkaartynformaasje dy't boppe op it formulier ferskynt

It artikel waard oerset mei de stipe fan EDISON Software, dy't soarget foar de sûnens fan programmeurs en har moarnsiten, lykas ek ûntwikkelet oanpaste software.

2. Histogram

In histogram is in diagram of grafyk dy't kategoriale gegevens fertsjintwurdiget mei rjochthoekige balken mei hichten of lingten evenredich mei de wearden dy't se fertsjintwurdigje.

Se kinne fertikaal of horizontaal tapast wurde. In fertikale staafdiagram wurdt soms in linediagram neamd.

Wat jo leare:

• Toan gegevens op in strukturearre en begryplike manier
• Derneist: Learje hoe't jo it elemint brûke canvas en hoe te tekenjen eleminten mei it

it is Jo kinne gegevens oer de wrâldbefolking fine. Se wurde sortearre op jier.

3. Twitter Heart Animation

Werom yn 2016 yntrodusearre Twitter dizze geweldige animaasje foar har tweets. Fanôf 2019 liket it noch altyd it diel, dus wêrom net sels ien meitsje?

Wat jo leare:

• Wurkje mei CSS-attribút keyframes
• Manipulearje en animearje HTML-eleminten
• Kombinearje JavaScript, HTML en CSS

4. GitHub repositories mei sykfunksje

D'r is hjir neat fancy - GitHub-repositories binne gewoan in ferhearlike list.
It doel is om de repositories wer te jaan en de brûker se te filterjen. Brûke offisjele GitHub API om repositories foar elke brûker te krijen.

GitHub profyl side - github.com/indreklasn

Wat jo leare:

• Untfang gegevens fan API
• Toan gegevens fan API
• Filter en lit relevante gegevens sjen foar elke sykopdracht
• Opsjoneel: as jo foar in útdaging binne, brûk dan API v4, boud mei GraphQL. As jo ​​GraphQL wolle leare, gean dan nei ien fan myn eardere artikels.

5. Chats yn Reddit-styl

Chats binne in populêre manier fan kommunikaasje fanwegen har ienfâld en gemak fan gebrûk. Mar wat echt brânstof moderne petearkeamers? WebSockets!

Wat jo leare:

• Brûk WebSockets, real-time kommunikaasje en gegevens updates
• Wurkje mei brûkerstagongsnivo's (bygelyks hat de eigner fan in petearkanaal de rol admin, en oaren yn 'e keamer - user)
• Formulier ferwurkje en falidearje - tink derom, it petearfinster foar it ferstjoeren fan in berjocht is input
• Meitsje en doch mei oan ferskate petearen
• Wurkje mei persoanlike berjochten. Brûkers kinne privee petearje mei oare brûkers. Yn essinsje sille jo in WebSocket-ferbining meitsje tusken twa brûkers.

6. Stripe-styl navigaasje

Wat dizze navigaasje unyk makket, is dat de popover-container transformeart om by de ynhâld te passen. D'r is in elegânsje oan dizze oergong yn ferliking mei it tradisjonele gedrach fan it iepenjen en sluten fan in nije popover.

Wat jo leare:

• Kombinearje CSS-animaasjes mei transysjes
• Dim ynhâld en tapasse aktive klasse op driuwend elemint

Besykje it earst sels te dwaan, mar as jo help nedich binne, besjoch dit dan stap foar stap gids.

Boarne: www.habr.com