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 .)
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 Ir .
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ą
canvasir kaip juo piešti elementus
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 gauti saugyklas kiekvienam vartotojui.
„GitHub“ profilio puslapis –
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 , sukurta naudojant GraphQL. .
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 .
Šaltinis: www.habr.com
