Seši uzdevumi priekšgala izstrādātājam

1. Kredītkartes veidlapa

Forša kredītkartes forma ar vienmērīgu un patīkamu mikromijiedarbību. Ietver numura formatēšanu, verifikāciju un automātisku kartes veida noteikšanu. Tas ir veidots uz Vue.js un ir arī pilnībā atsaucīgs. (Tu vari redzēt šeit.)

kredītkartes veidlapa

Ko jūs uzzināsiet:

• Apstrādājiet un apstipriniet veidlapas
• Apstrādājiet notikumus (piemēram, kad mainās lauki)
• Izprotiet, kā parādīt un ievietot lapā elementus, jo īpaši kredītkartes informāciju, kas tiek rādīta veidlapas augšpusē

Raksts tika tulkots ar EDISON Software atbalstu, kas rūpējas par programmētāju veselību un viņu brokastīmun izstrādā pielāgotu programmatūru.

2. Histogramma

Histogramma ir diagramma vai diagramma, kas attēlo kategoriskus datus ar taisnstūrveida joslām, kuru augstums vai garums ir proporcionāls to attēlotajām vērtībām.

Tos var uzklāt vertikāli vai horizontāli. Vertikālo joslu diagrammu dažreiz sauc par līniju diagrammu.

Ko jūs uzzināsiet:

• Parādiet datus strukturētā un saprotamā veidā
• Papildus: uzziniet, kā izmantot elementu canvas un kā ar to zīmēt elementus

Šeit jūs varat atrast datus par pasaules iedzīvotājiem. Tie ir sakārtoti pēc gada.

3. Twitter sirds animācija

2016. gadā Twitter ieviesa šo apbrīnojamo animāciju saviem tvītiem. 2019. gadā tas joprojām izskatās kā daļa, kāpēc gan neizveidot to pats?

Ko jūs uzzināsiet:

• Darbs ar CSS atribūtu keyframes
• Manipulējiet un animējiet HTML elementus
• Apvienojiet JavaScript, HTML un CSS

4. GitHub krātuves ar meklēšanas funkciju

Šeit nav nekā brīnišķīga — GitHub krātuves ir tikai pagodināts saraksts.
Mērķis ir parādīt repozitorijus un ļaut lietotājam tos filtrēt. Izmantot oficiālā GitHub API lai iegūtu repozitorijus katram lietotājam.

GitHub profila lapa — github.com/indreklasn

Ko jūs uzzināsiet:

• Saņemt datus no API
• Rādīt datus no API
• Filtrējiet un parādiet atbilstošos datus katrai meklēšanai
• Neobligāti: ja esat gatavs izaicinājumam, izmantojiet API v4, kas izveidots, izmantojot GraphQL. Ja vēlaties apgūt GraphQL, dodieties uz kādu no maniem iepriekšējiem rakstiem.

5. Reddit stila tērzēšana

Tērzēšana ir populārs saziņas veids to vienkāršības un lietošanas vienkāršības dēļ. Bet kas patiesībā veicina mūsdienu tērzēšanas telpas? WebSockets!

Ko jūs uzzināsiet:

• Izmantojiet WebSockets, reāllaika saziņu un datu atjauninājumus
• Strādājiet ar lietotāju piekļuves līmeņiem (piemēram, tērzēšanas kanāla īpašniekam ir loma admin, un citi istabā - user)
• Apstrādājiet un apstipriniet veidlapas - atcerieties, ka tērzēšanas logs ziņojuma nosūtīšanai ir input
• Izveidojiet dažādas tērzēšanas sarunas un pievienojieties tām
• Strādājiet ar personīgām ziņām. Lietotāji var tērzēt ar citiem lietotājiem privāti. Būtībā jūs izveidosit WebSocket savienojumu starp diviem lietotājiem.

6. Svītru stila navigācija

Šo navigāciju unikālu padara tas, ka uznirstošais konteiners tiek pārveidots, lai tas atbilstu saturam. Šai pārejai ir elegance, salīdzinot ar tradicionālo darbību, atverot un aizverot jaunu popover.

Ko jūs uzzināsiet:

• Apvienojiet CSS animācijas ar pārejām
• Aptumšot saturu un lietot aktīvo klasi peldētajam elementam

Vispirms mēģiniet to izdarīt pats, bet, ja jums nepieciešama palīdzība, pārbaudiet šo soli pa solim rokasgrāmata.

Avots: www.habr.com