Šest zadataka za Front-End developera

1. Obrazac za kreditnu karticu

Cool oblik kreditne kartice s glatkim i ugodnim mikrointerakcijama. Uključuje formatiranje broja, provjeru i automatsko otkrivanje vrste kartice. Izgrađen je na Vue.js i također je potpuno responzivan. (Možeš vidjeti здесь.)

obrazac za kreditnu karticu

Što ćete naučiti:

• Obrada i provjera valjanosti obrazaca
• Rukovanje događajima (na primjer, kada se mijenjaju polja)
• Shvatite kako prikazati i postaviti elemente na stranicu, posebno podatke o kreditnoj kartici koji se pojavljuju na vrhu obrasca

Članak je preveden uz potporu EDISON Softwarea, koji brine o zdravlju programera i njihovom doručkuI razvija prilagođeni softver.

2. Histogram

Histogram je grafikon ili grafikon koji predstavlja kategoričke podatke s pravokutnim stupcima s visinama ili duljinama proporcionalnim vrijednostima koje predstavljaju.

Mogu se nanositi okomito ili vodoravno. Okomiti stupčasti grafikon ponekad se naziva i linijski grafikon.

Što ćete naučiti:

• Prikažite podatke na strukturiran i razumljiv način
• Dodatno: naučite kako koristiti element canvas i kako njime crtati elemente

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

3. Animacija srca na Twitteru

Još 2016. godine Twitter je predstavio ovu nevjerojatnu animaciju za svoje tweetove. Od 2019. još uvijek izgleda kao dio, pa zašto ga sami ne biste izradili?

Što ćete naučiti:

• Rad s CSS atributom keyframes
• Manipulirajte i animirajte HTML elemente
• Kombinirajte JavaScript, HTML i CSS

4. GitHub repozitoriji s funkcionalnošću pretraživanja

Ovdje nema ničeg otmjenog—GitHub repozitoriji samo su glorificirani popis.
Cilj je prikazati repozitorije i omogućiti korisniku da ih filtrira. Koristiti službeni GitHub API da biste dobili repozitorije za svakog korisnika.

Stranica profila GitHub - github.com/indreklasn

Što ćete naučiti:

• Primanje podataka iz API-ja
• Prikaz podataka iz API-ja
• Filtrirajte i prikažite relevantne podatke za svako pretraživanje
• Izborno: ako ste spremni za izazov, upotrijebite API v4, izgrađen pomoću GraphQL-a. Ako želite naučiti GraphQL, idite na jedan od mojih prethodnih članaka.

5. Razgovori u stilu Reddita

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

Što ćete naučiti:

• Koristite WebSockets, komunikaciju u stvarnom vremenu i ažuriranje podataka
• Rad s korisničkim razinama pristupa (na primjer, vlasnik chat kanala ima ulogu admin, i drugi u sobi - user)
• Obrada i provjera valjanosti obrazaca - zapamtite, prozor za chat za slanje poruka je input
• Stvorite različite chatove i pridružite im se
• Rad s osobnim porukama. Korisnici mogu privatno razgovarati s drugim korisnicima. U biti, uspostavit ćete WebSocket vezu između dva korisnika.

6. Navigacija u stilu pruga

Ono što ovu navigaciju čini jedinstvenom je to što se popover spremnik transformira kako bi odgovarao sadržaju. Ovaj prijelaz ima eleganciju u usporedbi s tradicionalnim ponašanjem otvaranja i zatvaranja novog popover-a.

Što ćete naučiti:

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

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

Izvor: www.habr.com