Sitt kompiti għal żviluppatur Front-End

1. Formola tal-karta tal-kreditu

Forma ta 'karta ta' kreditu friska b'mikro-interazzjonijiet bla xkiel u pjaċevoli. Jinkludi l-ifformattjar tan-numri, il-verifika u s-sejbien awtomatiku tat-tip tal-karta. Hija mibnija fuq Vue.js u hija wkoll tirrispondi bis-sħiħ. (Inti tista tara hawn.)

karta-kreditu-forma

Dak li ser titgħallem:

• Ipproċessa u tivvalida l-formoli
• Immaniġġja l-avvenimenti (pereżempju, meta l-oqsma jinbidlu)
• Ifhem kif turi u tpoġġi elementi fuq il-paġna, speċjalment l-informazzjoni tal-karta tal-kreditu li tidher fuq il-formola

L-artiklu ġie tradott bl-appoġġ ta 'EDISON Software, li jieħu ħsieb is-saħħa tal-programmaturi u l-kolazzjon tagħhomU tiżviluppa softwer apposta.

2. Istogramma

Istogramma hija chart jew graff li tirrappreżenta data kategorika b'vireg rettangolari b'għoli jew tul proporzjonali għall-valuri li jirrappreżentaw.

Jistgħu jiġu applikati vertikalment jew orizzontalment. A bar chart vertikali kultant tissejjaħ line chart.

Dak li ser titgħallem:

• Uri d-dejta b'mod strutturat u li jinftiehem
• Barra minn hekk: Tgħallem kif tuża l-element canvas u kif tiġbed elementi magħha

Hawnhekk tista' ssib data dwar il-popolazzjoni dinjija. Dawn huma magħżula skond is-sena.

3. Animazzjoni tal-Qalb ta' Twitter

Lura fl-2016, Twitter introduċa din l-animazzjoni aqwa għat-tweets tagħha. Mill-2019, għadu jidher il-parti, allura għaliex ma toħloqx waħda lilek innifsek?

Dak li ser titgħallem:

• Xogħol bl-attribut CSS keyframes
• Manipula u janima elementi HTML
• Għaqqad JavaScript, HTML u CSS

4. Repożitorji GitHub b'funzjoni ta 'tfittxija

M'hemm xejn fancy hawn—repożitorji GitHub huma biss lista glorifikata.
L-għan huwa li juri r-repożitorji u jippermetti lill-utent jiffiltrahom. Użu GitHub API uffiċjali biex tikseb repożitorji għal kull utent.

Paġna tal-profil GitHub - github.com/indreklasn

Dak li ser titgħallem:

• Irċievi data mill-API
• Uri dejta mill-API
• Iffiltra u uri d-dejta rilevanti għal kull tfittxija
• Fakultattiv: Jekk int għal sfida, uża API v4, mibnija bl-użu ta 'GraphQL. Jekk trid titgħallem GraphQL, mur wieħed mill-artikoli preċedenti tiegħi.

5. chats stil Reddit

Iċ-chats huma mod popolari ta’ komunikazzjoni minħabba s-sempliċità u l-faċilità ta’ użu tagħhom. Imma x'inhu verament fjuwils chat rooms moderni? WebSockets!

Dak li ser titgħallem:

• Uża WebSockets, komunikazzjoni f'ħin reali u aġġornamenti tad-dejta
• Aħdem mal-livelli ta 'aċċess għall-utent (per eżempju, is-sid ta' kanal ta 'chat għandu r-rwol admin, u oħrajn fil-kamra - user)
• Ipproċessa u vvalida formoli - ftakar, it-tieqa taċ-chat biex jintbagħat messaġġ hija input
• Oħloq u ingħaqad ma' chats differenti
• Aħdem b'messaġġi personali. L-utenti jistgħu chat ma' utenti oħra privatament. Essenzjalment, tkun qed tistabbilixxi konnessjoni WebSocket bejn żewġ utenti.

6. Navigazzjoni stil strixxa

Dak li jagħmel din in-navigazzjoni unika huwa li l-kontenitur popover jittrasforma biex joqgħod mal-kontenut. Hemm eleganti għal din it-tranżizzjoni meta mqabbla ma 'l-imġieba tradizzjonali tal-ftuħ u l-għeluq ta' popover ġdid.

Dak li ser titgħallem:

• Għaqqad animazzjonijiet CSS ma 'tranżizzjonijiet
• Iddgħajjef il-kontenut u applika klassi attiva għal element floated

Ipprova agħmel it yourself l-ewwel, imma jekk għandek bżonn għajnuna, iċċekkja dan gwida pass pass.

Sors: www.habr.com