Վեց առաջադրանք Front-End ծրագրավորողի համար

1. Վարկային քարտի ձև

Վարկային քարտի հիանալի ձև՝ հարթ և հաճելի միկրո-փոխազդեցություններով: Ներառում է թվերի ձևաչափում, ստուգում և քարտի տեսակի ավտոմատ հայտնաբերում: Այն կառուցված է Vue.js-ի վրա և նաև լիովին արձագանքող է: (Դու կարող ես տեսնել այստեղ.)

վարկային քարտ-ձև

Ինչ կսովորեք.

• Ձևաթղթերի մշակում և վավերացում
• Կառավարել իրադարձությունները (օրինակ, երբ դաշտերը փոխվում են)
• Հասկացեք, թե ինչպես ցուցադրել և տեղադրել տարրեր էջում, հատկապես կրեդիտ քարտի տեղեկությունները, որոնք հայտնվում են ձևի վերևում

Հոդվածը թարգմանվել է EDISON Software-ի աջակցությամբ, որը հոգ է տանում ծրագրավորողների առողջության և նրանց նախաճաշի մասինԻսկ մշակում է հատուկ ծրագրակազմ.

2. Հիստոգրամ

Հիստոգրամը գծապատկեր կամ գրաֆիկ է, որը ներկայացնում է դասակարգային տվյալներ ուղղանկյուն ձողերով, որոնց բարձրությունը կամ երկարությունը համաչափ է իրենց ներկայացվող արժեքներին:

Նրանք կարող են կիրառվել ուղղահայաց կամ հորիզոնական: Ուղղահայաց գծապատկերը երբեմն կոչվում է գծային գծապատկեր:

Ինչ կսովորեք.

• Ցուցադրել տվյալները կառուցվածքային և հասկանալի ձևով
• Լրացուցիչ. Իմացեք, թե ինչպես օգտագործել տարրը canvas և ինչպես նկարել տարրեր դրա հետ

Այստեղ դուք կարող եք գտնել աշխարհի բնակչության տվյալները: Դրանք դասավորված են ըստ տարիների։

3. Twitter Heart Animation

Դեռևս 2016 թվականին Twitter-ը ներկայացրեց այս զարմանալի անիմացիան իր թվիթների համար։ 2019 թվականի դրությամբ այն դեռևս մաս է թվում, ուստի ինչու՞ ինքներդ չստեղծել մեկը:

Ինչ կսովորեք.

• Աշխատեք CSS հատկանիշով keyframes
• Շահարկել և շարժել HTML տարրերը
• Միավորել JavaScript-ը, HTML-ը և CSS-ը

4. GitHub շտեմարաններ՝ որոնման գործառույթով

Այստեղ ոչ մի շքեղ բան չկա. GitHub-ի պահոցները պարզապես փառաբանված ցուցակ են:
Նպատակն է ցուցադրել պահեստները և թույլ տալ օգտվողին զտել դրանք: Օգտագործեք պաշտոնական GitHub API յուրաքանչյուր օգտագործողի համար պահեստներ ստանալու համար:

GitHub պրոֆիլի էջ - github.com/indreklasn

Ինչ կսովորեք.

• Ստացեք տվյալներ API-ից
• Ցուցադրել տվյալները API-ից
• Զտել և ցուցադրել համապատասխան տվյալներ յուրաքանչյուր որոնման համար
• Լրացուցիչ. Եթե դուք պատրաստ եք մարտահրավերի, օգտագործեք API v4, կառուցված GraphQL-ի միջոցով: Եթե ​​ցանկանում եք սովորել GraphQL, գնացեք իմ նախորդ հոդվածներից մեկը.

5. Reddit-ի ոճով չաթեր

Չաթերը հաղորդակցման հանրաճանաչ միջոց են՝ շնորհիվ իրենց պարզության և օգտագործման հեշտության: Բայց ի՞նչն է իրականում վառում ժամանակակից զրուցարանները: WebSockets!

Ինչ կսովորեք.

• Օգտագործեք WebSockets, իրական ժամանակի հաղորդակցություն և տվյալների թարմացումներ
• Աշխատեք օգտատերերի մուտքի մակարդակների հետ (օրինակ, զրույցի ալիքի սեփականատերը դեր ունի adminև սենյակում գտնվող մյուսները - user)
• Ձևաթղթերի մշակում և վավերացում. հիշեք, հաղորդագրություն ուղարկելու զրույցի պատուհանն է input
• Ստեղծեք և միացեք տարբեր զրույցներին
• Աշխատեք անձնական հաղորդագրությունների հետ: Օգտատերերը կարող են առանձին զրուցել այլ օգտատերերի հետ: Ըստ էության, դուք կստեղծեք WebSocket կապ երկու օգտվողների միջև:

6. Զոլավոր նավարկություն

Այս նավիգացիան յուրահատուկ է դարձնում այն, որ popover կոնտեյները փոխակերպվում է բովանդակությանը համապատասխանելու համար: Այս անցումը նրբագեղություն ունի՝ համեմատած նոր պոպովերի բացման և փակման ավանդական վարքագծի հետ:

Ինչ կսովորեք.

• Միավորել CSS անիմացիաները անցումներով
• Պղտորել բովանդակությունը և կիրառել ակտիվ դասը լողացող տարրի վրա

Փորձեք դա անել նախ ինքներդ, բայց եթե օգնության կարիք ունեք, ստուգեք սա քայլ առ քայլ ուղեցույց.

Source: www.habr.com