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 здесь.)
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 funkcijom 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.
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
Prvo pokušajte sami, ali ako trebate pomoć, pogledajte ovo vodič korak po korak.