Gjashtë detyra për një zhvillues Front-End

1. Formulari i kartës së kreditit

Një formë e lezetshme e kartës së kreditit me mikro-ndërveprime të qetë dhe të këndshme. Përfshin formatimin e numrave, verifikimin dhe zbulimin automatik të llojit të kartës. Është ndërtuar në Vue.js dhe është gjithashtu plotësisht e përgjegjshme. (Ti mund te shohesh këtu.)

formulari i kartës së kreditit

Çfarë do të mësoni:

• Përpunoni dhe vërtetoni formularët
• Trajtoni ngjarjet (për shembull, kur ndryshojnë fushat)
• Kuptoni se si të shfaqni dhe vendosni elementë në faqe, veçanërisht informacionin e kartës së kreditit që shfaqet në krye të formularit

Artikulli është përkthyer me mbështetjen e EDISON Software, i cili kujdeset për shëndetin e programuesve dhe mëngjesin e tyreDhe zhvillon softuer të personalizuar.

2. Histogram

Një histogram është një grafik ose grafik që paraqet të dhëna kategorike me shufra drejtkëndëshe me lartësi ose gjatësi proporcionale me vlerat që ato përfaqësojnë.

Ato mund të aplikohen vertikalisht ose horizontalisht. Një grafik me shtylla vertikale nganjëherë quhet një tabelë vijash.

Çfarë do të mësoni:

• Shfaqni të dhënat në mënyrë të strukturuar dhe të kuptueshme
• Për më tepër: Mësoni se si të përdorni elementin canvas dhe si të vizatohen elemente me të

Këtu mund të gjeni të dhëna për popullsinë botërore. Ato janë të renditura sipas vitit.

3. Twitter Heart Animation

Në vitin 2016, Twitter prezantoi këtë animacion të mahnitshëm për tweet-et e tij. Që nga viti 2019, duket ende pjesa, kështu që pse të mos e krijoni vetë?

Çfarë do të mësoni:

• Punoni me atributin CSS keyframes
• Manipuloni dhe animoni elementet HTML
• Kombinoni JavaScript, HTML dhe CSS

4. Depot e GitHub me funksion kërkimi

Nuk ka asgjë të zbukuruar këtu - depot e GitHub janë thjesht një listë e lavdëruar.
Qëllimi është të shfaqni depot dhe t'i lejoni përdoruesit t'i filtrojë ato. Përdorni API zyrtare GitHub për të marrë depo për çdo përdorues.

Faqja e profilit të GitHub - github.com/indreklasn

Çfarë do të mësoni:

• Merr të dhëna nga API
• Shfaq të dhënat nga API
• Filtro dhe shfaq të dhënat përkatëse për çdo kërkim
• Opsionale: Nëse jeni gati për një sfidë, përdorni API v4, i ndërtuar duke përdorur GraphQL. Nëse doni të mësoni GraphQL, shkoni te një nga artikujt e mi të mëparshëm.

5. Biseda të stilit Reddit

Bisedat janë një mënyrë e njohur komunikimi për shkak të thjeshtësisë dhe lehtësisë së përdorimit. Por çfarë i ushqen vërtet dhomat e bisedave moderne? WebSockets!

Çfarë do të mësoni:

• Përdorni WebSockets, komunikim në kohë reale dhe përditësime të të dhënave
• Punoni me nivelet e aksesit të përdoruesve (për shembull, pronari i një kanali bisede ka rolin admin, dhe të tjerët në dhomë - user)
• Përpunoni dhe vërtetoni formularët - mbani mend, dritarja e bisedës për dërgimin e një mesazhi është input
• Krijoni dhe bashkohuni në biseda të ndryshme
• Punoni me mesazhe personale. Përdoruesit mund të bisedojnë privatisht me përdoruesit e tjerë. Në thelb, ju do të krijoni një lidhje WebSocket midis dy përdoruesve.

6. Navigacion në stilin e shiritave

Ajo që e bën këtë navigim unik është se kontejneri popover transformohet për t'iu përshtatur përmbajtjes. Ky tranzicion ka një elegancë krahasuar me sjelljen tradicionale të hapjes dhe mbylljes së një popover të ri.

Çfarë do të mësoni:

• Kombinoni animacionet CSS me tranzicionet
• Zbeh përmbajtjen dhe apliko klasën aktive në elementin e lëvizur

Provoni ta bëni vetë fillimisht, por nëse keni nevojë për ndihmë, shikoni këtë udhëzues hap pas hapi.

Burimi: www.habr.com