Seks oppgaver for en front-end-utvikler

1. Kredittkortskjema

En kul kredittkortform med jevne og hyggelige mikrointeraksjoner. Inkluderer nummerformatering, verifisering og automatisk korttypegjenkjenning. Den er bygget på Vue.js og er også fullstendig responsiv. (Du kan se her.)

kredittkort-skjema

Hva du lærer:

• Behandle og validere skjemaer
• Håndter hendelser (for eksempel når felt endres)
• Forstå hvordan du viser og plasserer elementer på siden, spesielt kredittkortinformasjonen som vises øverst i skjemaet

Artikkelen ble oversatt med støtte fra EDISON Software, som tar vare på helsen til programmerere og frokosten deresOg utvikler tilpasset programvare.

2. Histogram

Et histogram er et diagram eller en graf som representerer kategoriske data med rektangulære stolper med høyder eller lengder proporsjonale med verdiene de representerer.

De kan påføres vertikalt eller horisontalt. Et vertikalt stolpediagram kalles noen ganger et linjediagram.

Hva du lærer:

• Vis data på en strukturert og forståelig måte
• I tillegg: Lær hvordan du bruker elementet canvas og hvordan tegne elementer med den

Her du kan finne verdens befolkningsdata. De er sortert etter år.

3. Twitter Heart Animation

Tilbake i 2016 introduserte Twitter denne fantastiske animasjonen for sine tweets. Fra og med 2019 ser det fortsatt ut som en del, så hvorfor ikke lage en selv?

Hva du lærer:

• Arbeid med CSS-attributt keyframes
• Manipuler og animer HTML-elementer
• Kombiner JavaScript, HTML og CSS

4. GitHub repositories med søkefunksjon

Det er ikke noe fancy her – GitHub-repos er bare en glorifisert liste.
Målet er å vise depotene og la brukeren filtrere dem. Bruk offisielle GitHub API for å få arkiver for hver bruker.

GitHub profilside - github.com/indreklasn

Hva du lærer:

• Motta data fra API
• Vis data fra API
• Filtrer og vis relevante data for hvert søk
• Valgfritt: Hvis du er klar for en utfordring, bruk API v4, bygget med GraphQL. Hvis du ønsker å lære GraphQL, gå til en av mine tidligere artikler.

5. Chatter i reddit-stil

Chat er en populær måte å kommunisere på på grunn av sin enkelhet og brukervennlighet. Men hva er det egentlig som driver moderne chatterom? WebSockets!

Hva du lærer:

• Bruk WebSockets, sanntidskommunikasjon og dataoppdateringer
• Arbeid med brukertilgangsnivåer (for eksempel eieren av en chattekanal har rollen admin, og andre i rommet - user)
• Behandle og valider skjemaer - husk, chattevinduet for å sende en melding er input
• Opprett og bli med i forskjellige chatter
• Arbeid med personlige meldinger. Brukere kan chatte med andre brukere privat. I hovedsak vil du etablere en WebSocket-forbindelse mellom to brukere.

6. Stripe-stil navigasjon

Det som gjør denne navigasjonen unik er at popover-beholderen transformeres for å passe til innholdet. Det er en eleganse ved denne overgangen sammenlignet med den tradisjonelle oppførselen med å åpne og lukke en ny popover.

Hva du lærer:

• Kombiner CSS-animasjoner med overganger
• Demp innholdet og bruk aktiv klasse på flytende element

Prøv å gjøre det selv først, men hvis du trenger hjelp, sjekk ut dette trinn for trinn guide.

Kilde: www.habr.com