Sechs Aufgaben für einen Front-End-Entwickler

1. Kreditkartenformular

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

Kreditkartenformular

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 kümmert sich um die Gesundheit der Programmierer und ihr Frühstück, und auch entwickelt kundenspezifische Software.

2. Histogramm

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 canvas und wie man damit Elemente zeichnet

Hier Sie können Daten zur Weltbevölkerung finden. Sie sind nach Jahr sortiert.

3. Twitter-Herzanimation

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-Repositories mit Suchfunktion

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 offizielle GitHub-API um Repositorys für jeden Benutzer zu erhalten.

GitHub-Profilseite - github.com/indreklasn

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 API v4, erstellt mit GraphQL. Wenn Sie GraphQL lernen möchten, lesen Sie einen meiner vorherigen Artikel.

5. Chats im Reddit-Stil

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. Navigation im Streifenstil

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

Versuchen Sie es zunächst selbst, aber wenn Sie Hilfe benötigen, schauen Sie sich das hier an Schritt für Schritt Anleitung.

Source: habr.com