Έξι εργασίες για έναν προγραμματιστή Front-End

1. Форма кредитной карты

Ένα δροσερό σχήμα πιστωτικής κάρτας με ομαλές και ευχάριστες μικρο-αλληλεπιδράσεις. Περιλαμβάνει μορφοποίηση αριθμών, επαλήθευση και αυτόματη ανίχνευση τύπου κάρτας. Είναι χτισμένο στο Vue.js και είναι επίσης πλήρως responsive. (Μπορείς να δεις εδώ.)

έντυπο πιστωτικής κάρτας

Τι θα μάθετε:

• Επεξεργασία και επικύρωση εντύπων
• Χειρισμός συμβάντων (για παράδειγμα, όταν αλλάζουν πεδία)
• Κατανοήστε πώς να εμφανίζετε και να τοποθετείτε στοιχεία στη σελίδα, ειδικά τα στοιχεία της πιστωτικής κάρτας που εμφανίζονται στο επάνω μέρος της φόρμας

Το άρθρο μεταφράστηκε με την υποστήριξη της EDISON Software, η οποία φροντίζει για την υγεία των προγραμματιστών και το πρωινό τουςΚαι αναπτύσσει προσαρμοσμένο λογισμικό.

2. Гистограмма

Το ιστόγραμμα είναι ένα γράφημα ή γράφημα που αναπαριστά κατηγορικά δεδομένα με ορθογώνιες ράβδους με ύψη ή μήκη ανάλογα με τις τιμές που αντιπροσωπεύουν.

Μπορούν να εφαρμοστούν κάθετα ή οριζόντια. Ένα γράφημα κάθετων ράβδων ονομάζεται μερικές φορές γραμμικό γράφημα.

Τι θα μάθετε:

• Εμφάνιση δεδομένων με δομημένο και κατανοητό τρόπο
• Επιπλέον: Μάθετε πώς να χρησιμοποιείτε το στοιχείο canvas και πώς να σχεδιάσετε στοιχεία με αυτό

Εδώ μπορείτε να βρείτε δεδομένα παγκόσμιου πληθυσμού. Ταξινομούνται ανά έτος.

3. Анимация сердечка Twitter

Το 2016, το Twitter παρουσίασε αυτό το εκπληκτικό κινούμενο σχέδιο για τα tweets του. Από το 2019, εξακολουθεί να φαίνεται το κομμάτι, οπότε γιατί να μην δημιουργήσετε ένα μόνοι σας;

Τι θα μάθετε:

• Εργαστείτε με το χαρακτηριστικό CSS keyframes
• Χειρισμός και κίνηση στοιχείων HTML
• Συνδυάστε JavaScript, HTML και CSS

4. Репозитории GitHub с функцией поиска

Δεν υπάρχει τίποτα φανταχτερό εδώ - τα αποθετήρια GitHub είναι απλώς μια δοξασμένη λίστα.
Ο στόχος είναι να εμφανιστούν τα αποθετήρια και να επιτραπεί στον χρήστη να τα φιλτράρει. Χρήση επίσημο GitHub API για να λάβετε αποθετήρια για κάθε χρήστη.

Σελίδα προφίλ GitHub - github.com/indreklasn

Τι θα μάθετε:

• Λήψη δεδομένων από το API
• Εμφάνιση δεδομένων από το API
• Φιλτράρετε και εμφανίστε σχετικά δεδομένα για κάθε αναζήτηση
• Προαιρετικά: Εάν είστε έτοιμοι για μια πρόκληση, χρησιμοποιήστε API v4, κατασκευασμένο με χρήση GraphQL. Εάν θέλετε να μάθετε GraphQL, μεταβείτε σε ένα από τα προηγούμενα άρθρα μου.

5. Чаты в стиле Reddit

Οι συνομιλίες είναι ένας δημοφιλής τρόπος επικοινωνίας λόγω της απλότητας και της ευκολίας χρήσης τους. Αλλά τι πραγματικά τροφοδοτεί τα σύγχρονα δωμάτια συνομιλίας; WebSockets!

Τι θα μάθετε:

• Χρησιμοποιήστε WebSockets, επικοινωνία σε πραγματικό χρόνο και ενημερώσεις δεδομένων
• Εργαστείτε με επίπεδα πρόσβασης χρηστών (για παράδειγμα, ο κάτοχος ενός καναλιού συνομιλίας έχει τον ρόλο adminκαι άλλοι στο δωμάτιο - user)
• Επεξεργασία και επικύρωση φορμών - θυμηθείτε, το παράθυρο συνομιλίας για την αποστολή μηνύματος είναι input
• Δημιουργήστε και συμμετάσχετε σε διαφορετικές συνομιλίες
• Εργαστείτε με προσωπικά μηνύματα. Οι χρήστες μπορούν να συνομιλούν ιδιωτικά με άλλους χρήστες. Ουσιαστικά, θα δημιουργήσετε μια σύνδεση WebSocket μεταξύ δύο χρηστών.

6. Навигация в стиле Stripe

Αυτό που κάνει αυτή την πλοήγηση μοναδική είναι ότι το κοντέινερ popover μεταμορφώνεται για να ταιριάζει στο περιεχόμενο. Υπάρχει μια κομψότητα σε αυτή τη μετάβαση σε σύγκριση με την παραδοσιακή συμπεριφορά του ανοίγματος και του κλεισίματος ενός νέου popover.

Τι θα μάθετε:

• Συνδυάστε κινούμενα σχέδια CSS με μεταβάσεις
• Εξαφανίστε το περιεχόμενο και εφαρμόστε την ενεργή κλάση στο κινητή στοιχείο

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим οδηγός βήμα προς βήμα.

Πηγή: www.habr.com