Шість завдань для 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 версії 4, Створений з використанням GraphQL. Якщо ви хочете вивчити GraphQL, перейдіть до однієї з попередніх статей.

5. Чати у стилі Reddit

Чати є популярним способом спілкування завдяки простоті та зручності використання. Але що насправді живить сучасні чати? WebSockets!

Чому навчитеся:

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

6. Навігація у стилі Stripe

Унікальність цієї навігації полягає в тому, що контейнер Popover трансформується під вміст. У цьому переході є елегантність у порівнянні з традиційною поведінкою відкриття та закриття нового поповера.

Чому навчитеся:

• Поєднувати CSS-анімацію з переходами
• Затіняти контент і застосовувати активний клас для елемента, що переміщається

Спробуйте спочатку зробити це самостійно, але якщо вам потрібна допомога, ознайомтеся з цим покроковим керівництвом.

Джерело: habr.com