Sex verkefni fyrir Front-End forritara

1. Kreditkortaeyðublað

Flott kreditkortaform með sléttum og skemmtilegum örsamskiptum. Inniheldur númerasnið, sannprófun og sjálfvirka kortagerð. Það er byggt á Vue.js og er líka fullkomlega móttækilegt. (Þú getur séð hér.)

kreditkorta-eyðublað

Það sem þú munt læra:

• Vinnsla og staðfest eyðublöð
• Meðhöndla atburði (til dæmis þegar reitir breytast)
• Skilja hvernig á að birta og setja þætti á síðunni, sérstaklega kreditkortaupplýsingarnar sem birtast efst á eyðublaðinu

Greinin var þýdd með stuðningi EDISON Software, sem sér um heilsu forritara og morgunmat þeirraOg þróar sérsniðinn hugbúnað.

2. Vefrit

Súlurit er graf eða línurit sem táknar flokkuð gögn með rétthyrndum stikum með hæð eða lengd í réttu hlutfalli við gildin sem þeir tákna.

Hægt er að beita þeim lóðrétt eða lárétt. Lóðrétt súlurit er stundum kallað línurit.

Það sem þú munt læra:

• Birta gögn á skipulegan og skiljanlegan hátt
• Að auki: Lærðu hvernig á að nota þáttinn canvas og hvernig á að teikna þætti með því

Hér þú getur fundið gögn um mannfjölda í heiminum. Þeim er raðað eftir árum.

3. Twitter Heart Animation

Árið 2016 kynnti Twitter þetta ótrúlega hreyfimynd fyrir tíst sín. Frá og með 2019 lítur það enn út fyrir að vera hluti, svo hvers vegna ekki að búa til einn sjálfur?

Það sem þú munt læra:

• Vinna með CSS eigind keyframes
• Vinna með og lífga HTML þætti
• Sameina JavaScript, HTML og CSS

4. GitHub geymslur með leitaraðgerð

Það er ekkert fínt hérna - GitHub geymslur eru bara dýrðarlisti.
Markmiðið er að sýna geymslurnar og leyfa notandanum að sía þær. Notaðu opinbera GitHub API til að fá geymslur fyrir hvern notanda.

GitHub prófílsíða - github.com/indreklasn

Það sem þú munt læra:

• Fáðu gögn frá API
• Sýna gögn frá API
• Sía og sýna viðeigandi gögn fyrir hverja leit
• Valfrjálst: Ef þú ert til í áskorun skaltu nota API v4, byggð með GraphQL. Ef þú vilt læra GraphQL skaltu fara í eina af fyrri greinum mínum.

5. Spjall í Reddit-stíl

Spjall er vinsæl samskiptamáti vegna einfaldleika þeirra og auðveldrar notkunar. En hvað knýr raunverulega nútíma spjallrásir til? WebSockets!

Það sem þú munt læra:

• Notaðu WebSockets, rauntíma samskipti og gagnauppfærslur
• Vinna með aðgangsstig notenda (til dæmis hefur eigandi spjallrásar hlutverkið admin, og aðrir í herberginu - user)
• Vinnsla og staðfest eyðublöð - mundu að spjallglugginn til að senda skilaboð er input
• Búðu til og taktu þátt í mismunandi spjalli
• Vinna með persónuleg skilaboð. Notendur geta spjallað við aðra notendur einslega. Í meginatriðum muntu koma á WebSocket tengingu milli tveggja notenda.

6. Leiðsögn í röndum

Það sem gerir þessa leiðsögn einstaka er að popover ílátið umbreytist til að passa við innihaldið. Það er glæsileiki við þessa umskipti miðað við hefðbundna hegðun að opna og loka nýjum popover.

Það sem þú munt læra:

• Sameina CSS hreyfimyndir með umbreytingum
• Dempaðu innihald og notaðu virkan flokk á fljótandi þátt

Reyndu að gera það sjálfur fyrst, en ef þú þarft hjálp, skoðaðu þetta skref fyrir skref leiðbeiningar.

Heimild: www.habr.com