Enam tugas untuk pengembang Front-End

1. Formulir kartu kredit

Bentuk kartu kredit yang keren dengan interaksi mikro yang lancar dan menyenangkan. Termasuk pemformatan nomor, verifikasi, dan deteksi jenis kartu otomatis. Itu dibangun di atas Vue.js dan juga sepenuhnya responsif. (Anda dapat melihat di sini.)

formulir kartu kredit

Apa yang akan Anda pelajari:

• Memproses dan memvalidasi formulir
• Menangani peristiwa (misalnya, ketika bidang berubah)
• Memahami cara menampilkan dan menempatkan elemen pada halaman, terutama informasi kartu kredit yang muncul di atas formulir

Artikel tersebut diterjemahkan dengan dukungan EDISON Software, yang menjaga kesehatan programmer dan sarapan merekaDan mengembangkan perangkat lunak khusus.

2. Histogram

Histogram adalah bagan atau grafik yang mewakili data kategorikal dengan batang persegi panjang dengan tinggi atau panjang sebanding dengan nilai yang diwakilinya.

Mereka dapat diterapkan secara vertikal atau horizontal. Diagram batang vertikal terkadang disebut diagram garis.

Apa yang akan Anda pelajari:

• Menampilkan data dengan cara yang terstruktur dan mudah dipahami
• Selain itu: Pelajari cara menggunakan elemen tersebut canvas dan cara menggambar elemen dengannya

Di sini Anda dapat menemukan data populasi dunia. Mereka diurutkan berdasarkan tahun.

3. Animasi Hati Twitter

Pada tahun 2016, Twitter memperkenalkan animasi luar biasa ini untuk tweet-nya. Pada tahun 2019, tampilannya masih sama, jadi mengapa tidak membuatnya sendiri?

Apa yang akan Anda pelajari:

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

4. Repositori GitHub dengan fungsi pencarian

Tidak ada yang mewah di sini—repositori GitHub hanyalah daftar yang dimuliakan.
Tujuannya adalah untuk menampilkan repositori dan memungkinkan pengguna memfilternya. Menggunakan API GitHub resmi untuk mendapatkan repositori untuk setiap pengguna.

Halaman profil GitHub - github.com/indreklasn

Apa yang akan Anda pelajari:

• Terima data dari API
• Menampilkan data dari API
• Filter dan tampilkan data yang relevan untuk setiap pencarian
• Opsional: Jika Anda siap menghadapi tantangan, gunakan API v4, dibangun menggunakan GraphQL. Jika Anda ingin mempelajari GraphQL, buka salah satu artikel saya sebelumnya.

5. Obrolan bergaya Reddit

Obrolan adalah cara komunikasi yang populer karena kesederhanaan dan kemudahan penggunaannya. Tapi apa sebenarnya yang mendorong ruang obrolan modern? Soket Web!

Apa yang akan Anda pelajari:

• Gunakan WebSockets, komunikasi real-time dan pembaruan data
• Bekerja dengan tingkat akses pengguna (misalnya, pemilik saluran obrolan memiliki peran tersebut admin, dan orang lain di ruangan itu - user)
• Memproses dan memvalidasi formulir - ingat, jendela obrolan untuk mengirim pesan adalah input
• Buat dan bergabunglah dalam obrolan yang berbeda
• Bekerja dengan pesan pribadi. Pengguna dapat mengobrol dengan pengguna lain secara pribadi. Pada dasarnya, Anda akan membuat koneksi WebSocket antara dua pengguna.

6. Navigasi bergaya garis

Apa yang membuat navigasi ini unik adalah wadah popover berubah agar sesuai dengan konten. Ada keanggunan dalam transisi ini dibandingkan dengan perilaku tradisional membuka dan menutup popover baru.

Apa yang akan Anda pelajari:

• Gabungkan animasi CSS dengan transisi
• Redupkan konten dan terapkan kelas aktif ke elemen mengambang

Coba lakukan sendiri terlebih dahulu, tetapi jika Anda butuh bantuan, lihat ini panduan langkah demi langkah.

Sumber: www.habr.com