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.)
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.
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