Genep tugas pikeun pamekar Front-Ahir

1. formulir kartu kiridit

Bentuk kartu kiridit anu saé kalayan interaksi mikro anu lancar sareng pikaresepeun. Ngawengku pormat angka, verifikasi jeung deteksi tipe kartu otomatis. Hal ieu diwangun dina Vue.js sarta ogé pinuh responsif. (Anjeun tiasa ningali di dieu.)

kiridit-kartu-formulir

Naon anu anjeun bakal diajar:

• Proses sareng validasi bentuk
• Nanganan acara (contona, nalika widang robah)
• Ngartos kumaha cara nampilkeun sareng nempatkeun elemen dina halaman, khususna inpormasi kartu kiridit anu muncul dina luhureun formulir

Artikel ieu ditarjamahkeun kalayan dukungan EDISON Software, anu ngurus kaséhatan programer jeung sarapan maranéhananajeung ngembangkeun software custom.

2. Histogram

Histogram nyaéta bagan atawa grafik anu ngagambarkeun data katégori jeung bar rectangular kalayan jangkungna atawa panjangna sabanding jeung nilai anu diwakilan.

Éta tiasa diterapkeun sacara vertikal atanapi horisontal. Bagan bar nangtung sok disebut bagan garis.

Naon anu anjeun bakal diajar:

• Témbongkeun data dina cara terstruktur tur kaharti
• Salaku tambahan: Diajar kumaha ngagunakeun unsur canvas sareng kumaha ngagambar unsur-unsurna

Ieu téh anjeun tiasa mendakan data populasi dunya. Aranjeunna diurutkeun dumasar taun.

3. Twitter Heart animasi

Deui dina 2016, Twitter ngenalkeun animasi endah ieu pikeun tweets na. Dina taun 2019, éta masih katingali bagian éta, janten naha henteu nyiptakeun hiji diri?

Naon anu anjeun bakal diajar:

• Gawe sareng atribut CSS keyframes
• Ngamanipulasi sareng ngahirupkeun elemen HTML
• Ngagabungkeun JavaScript, HTML jeung CSS

4. Repositories GitHub kalawan fungsi pilarian

Henteu aya anu pikaresepeun di dieu - repositori GitHub ngan ukur daptar anu dimulyakeun.
Tujuanana nyaéta pikeun nampilkeun repositori sareng ngamungkinkeun pangguna pikeun nyaring aranjeunna. Paké resmi GitHub API pikeun meunangkeun repositories pikeun tiap pamaké.

Kaca profil GitHub - github.com/indreklasn

Naon anu anjeun bakal diajar:

• Nampi data tina API
• Témbongkeun data tina API
• Nyaring sareng nunjukkeun data anu relevan pikeun unggal pamilarian
• Opsional: Upami anjeun nuju tangtangan, paké API v4, diwangun ngagunakeun GraphQL. Upami anjeun hoyong diajar GraphQL, angkat ka salah sahiji tulisan kuring sateuacana.

5. Reddit-gaya obrolan

Obrolan mangrupikeun cara komunikasi anu populer kusabab kesederhanaan sareng gampang dianggo. Tapi naon bener suluh kamar obrolan modern? WebSockets!

Naon anu anjeun bakal diajar:

• Paké WebSockets, komunikasi real-time jeung apdet data
• Gawe sareng tingkat aksés pamaké (contona, nu boga saluran obrolan boga peran admin, jeung batur di kamar - user)
• Ngolah sareng ngabuktoskeun bentuk - émut, jandela obrolan pikeun ngirim pesen nyaéta input
• Jieun tur gabung obrolan béda
• Gawe sareng pesen pribadi. Pamaké tiasa ngobrol sareng pangguna sanés sacara pribadi. Intina, anjeun bakal ngadamel sambungan WebSocket antara dua pangguna.

6. Napigasi gaya belang

Anu ngajadikeun navigasi ieu unik nyaéta wadah popover dirobih pikeun nyocogkeun kana eusi. Aya kaanggunan pikeun transisi ieu dibandingkeun sareng kabiasaan tradisional muka sareng nutup popover énggal.

Naon anu anjeun bakal diajar:

• Ngagabungkeun animasi CSS jeung transisi
• Taram eusi jeung nerapkeun kelas aktip ka elemen floated

Coba lakukeun sorangan heula, tapi lamun butuh pitulung, pariksa kaluar ieu step by pituduh hambalan.

sumber: www.habr.com