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.)
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.
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 pasków
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
Spróbuj najpierw zrobić to sam, ale jeśli potrzebujesz pomocy, sprawdź to przewodnik krok po kroku.