Kuus ülesannet esiotsa arendajale

1. Krediitkaardi vorm

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.)

krediitkaardi vorm

Mida õpid:

• Vormide töötlemine ja kinnitamine
• Sündmuste haldamine (näiteks kui väljad muutuvad)
• Saate aru, kuidas kuvada ja paigutada lehel elemente, eriti krediitkaarditeavet, mis kuvatakse vormi ülaosas

Artikkel on tõlgitud EDISON Tarkvara toel, mis hoolitseb programmeerijate tervise ja nende hommikusöögi eest ning arendab kohandatud tarkvara.

2. Histogramm

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.

GitHubi profiilileht – github.com/indreklasn

Mida õpid:

• Andmete vastuvõtmine API-lt
• Kuva andmed API-st
• Filtreerige ja kuvage iga otsingu jaoks asjakohaseid andmeid
• Valikuline: kui olete väljakutseks valmis, kasutage API v4, mis on ehitatud GraphQL-i abil. Kui soovite õppida GraphQL-i, minge ühele minu varasematest artiklitest.

5. Redditi stiilis vestlused

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.

Allikas: www.habr.com