Шэсць задачак для Front-End распрацоўніка

1. Форма крэдытнай карты

Клёвая форма крэдытнай карты з гладкімі і прыемнымі мікраўзаемадзеяннямі. Уключае фарматаванне лікаў, праверку і аўтаматычнае вызначэнне тыпу карты. Яна пабудавана на Vue.js, а таксама поўнасцю адаптыўная. (Паглядзець можна тут.)

credit-card-form

Чаму навучыцеся:

• Апрацоўваць і валідаваць формы
• Апрацоўваць падзеі (напрыклад, пры змене палёў)
• Разбярэцеся як адлюстроўваць і размяшчаць элементы на старонцы, асабліва дадзеныя крэдытнай карты, якая-над формы

Артыкул перакладзены пры падтрымцы кампаніі EDISON Software, якая клапоціцца аб здароўі праграмістаў і іх сняданку, а таксама распрацоўвае праграмнае забеспячэнне на замову.

2. Гістаграма

Гістаграма - гэта дыяграма або графік, які ўяўляе катэгарыйныя дадзеныя з прастакутнымі слупкамі з вышынямі або даўжынямі, прапарцыйнымі значэнняў, якія яны ўяўляюць.

Яны могуць быць нанесены вертыкальна ці гарызантальна. Вертыкальная гістаграма часам называецца лінейнай дыяграмай.

Чаму навучыцеся:

• Адлюстроўваць дадзеныя ў структураваным і зразумелым выглядзе
• Дадаткова: Даведаецеся, як выкарыстоўваць элемент canvas і як маляваць элементы з ім

Тут вы можаце знайсці дадзеныя аб насельніцтве свету. Яны адсартаваны па гадах.

3. Анімацыя сэрцайка Twitter

Яшчэ ў 2016 годзе Twitter прадставіў гэтую дзіўную анімацыю для сваіх твітаў. Па стане на 2019 год яно ўсё яшчэ выглядае годна, дык чаму б не стварыць яго самастойна?

Чаму навучыцеся:

• Працаваць з CSS-атрыбутам keyframes
• Маніпуляваць і анімаваць элементы HTML
• Аб'ядноўваць JavaScript, HTML і CSS

4. Рэпазітары GitHub з функцыяй пошуку

Тут няма нічога незвычайнага - рэпазітары GitHub - гэта проста ўслаўлены спіс.
Задача складаецца ў тым, каб адлюстраваць рэпазітары і дазволіць карыстачу фільтраваць іх. Выкарыстоўвайце афіцыйны API GitHub для атрымання рэпазітараў для кожнага карыстальніка.

GitHub profile page github.com/indreklasn

Чаму навучыцеся:

• Атрымліваць дадзеныя з API
• Адлюстроўваць дадзеныя з API
• Фільтраваць і паказваць рэлевантныя дадзеныя для кожнага пошуку
• Дадаткова: Калі вы гатовы прыняць выклік, выкарыстоўвайце API v4, Створаны з выкарыстаннем GraphQL. Калі вы хочаце вывучыць GraphQL, перайдзіце да адной з маіх папярэдніх артыкулаў.

5. Чаты ў стылі Reddit

Чаты з'яўляюцца папулярным спосабам зносін дзякуючы прастаце і зручнасці выкарыстання. Але што на самой справе сілкуе сучасныя чаты? WebSockets!

Чаму навучыцеся:

• Выкарыстоўваць WebSockets, прымяняць камунікацыю ў рэжыме рэальнага часу і абнаўлення дадзеных
• Працаваць з узроўнямі доступу карыстальнікаў (напрыклад, уладальнік канала чата мае ролю admin, а іншыя ў пакоі - user)
• Апрацоўваць і валідаваць формы - памятаеце, акно чата для адпраўкі паведамлення з'яўляецца input
• Ствараць і ўступаць у розныя чаты
• Працаваць з асабістымі паведамленнямі. Карыстальнікі могуць мець зносіны з іншымі карыстальнікамі ў прыватным парадку. Па сутнасці, вы будзеце ўсталёўваць злучэнне WebSocket'а паміж двума карыстальнікамі.

6. Навігацыя ў стылі Stripe

Унікальнасць гэтай навігацыі заключаецца ў тым, што кантэйнер popover трансфармуецца пад змесціва. У гэтым пераходзе ёсць элегантнасць у параўнанні з традыцыйнымі паводзінамі адкрыцця і зачыненні новага паповера.

Чаму навучыцеся:

• Сумяшчаць CSS-анімацыю з пераходамі
• Зацяняць кантэнт і ўжываць актыўны клас для які перамяшчаецца элемента

Паспрабуйце спачатку зрабіць гэта самастойна, але калі вам патрэбна дапамога, азнаёмцеся з гэтым пакрокавым кіраўніцтвам.

Крыніца: habr.com