Seks opgaver for en front-end udvikler

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

En cool kreditkortform med glatte og behagelige mikro-interaktioner. Inkluderer nummerformatering, verifikation og automatisk korttypegenkendelse. Den er bygget på Vue.js og er også fuldt responsiv. (Du kan se her.)

kreditkort-formular

Hvad du lærer:

• Behandle og validere formularer
• Håndter hændelser (f.eks. når felter ændres)
• Forstå, hvordan du viser og placerer elementer på siden, især de kreditkortoplysninger, der vises øverst i formularen

Artiklen er oversat med støtte fra EDISON Software, som tager sig af programmørernes sundhed og deres morgenmadog udvikler skræddersyet software.

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

Et histogram er et diagram eller en graf, der repræsenterer kategoriske data med rektangulære søjler med højder eller længder, der er proportionale med de værdier, de repræsenterer.

De kan påføres lodret eller vandret. Et lodret søjlediagram kaldes undertiden et linjediagram.

Hvad du lærer:

• Vis data på en struktureret og forståelig måde
• Derudover: Lær, hvordan du bruger elementet canvas og hvordan man tegner elementer med det

Her du kan finde data om verdens befolkning. De er sorteret efter år.

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

Tilbage i 2016 introducerede Twitter denne fantastiske animation til sine tweets. Fra 2019 ser det stadig ud, så hvorfor ikke oprette en selv?

Hvad du lærer:

• Arbejd med CSS-attribut keyframes
• Manipuler og animer HTML-elementer
• Kombiner JavaScript, HTML og CSS

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

Der er ikke noget fancy her – GitHub-depoter er bare en glorificeret liste.
Målet er at vise depoterne og give brugeren mulighed for at filtrere dem. Brug officielle GitHub API for at få arkiver til hver bruger.

GitHub profilside - github.com/indreklasn

Hvad du lærer:

• Modtag data fra API
• Vis data fra API
• Filtrer og vis relevante data for hver søgning
• Valgfrit: Hvis du er klar til en udfordring, så brug API v4, bygget ved hjælp af GraphQL. Hvis du vil lære GraphQL, så gå til en af ​​mine tidligere artikler.

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

Chats er en populær måde at kommunikere på på grund af deres enkelhed og brugervenlighed. Men hvad brænder egentlig moderne chatrum? WebSockets!

Hvad du lærer:

• Brug WebSockets, realtidskommunikation og dataopdateringer
• Arbejd med brugeradgangsniveauer (f.eks. har ejeren af ​​en chatkanal rollen adminog andre i rummet - user)
• Behandle og valider formularer - husk, chatvinduet for at sende en besked er input
• Opret og deltag i forskellige chats
• Arbejd med personlige beskeder. Brugere kan chatte med andre brugere privat. Grundlæggende vil du etablere en WebSocket-forbindelse mellem to brugere.

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

Det, der gør denne navigation unik, er, at popover-beholderen transformeres, så den passer til indholdet. Der er en elegance ved denne overgang sammenlignet med den traditionelle adfærd med at åbne og lukke en ny popover.

Hvad du lærer:

• Kombiner CSS-animationer med overgange
• Dæmp indhold, og anvend aktiv klasse på flydende element

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим trin for trin guide.

Kilde: www.habr.com