Enem tugas kanggo pangembang Front-End

1. Formulir kertu kredit

A wangun kertu kredit kelangan karo Gamelan lan nyenengake mikro-interaksi. Kalebu format nomer, verifikasi lan deteksi jinis kertu otomatis. Iki dibangun ing Vue.js lan uga responsif. (Sampeyan bisa ndeleng kene.)

wangun kertu kredit

Apa sing bakal sampeyan sinau:

• Proses lan validasi formulir
• Ngatur acara (contone, nalika kolom diganti)
• Ngerti carane nampilake lan nyelehake unsur ing kaca, utamane informasi kertu kredit sing katon ing ndhuwur formulir

Artikel kasebut diterjemahake kanthi dhukungan saka EDISON Software, sing ngurus kesehatan programer lan sarapanLan ngembangake piranti lunak khusus.

2. Histogram

Histogram minangka bagan utawa grafik sing nggambarake data kategoris kanthi garis persegi panjang kanthi dhuwur utawa dawa sing sebanding karo nilai sing diwakili.

Padha bisa ditrapake kanthi vertikal utawa horisontal. Bagan garis vertikal kadhangkala disebut bagan garis.

Apa sing bakal sampeyan sinau:

• Tampilake data kanthi cara sing terstruktur lan bisa dingerteni
• Tambahan: Sinau carane nggunakake unsur kasebut canvas lan carane nggambar unsur karo

iku sampeyan bisa nemokake data populasi donya. Padha diurutake miturut taun.

3. Twitter Heart Animation

Mbalik ing 2016, Twitter ngenalake animasi sing luar biasa iki kanggo tweets. Ing taun 2019, isih katon bagean kasebut, mula kenapa ora nggawe dhewe?

Apa sing bakal sampeyan sinau:

• Bisa nganggo atribut CSS keyframes
• Manipulasi lan animasi unsur HTML
• Gabungke JavaScript, HTML lan CSS

4. Repositori GitHub kanthi fungsi telusuran

Ora ana sing apik ing kene - repositori GitHub mung dhaptar sing dimuliakake.
Tujuane kanggo nampilake repositori lan ngidini pangguna nyaring. Gunakake resmi GitHub API kanggo entuk repositori kanggo saben pangguna.

Kaca profil GitHub - github.com/indreklasn

Apa sing bakal sampeyan sinau:

• Nampa data saka API
• Tampilan data saka API
• Nyaring lan nuduhake data sing cocog kanggo saben panelusuran
• Opsional: Yen sampeyan duwe tantangan, gunakake API v4, dibangun nggunakake GraphQL. Yen sampeyan pengin sinau GraphQL, bukak salah sawijining artikel sadurunge.

5. Reddit-gaya chatting

Obrolan minangka cara komunikasi sing populer amarga kesederhanaan lan gampang digunakake. Nanging apa tenan bahan bakar kamar chatting modern? WebSockets!

Apa sing bakal sampeyan sinau:

• Gunakake WebSockets, komunikasi wektu nyata lan nganyari data
• Nggarap tingkat akses pangguna (contone, pamilik saluran obrolan duwe peran admin, lan liyane ing kamar - user)
• Proses lan validasi formulir - elinga, jendhela chatting kanggo ngirim pesen yaiku input
• Gawe lan gabung karo macem-macem obrolan
• Bisa nganggo pesen pribadi. Pangguna bisa ngobrol karo pangguna liyane kanthi pribadi. Ateges, sampeyan bakal nggawe sambungan WebSocket antarane rong pangguna.

6. Stripe-gaya pandhu arah

Sing nggawe navigasi iki unik yaiku wadhah popover diowahi supaya pas karo konten. Ana keanggunan kanggo transisi iki dibandhingake karo prilaku tradisional mbukak lan nutup popover anyar.

Apa sing bakal sampeyan sinau:

• Gabungke animasi CSS karo transisi
• Dim isi lan aplikasi kelas aktif kanggo unsur ngambang

Coba gawe dhewe dhisik, nanging yen sampeyan butuh pitulung, priksa iki pandhuan langkah demi langkah.

Source: www.habr.com