Kazi sita za msanidi wa Front-End

1. Fomu ya kadi ya mkopo

Muundo mzuri wa kadi ya mkopo na mwingiliano laini na wa kufurahisha. Inajumuisha uumbizaji wa nambari, uthibitishaji na utambuzi wa aina ya kadi kiotomatiki. Imejengwa kwenye Vue.js na pia inajibu kikamilifu. (Unaweza kuona hapa.)

fomu ya kadi ya mkopo

Utajifunza nini:

• Mchakato na uthibitishe fomu
• Kushughulikia matukio (kwa mfano, wakati sehemu zinabadilika)
• Elewa jinsi ya kuonyesha na kuweka vipengele kwenye ukurasa, hasa maelezo ya kadi ya mkopo ambayo yanaonekana juu ya fomu

Nakala hiyo ilitafsiriwa kwa usaidizi wa Programu ya EDISON, ambayo inajali afya ya waandaaji wa programu na kifungua kinywa chaoNa hutengeneza programu maalum.

2. Histogram

Histogram ni chati au grafu inayowakilisha data ya kategoria yenye pau za mstatili zenye urefu au urefu sawia na thamani zinazowakilisha.

Wanaweza kutumika kwa wima au kwa usawa. Chati ya upau wima wakati mwingine huitwa chati ya mstari.

Utajifunza nini:

• Onyesha data kwa njia iliyopangwa na inayoeleweka
• Zaidi ya hayo: Jifunze jinsi ya kutumia kipengele canvas na jinsi ya kuteka vipengele nayo

Hapa unaweza kupata data ya idadi ya watu duniani. Wao hupangwa kwa mwaka.

3. Twitter Moyo Uhuishaji

Huko nyuma mnamo 2016, Twitter ilianzisha uhuishaji huu wa kushangaza kwa tweets zake. Kufikia 2019, bado inaonekana kama sehemu, kwa nini usiunde mwenyewe?

Utajifunza nini:

• Fanya kazi na sifa ya CSS keyframes
• Dhibiti na uhuishe vipengele vya HTML
• Kuchanganya JavaScript, HTML na CSS

4. Hifadhi za GitHub zilizo na kipengele cha utafutaji

Hakuna kitu cha kupendeza hapa - hazina za GitHub ni orodha iliyotukuzwa tu.
Lengo ni kuonyesha hazina na kuruhusu mtumiaji kuzichuja. Tumia API rasmi ya GitHub kupata hazina kwa kila mtumiaji.

Ukurasa wa wasifu wa GitHub - github.com/indreklasn

Utajifunza nini:

• Pokea data kutoka kwa API
• Onyesha data kutoka kwa API
• Chuja na uonyeshe data muhimu kwa kila utafutaji
• Hiari: Ikiwa unatafuta changamoto, tumia API v4, iliyojengwa kwa kutumia GraphQL. Ikiwa unataka kujifunza GraphQL, nenda kwenye mojawapo ya makala zangu zilizopita.

5. Soga za mtindo wa Reddit

Gumzo ni njia maarufu ya mawasiliano kutokana na urahisi na urahisi wa matumizi. Lakini ni nini hasa huchochea vyumba vya mazungumzo vya kisasa? WebSockets!

Utajifunza nini:

• Tumia WebSockets, mawasiliano ya wakati halisi na masasisho ya data
• Fanya kazi na viwango vya ufikiaji wa mtumiaji (kwa mfano, mmiliki wa kituo cha gumzo ana jukumu admin, na wengine chumbani - user)
• Mchakato na uthibitishe fomu - kumbuka, dirisha la gumzo la kutuma ujumbe ni input
• Unda na ujiunge na gumzo tofauti
• Работать с личными сообщениями. Пользователи могут общаться с другими пользователями в частном порядке. По сути, вы будете устанавливать соединение WebSocket’а между двумя пользователями.

6. Urambazaji wa mtindo wa mistari

Kinachofanya urambazaji huu kuwa wa kipekee ni kwamba chombo cha popover hubadilika ili kutoshea maudhui. Kuna uzuri wa mpito huu ikilinganishwa na tabia ya jadi ya kufungua na kufunga popover mpya.

Utajifunza nini:

• Changanya uhuishaji wa CSS na mabadiliko
• Fifisha maudhui na utumie darasa linalotumika kwenye kipengele kilichoelea

Jaribu kuifanya mwenyewe kwanza, lakini ikiwa unahitaji msaada, angalia hii mwongozo wa hatua kwa hatua.

Chanzo: mapenzi.com