Enam tugas untuk pembangun Front-End

1. Borang kad kredit

Bentuk kad kredit yang menarik dengan interaksi mikro yang lancar dan menyeronokkan. Termasuk pemformatan nombor, pengesahan dan pengesanan jenis kad automatik. Ia dibina pada Vue.js dan juga responsif sepenuhnya. (Awak boleh lihat di sini.)

borang kad kredit

Perkara yang akan anda pelajari:

• Memproses dan mengesahkan borang
• Mengendalikan acara (contohnya, apabila medan berubah)
• Fahami cara memaparkan dan meletakkan elemen pada halaman, terutamanya maklumat kad kredit yang muncul di bahagian atas borang

Artikel tersebut telah diterjemahkan dengan sokongan Perisian EDISON, yang menjaga kesihatan pengaturcara dan sarapan pagi merekaDan membangunkan perisian tersuai.

2. Histogram

Histogram ialah carta atau graf yang mewakili data kategori dengan bar segi empat tepat dengan ketinggian atau panjang berkadar dengan nilai yang diwakilinya.

Mereka boleh digunakan secara menegak atau mendatar. Carta bar menegak kadangkala dipanggil carta garis.

Perkara yang akan anda pelajari:

• Paparkan data dengan cara yang tersusun dan boleh difahami
• Selain itu: Ketahui cara menggunakan elemen canvas dan cara melukis elemen dengannya

ia adalah anda boleh mencari data populasi dunia. Mereka disusun mengikut tahun.

3. Animasi Hati Twitter

Kembali pada tahun 2016, Twitter memperkenalkan animasi yang menakjubkan ini untuk tweetnya. Sehingga 2019, ia masih kelihatan sebagai bahagian, jadi mengapa tidak buat sendiri?

Perkara yang akan anda pelajari:

• Bekerja dengan atribut CSS keyframes
• Memanipulasi dan menghidupkan elemen HTML
• Gabungkan JavaScript, HTML dan CSS

4. Repositori GitHub dengan fungsi carian

Tiada yang menarik di sini—repositori GitHub hanyalah senarai yang dimuliakan.
Matlamatnya adalah untuk memaparkan repositori dan membenarkan pengguna menapisnya. guna API GitHub rasmi untuk mendapatkan repositori untuk setiap pengguna.

Halaman profil GitHub - github.com/indreklasn

Perkara yang akan anda pelajari:

• Terima data daripada API
• Paparkan data daripada API
• Tapis dan tunjukkan data yang berkaitan untuk setiap carian
• Pilihan: Jika anda bersedia menghadapi cabaran, gunakan API v4, dibina menggunakan GraphQL. Jika anda ingin mempelajari GraphQL, pergi ke salah satu artikel saya sebelum ini.

5. Sembang gaya Reddit

Sembang ialah cara komunikasi yang popular kerana kesederhanaan dan kemudahan penggunaannya. Tetapi apakah yang benar-benar memacu bilik sembang moden? WebSockets!

Perkara yang akan anda pelajari:

• Gunakan WebSockets, komunikasi masa nyata dan kemas kini data
• Bekerja dengan tahap akses pengguna (contohnya, pemilik saluran sembang mempunyai peranan admin, dan orang lain di dalam bilik - user)
• Memproses dan mengesahkan borang - ingat, tetingkap sembang untuk menghantar mesej adalah input
• Buat dan sertai sembang yang berbeza
• Bekerja dengan mesej peribadi. Pengguna boleh bersembang dengan pengguna lain secara peribadi. Pada asasnya, anda akan mewujudkan sambungan WebSocket antara dua pengguna.

6. Navigasi gaya jalur

Apa yang menjadikan navigasi ini unik ialah bekas popover berubah agar sesuai dengan kandungan. Terdapat keanggunan pada peralihan ini berbanding dengan gelagat tradisional membuka dan menutup popover baharu.

Perkara yang akan anda pelajari:

• Gabungkan animasi CSS dengan peralihan
• Malapkan kandungan dan gunakan kelas aktif pada elemen terapung

Cuba lakukan sendiri dahulu, tetapi jika anda memerlukan bantuan, lihat ini panduan langkah demi langkah.

Sumber: www.habr.com