Шест задатака за фронт-енд програмера

1. Образац кредитне картице

Цоол облик кредитне картице са глатким и пријатним микро интеракцијама. Укључује форматирање бројева, верификацију и аутоматско откривање типа картице. Изграђен је на Вуе.јс и такође је потпуно прилагодљив. (Можете видети овде.)

образац кредитне картице

Шта ћете научити:

• Обрадите и потврдите обрасце
• Руковање догађајима (на пример, када се поља промене)
• Схватите како да прикажете и поставите елементе на страницу, посебно информације о кредитној картици које се појављују на врху обрасца

Чланак је преведен уз подршку ЕДИСОН софтвера, који брине о здрављу програмера и њиховом доручкуИ развија прилагођени софтвер.

2. Хистограм

Хистограм је графикон или графикон који представља категоричке податке са правоугаоним тракама са висинама или дужинама пропорционалним вредностима које представљају.

Могу се применити вертикално или хоризонтално. Вертикални тракасти графикон се понекад назива линијским графиконом.

Шта ћете научити:

• Прикажите податке на структуриран и разумљив начин
• Додатно: Научите како да користите елемент canvas и како се њиме цртају елементи

Овде можете пронаћи податке о светској популацији. Разврстани су по годинама.

3. Твиттер Хеарт Аниматион

Још 2016. године, Твитер је представио ову невероватну анимацију за своје твитове. Од 2019. и даље изгледа као део, па зашто га не бисте сами направили?

Шта ћете научити:

• Радите са ЦСС атрибутом keyframes
• Манипулишите и анимирајте ХТМЛ елементе
• Комбинујте ЈаваСцрипт, ХТМЛ и ЦСС

4. ГитХуб спремишта са функцијом претраживања

Овде нема ничег фенси – ГитХуб спремишта су само прослављена листа.
Циљ је приказати спремишта и омогућити кориснику да их филтрира. Користите званични ГитХуб АПИ да добијете спремишта за сваког корисника.

ГитХуб профилна страница - гитхуб.цом/индрекласн

Шта ћете научити:

• Примите податке од АПИ-ја
• Приказ података из АПИ-ја
• Филтрирајте и прикажите релевантне податке за сваку претрагу
• Опционо: Ако сте спремни за изазов, користите АПИ в4, направљен помоћу ГрапхКЛ-а. Ако желите да научите ГрапхКЛ, идите на један од мојих претходних чланака.

5. Четови у стилу Реддит-а

Ћаскања су популаран начин комуникације због своје једноставности и лакоће коришћења. Али шта заиста подстиче модерне собе за ћаскање? ВебСоцкетс!

Шта ћете научити:

• Користите ВебСоцкетс, комуникацију у реалном времену и ажурирање података
• Радите са нивоима приступа корисника (на пример, власник канала за ћаскање има улогу admin, и остали у просторији - user)
• Обрадите и потврдите обрасце - запамтите, прозор за ћаскање за слање поруке је input
• Креирајте и придружите се различитим четовима
• Радите са личним порукама. Корисници могу приватно да ћаскају са другим корисницима. У суштини, успоставићете ВебСоцкет везу између два корисника.

6. Навигација у стилу пруге

Оно што ову навигацију чини јединственом је то што се искачући контејнер трансформише тако да одговара садржају. Постоји елеганција у овој транзицији у поређењу са традиционалним понашањем отварања и затварања новог поповер-а.

Шта ћете научити:

• Комбинујте ЦСС анимацију са прелазима
• Затамните садржај и примените активну класу на лебдећи елемент

Покушајте прво да то урадите сами, али ако вам је потребна помоћ, погледајте ово корак по корак водич.

Извор: ввв.хабр.цом