Anim na gawain para sa isang Front-End developer

1. Form ng credit card

Isang cool na hugis ng credit card na may makinis at kasiya-siyang mga micro-interaksyon. Kasama ang pag-format ng numero, pag-verify at awtomatikong pagtukoy ng uri ng card. Ito ay binuo sa Vue.js at ganap ding tumutugon. (Nakikita mo dito.)

credit-card-form

Ano ang matututunan mo:

• Iproseso at i-validate ang mga form
• Pangasiwaan ang mga kaganapan (halimbawa, kapag nagbago ang mga field)
• Unawain kung paano ipakita at ilagay ang mga elemento sa page, lalo na ang impormasyon ng credit card na lumalabas sa itaas ng form

Ang artikulo ay isinalin sa suporta ng EDISON Software, na pinangangalagaan ang kalusugan ng mga programmer at ang kanilang almusalAt bubuo ng custom na software.

2. Histogram

Ang histogram ay isang tsart o graph na kumakatawan sa kategoryang data na may mga parihabang bar na may taas o haba na proporsyonal sa mga halagang kinakatawan nila.

Maaari silang ilapat nang patayo o pahalang. Ang isang vertical bar chart ay tinatawag minsan na isang line chart.

Ano ang matututunan mo:

• Ipakita ang data sa isang structured at naiintindihan na paraan
• Dagdag pa: Alamin kung paano gamitin ang elemento canvas at kung paano gumuhit ng mga elemento kasama nito

Dito mahahanap mo ang data ng populasyon ng mundo. Ang mga ito ay pinagsunod-sunod ayon sa taon.

3. Twitter Heart Animation

Noong 2016, ipinakilala ng Twitter ang kamangha-manghang animation na ito para sa mga tweet nito. Bilang ng 2019, ito pa rin ang hitsura ng bahagi, kaya bakit hindi lumikha ng isa sa iyong sarili?

Ano ang matututunan mo:

• Makipagtulungan sa katangian ng CSS keyframes
• Manipulate at i-animate ang mga elemento ng HTML
• Pagsamahin ang JavaScript, HTML at CSS

4. Mga repositoryo ng GitHub na may function sa paghahanap

Walang kahanga-hanga dito—Ang mga repositoryo ng GitHub ay isa lamang niluluwalhati na listahan.
Ang layunin ay ipakita ang mga repositoryo at payagan ang user na i-filter ang mga ito. Gamitin opisyal na GitHub API upang makakuha ng mga repositoryo para sa bawat user.

Pahina ng profile sa GitHub - github.com/indreklasn

Ano ang matututunan mo:

• Tumanggap ng data mula sa API
• Ipakita ang data mula sa API
• I-filter at ipakita ang may-katuturang data para sa bawat paghahanap
• Opsyonal: Kung handa ka para sa isang hamon, gamitin API v4, na binuo gamit ang GraphQL. Kung gusto mong matutunan ang GraphQL, pumunta sa isa sa aking mga nakaraang artikulo.

5. Reddit-style na mga chat

Ang mga chat ay isang sikat na paraan ng komunikasyon dahil sa kanilang pagiging simple at kadalian ng paggamit. Ngunit ano ba talaga ang nagbibigay lakas sa mga modernong chat room? Mga WebSocket!

Ano ang matututunan mo:

• Gumamit ng WebSockets, real-time na komunikasyon at mga update sa data
• Makipagtulungan sa mga antas ng pag-access ng user (halimbawa, ang may-ari ng isang channel ng chat ang may tungkulin admin, at iba pa sa silid - user)
• Iproseso at patunayan ang mga form - tandaan, ang chat window para sa pagpapadala ng mensahe ay input
• Lumikha at sumali sa iba't ibang mga chat
• Makipagtulungan sa mga personal na mensahe. Maaaring makipag-chat ang mga user sa ibang mga user nang pribado. Mahalaga, magtatatag ka ng koneksyon sa WebSocket sa pagitan ng dalawang user.

6. Stripe-style na navigation

Ang natatangi sa nabigasyong ito ay ang pagbabago ng lalagyan ng popover upang magkasya sa nilalaman. May kagandahan ang paglipat na ito kumpara sa tradisyonal na gawi ng pagbubukas at pagsasara ng bagong popover.

Ano ang matututunan mo:

• Pagsamahin ang mga animation ng CSS sa mga transition
• I-dim ang content at ilapat ang aktibong klase sa floated element

Subukan mo munang gawin ito sa iyong sarili, ngunit kung kailangan mo ng tulong, tingnan ito hakbang-hakbang na gabay.

Pinagmulan: www.habr.com