Šešios užduotys Front-End kūrėjui

1. Kredito kortelės forma

Šauni kreditinės kortelės forma su sklandžia ir malonia mikro sąveika. Apima skaičių formatavimą, patikrinimą ir automatinį kortelės tipo aptikimą. Jis sukurtas Vue.js ir taip pat visiškai reaguoja. (Jūs galite pamatyti čia.)

kredito kortelės forma

Ką išmoksite:

• Apdorokite ir patvirtinkite formas
• Tvarkyti įvykius (pavyzdžiui, kai keičiasi laukai)
• Supraskite, kaip pateikti ir įdėti elementus puslapyje, ypač kredito kortelės informaciją, kuri rodoma formos viršuje

Straipsnis buvo išverstas su EDISON Software pagalba, kuri rūpinasi programuotojų sveikata ir jų pusryčiaisIr kuria individualią programinę įrangą.

2. Histograma

Histograma yra diagrama arba grafikas, vaizduojantis kategoriškus duomenis su stačiakampėmis juostomis, kurių aukščiai arba ilgiai yra proporcingi jų nurodytoms reikšmėms.

Jie gali būti naudojami vertikaliai arba horizontaliai. Vertikali juostinė diagrama kartais vadinama linijine diagrama.

Ką išmoksite:

• Pateikite duomenis struktūrizuotu ir suprantamu būdu
• Papildomai: išmokite naudoti elementą canvas ir kaip juo piešti elementus

Čia galite rasti pasaulio gyventojų duomenis. Jie surūšiuoti pagal metus.

3. „Twitter Heart“ animacija

2016 m. „Twitter“ pristatė šią nuostabią animaciją savo „tweet“ žinutėms. Nuo 2019 m. ji vis dar atrodo kaip dalis, tad kodėl gi nesukūrus jos pačiam?

Ką išmoksite:

• Darbas su CSS atributu keyframes
• Manipuliuoti ir animuoti HTML elementus
• Sujunkite JavaScript, HTML ir CSS

4. GitHub saugyklos su paieškos funkcija

Čia nėra nieko įmantraus – „GitHub“ saugyklos yra tik pašlovintas sąrašas.
Tikslas yra rodyti saugyklas ir leisti vartotojui jas filtruoti. Naudokite oficiali GitHub API gauti saugyklas kiekvienam vartotojui.

„GitHub“ profilio puslapis – github.com/indreklasn

Ką išmoksite:

• Gaukite duomenis iš API
• Rodyti duomenis iš API
• Filtruokite ir rodykite atitinkamus kiekvienos paieškos duomenis
• Pasirenkama: jei laukiate iššūkio, naudokite API v4, sukurta naudojant GraphQL. Jei norite išmokti GraphQL, eikite į vieną iš ankstesnių mano straipsnių.

5. Reddit stiliaus pokalbiai

Pokalbiai yra populiarus bendravimo būdas dėl savo paprastumo ir lengvo naudojimo. Bet kas iš tikrųjų skatina šiuolaikinius pokalbių kambarius? WebSockets!

Ką išmoksite:

• Naudokite „WebSockets“, ryšį realiuoju laiku ir duomenų atnaujinimus
• Dirbkite su vartotojo prieigos lygiais (pavyzdžiui, pokalbių kanalo savininkas turi vaidmenį admin, ir kiti esantys kambaryje - user)
• Apdorokite ir patvirtinkite formas – atminkite, kad pokalbio langas yra žinutės siuntimui input
• Kurkite ir prisijunkite prie įvairių pokalbių
• Darbas su asmeninėmis žinutėmis. Vartotojai gali kalbėtis su kitais vartotojais privačiai. Iš esmės jūs užmegsite „WebSocket“ ryšį tarp dviejų vartotojų.

6. Juostelių stiliaus navigacija

Šis naršymas unikalus yra tas, kad iššokantis konteineris transformuojamas, kad atitiktų turinį. Šis perėjimas pasižymi elegancija, palyginti su tradiciniu elgesiu atidarant ir uždarant naują iššokantįjį.

Ką išmoksite:

• Derinkite CSS animaciją su perėjimais
• Pritemdykite turinį ir pritaikykite aktyvią klasę slankiajam elementui

Pirmiausia pabandykite tai padaryti patys, bet jei jums reikia pagalbos, peržiūrėkite tai žingsnis po žingsnio vadovas.

Šaltinis: www.habr.com