1. Форма кредитной карты
Eine coole Kreditkartenform mit reibungslosen und angenehmen Mikrointeraktionen. Beinhaltet Zahlenformatierung, Verifizierung und automatische Erkennung des Kartentyps. Es basiert auf Vue.js und ist außerdem vollständig responsiv. (Du kannst sehen .)
Was Sie lernen werden:
- Verarbeiten und validieren Sie Formulare
- Behandeln Sie Ereignisse (z. B. wenn sich Felder ändern)
- Verstehen Sie, wie Elemente auf der Seite angezeigt und platziert werden, insbesondere die Kreditkarteninformationen, die oben auf dem Formular angezeigt werden
Der Artikel wurde mit Unterstützung von EDISON Software übersetzt , und auch .
2. Гистограмма
Ein Histogramm ist ein Diagramm oder eine Grafik, die kategoriale Daten mit rechteckigen Balken darstellt, deren Höhe oder Länge proportional zu den Werten ist, die sie darstellen.
Sie können vertikal oder horizontal angewendet werden. Ein vertikales Balkendiagramm wird manchmal auch als Liniendiagramm bezeichnet.
Was Sie lernen werden:
- Stellen Sie Daten strukturiert und verständlich dar
- Zusätzlich: Erfahren Sie, wie Sie das Element verwenden
canvasund wie man damit Elemente zeichnet
Sie können Daten zur Weltbevölkerung finden. Sie sind nach Jahr sortiert.
3. Анимация сердечка Twitter
Bereits 2016 führte Twitter diese erstaunliche Animation für seine Tweets ein. Im Jahr 2019 sieht es immer noch gut aus. Warum also nicht selbst eines erstellen?
Was Sie lernen werden:
- Arbeiten Sie mit CSS-Attributen
keyframes - Bearbeiten und animieren Sie HTML-Elemente
- Kombinieren Sie JavaScript, HTML und CSS
4. Репозитории GitHub с функцией поиска
Hier gibt es nichts Besonderes – GitHub-Repositories sind nur eine verschönerte Liste.
Ziel ist es, die Repositories anzuzeigen und dem Benutzer zu ermöglichen, sie zu filtern. Verwenden um Repositorys für jeden Benutzer zu erhalten.
GitHub-Profilseite -
Was Sie lernen werden:
- Daten von der API empfangen
- Daten von der API anzeigen
- Filtern und zeigen Sie relevante Daten für jede Suche an
- Optional: Wenn Sie Lust auf eine Herausforderung haben, verwenden Sie , erstellt mit GraphQL. .
5. Чаты в стиле Reddit
Chats sind aufgrund ihrer Einfachheit und Benutzerfreundlichkeit ein beliebtes Kommunikationsmittel. Aber was treibt moderne Chatrooms wirklich an? WebSockets!
Was Sie lernen werden:
- Nutzen Sie WebSockets, Echtzeitkommunikation und Datenaktualisierungen
- Arbeiten Sie mit Benutzerzugriffsebenen (z. B. hat der Besitzer eines Chat-Kanals die Rolle).
admin, und andere im Raum -user) - Verarbeiten und validieren Sie Formulare – denken Sie daran, dass das Chat-Fenster zum Senden einer Nachricht geöffnet ist
input - Erstellen Sie verschiedene Chats und treten Sie ihnen bei
- Arbeiten Sie mit persönlichen Nachrichten. Benutzer können privat mit anderen Benutzern chatten. Im Wesentlichen stellen Sie eine WebSocket-Verbindung zwischen zwei Benutzern her.
6. Навигация в стиле Stripe
Das Besondere an dieser Navigation ist, dass sich der Popover-Container an den Inhalt anpasst. Im Vergleich zum herkömmlichen Verhalten beim Öffnen und Schließen eines neuen Popovers ist dieser Übergang elegant.
Was Sie lernen werden:
- Kombinieren Sie CSS-Animationen mit Übergängen
- Inhalte abblenden und aktive Klasse auf schwebendes Element anwenden
Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим .
Source: habr.com