Sześć zadań dla programisty Front-End

1. Formularz karty kredytowej

Fajny kształt karty kredytowej z płynnymi i przyjemnymi mikrointerakcjami. Obejmuje formatowanie numerów, weryfikację i automatyczne wykrywanie typu karty. Jest zbudowany na Vue.js i jest w pełni responsywny. (Możesz zobaczyć tutaj.)

formularz karty kredytowej

Czego się dowiesz:

• Przetwarzaj i sprawdzaj formularze
• Obsługa zdarzeń (na przykład zmiana pól)
• Dowiedz się, jak wyświetlać i umieszczać elementy na stronie, zwłaszcza informacje o karcie kredytowej, które pojawiają się na górze formularza

Artykuł został przetłumaczony przy wsparciu firmy EDISON Software, która dba o zdrowie programistów i ich śniadaniea także tworzy oprogramowanie na zamówienie.

2. Histogram

Histogram to wykres lub diagram przedstawiający dane kategoryczne za pomocą prostokątnych słupków o wysokości lub długości proporcjonalnej do reprezentowanych przez nie wartości.

Można je nakładać pionowo lub poziomo. Pionowy wykres słupkowy jest czasami nazywany wykresem liniowym.

Czego się dowiesz:

• Wyświetlaj dane w uporządkowany i zrozumiały sposób
• Dodatkowo: Dowiedz się, jak korzystać z elementu canvas i jak rysować za jego pomocą elementy

Tutaj możesz znaleźć dane dotyczące światowej populacji. Są posortowane według roku.

3. Animacja serca na Twitterze

W 2016 roku Twitter wprowadził tę niesamowitą animację do swoich tweetów. Od 2019 r. nadal wygląda dobrze, więc dlaczego nie stworzyć go samodzielnie?

Czego się dowiesz:

• Pracuj z atrybutem CSS keyframes
• Manipuluj i animuj elementy HTML
• Połącz JavaScript, HTML i CSS

4. Repozytoria GitHub z funkcją wyszukiwania

Nie ma tu nic nadzwyczajnego — repozytoria GitHub to tylko chwalebna lista.
Celem jest wyświetlenie repozytoriów i umożliwienie użytkownikowi ich filtrowania. Używać oficjalne API GitHuba aby uzyskać repozytoria dla każdego użytkownika.

Strona profilu GitHub — github.com/indreklasn

Czego się dowiesz:

• Odbierz dane z API
• Wyświetl dane z API
• Filtruj i wyświetlaj odpowiednie dane dla każdego wyszukiwania
• Opcjonalnie: Jeśli masz ochotę na wyzwanie, użyj API wersja 4, zbudowany przy użyciu GraphQL. Jeśli chcesz nauczyć się GraphQL, przejdź do jednego z moich poprzednich artykułów.

5. Czat w stylu Reddita

Czaty są popularnym sposobem komunikacji ze względu na ich prostotę i łatwość obsługi. Ale co tak naprawdę napędza nowoczesne pokoje rozmów? WebSockety!

Czego się dowiesz:

• Korzystaj z WebSockets, komunikacji w czasie rzeczywistym i aktualizacji danych
• Pracuj z poziomami dostępu użytkowników (na przykład rolę pełni właściciel kanału czatu admini inni w pokoju - user)
• Przetwarzaj i zatwierdzaj formularze - pamiętaj, że okno czatu służące do wysyłania wiadomości to okno czatu input
• Twórz i dołączaj do różnych czatów
• Pracuj z wiadomościami osobistymi. Użytkownicy mogą rozmawiać prywatnie z innymi użytkownikami. Zasadniczo będziesz ustanawiać połączenie WebSocket między dwoma użytkownikami.

6. Nawigacja w stylu Stripe

To, co czyni tę nawigację wyjątkową, to fakt, że kontener wyskakujący zmienia się w celu dopasowania do zawartości. To przejście ma w sobie pewną elegancję w porównaniu z tradycyjnym zachowaniem otwierania i zamykania nowego wyskakującego okienka.

Czego się dowiesz:

• Połącz animacje CSS z przejściami
• Przyciemnij zawartość i zastosuj aktywną klasę do elementu pływającego

Najpierw spróbuj zrobić to sam, ale jeśli potrzebujesz pomocy, sprawdź to przewodnik krok po kroku.

Źródło: www.habr.com