Lahe krediitkaardi kuju sujuvate ja nauditavate mikrointeraktsioonidega. Sisaldab numbrite vormindamist, kontrollimist ja automaatset kaarditüübi tuvastamist. See on üles ehitatud Vue.js-ile ja on ka täielikult reageeriv. (Sa näed siin.)
Histogramm on diagramm või graafik, mis esindab kategoorilisi andmeid ristkülikukujuliste ribadega, mille kõrgus või pikkus on võrdeline nende väärtustega.
Neid saab rakendada vertikaalselt või horisontaalselt. Vertikaalset tulpdiagrammi nimetatakse mõnikord joondiagrammiks.
Mida õpid:
Kuva andmed struktureeritult ja arusaadavalt
Lisaks: õppige elementi kasutama canvas ja kuidas sellega elemente joonistada
see on leiate maailma rahvastikuandmeid. Need on sorteeritud aastate kaupa.
3. Twitteri südameanimatsioon
2016. aastal tutvustas Twitter seda hämmastavat animatsiooni oma säutsude jaoks. 2019. aasta seisuga näeb see endiselt osa välja, nii et miks mitte seda ise luua?
Mida õpid:
Töötage CSS-i atribuudiga keyframes
Manipuleerida ja animeerida HTML-i elemente
Kombineerige JavaScript, HTML ja CSS
4. GitHubi hoidlad otsingufunktsiooniga
Siin pole midagi uhket – GitHubi hoidlad on lihtsalt ülistatud loend.
Eesmärk on kuvada hoidlaid ja võimaldada kasutajal neid filtreerida. Kasuta ametlik GitHubi API et hankida iga kasutaja jaoks hoidlaid.
Vestlused on oma lihtsuse ja kasutusmugavuse tõttu populaarne suhtlusviis. Aga mis tegelikult toidab tänapäevaseid jututubasid? WebSockets!
Mida õpid:
Kasutage WebSocketsi, reaalajas suhtlust ja andmete värskendusi
Töötage kasutaja juurdepääsutasemetega (näiteks vestluskanali omanikul on roll adminja teised ruumis viibijad - user)
Töötle ja kinnita vorme – pea meeles, et sõnumi saatmise vestlusaken on input
Looge erinevaid vestlusi ja liituge nendega
Töötage isiklike sõnumitega. Kasutajad saavad teiste kasutajatega privaatselt vestelda. Põhimõtteliselt loote WebSocket-ühenduse kahe kasutaja vahel.
6. Triibu stiilis navigeerimine
Selle navigeerimise teeb ainulaadseks see, et hüpikkonteiner muudetakse vastavalt sisule. See üleminek on elegantses võrreldes traditsioonilise uue hüpikakna avamise ja sulgemisega.
Mida õpid:
Kombineerige CSS-animatsioone üleminekutega
Hämardage sisu ja rakendage ujuvelemendile aktiivne klass
Proovige seda kõigepealt ise teha, kuid kui vajate abi, vaadake seda samm-sammult juhend.