Šest zadataka za Front-End programera

1. Obrazac kreditne kartice

Cool oblik kreditne kartice s glatkim i ugodnim mikro interakcijama. Uključuje formatiranje brojeva, verifikaciju i automatsko otkrivanje tipa kartice. Izgrađen je na Vue.js i također je potpuno prilagodljiv. (Mozes da vidis ovdje.)

obrazac kreditne kartice

Šta ćete naučiti:

• Obradite i potvrdite obrasce
• Rukovati događajima (na primjer, kada se polja mijenjaju)
• Shvatite kako prikazati i postaviti elemente na stranicu, posebno informacije o kreditnoj kartici koje se pojavljuju na vrhu obrasca

Članak je preveden uz podršku EDISON softvera, koji brine o zdravlju programera i njihovom doručkuI razvija prilagođeni softver.

2. Histogram

Histogram je dijagram ili grafikon koji predstavlja kategoričke podatke s pravokutnim trakama s visinama ili dužinama proporcionalnim vrijednostima koje predstavljaju.

Mogu se primijeniti vertikalno ili horizontalno. Vertikalni trakasti grafikon se ponekad naziva linijskim grafikonom.

Šta ćete naučiti:

• Prikažite podatke na strukturiran i razumljiv način
• Dodatno: Naučite kako koristiti element canvas i kako crtati elemente sa njim

to je možete pronaći podatke o svjetskoj populaciji. Razvrstani su po godinama.

3. Twitter Heart Animation

Još 2016. godine, Twitter je predstavio ovu neverovatnu animaciju za svoje tvitove. Od 2019. i dalje izgleda kao dio, pa zašto ga sami ne kreirati?

Šta ćete naučiti:

• Rad sa CSS atributom keyframes
• Manipulirajte i animirajte HTML elemente
• Kombinujte JavaScript, HTML i CSS

4. GitHub spremišta sa funkcijom pretraživanja

Ovdje nema ničeg fensi – GitHub spremišta su samo proslavljena lista.
Cilj je prikazati spremišta i omogućiti korisniku da ih filtrira. Koristi zvanični GitHub API da dobijete spremišta za svakog korisnika.

GitHub profilna stranica - github.com/indreklasn

Šta ćete naučiti:

• Primanje podataka od API-ja
• Prikaz podataka iz API-ja
• Filtrirajte i prikažite relevantne podatke za svaku pretragu
• Opciono: ako ste spremni za izazov, koristite API v4, izgrađen koristeći GraphQL. Ako želite naučiti GraphQL, idite na jedan od mojih prethodnih članaka.

5. Četovi u stilu Reddita

Chatovi su popularan način komunikacije zbog svoje jednostavnosti i lakoće korištenja. Ali šta zapravo pokreće moderne chat sobe? WebSockets!

Šta ćete naučiti:

• Koristite WebSockets, komunikaciju u realnom vremenu i ažuriranje podataka
• Radite sa nivoima pristupa korisnika (na primjer, vlasnik kanala za ćaskanje ima ulogu admin, i ostali u prostoriji - user)
• Obradite i potvrdite obrasce - zapamtite, prozor za ćaskanje za slanje poruke je input
• Kreirajte i pridružite se različitim chatovima
• Radite sa ličnim porukama. Korisnici mogu privatno razgovarati s drugim korisnicima. U suštini, uspostavit ćete WebSocket vezu između dva korisnika.

6. Navigacija u stilu pruge

Ono što ovu navigaciju čini jedinstvenom je to što se iskačući kontejner transformiše kako bi odgovarao sadržaju. Postoji elegancija u ovoj tranziciji u poređenju sa tradicionalnim ponašanjem otvaranja i zatvaranja novog skočnog prozora.

Šta ćete naučiti:

• Kombinirajte CSS animacije s prijelazima
• Zatamnite sadržaj i primijenite aktivnu klasu na lebdeći element

Pokušajte prvo sami, ali ako vam treba pomoć, pogledajte ovo korak po korak vodič.

izvor: www.habr.com