Створіть невеличку сторінку пошуку друзів у соціальних мережах з картками користувачів, пошуком, сортуванням та фільтрацією їх за віком, прізвищем, ім'ям, або чим завгодно, за допомогою Random User API :)
Це приклад. Ви повинні стилізувати свою програму так, як хочете.
Зробіть це особистим. Зробіть це красивим. Зробіть це ідеальним, а потім пишайтеся тим, що ви зробили.
Реалізуйте наведені нижче приклади користування.
- бачити список карток користувачів на сторінці, картки повинні бути гарно стилізовані з фотографією користувача, ім'ям, віком, номером телефону, можливо, з іншою інформацією користувача, яку ви бачите в інформаційній картці користувача
- шукати, ввівши ім’я в поле пошуку, і одразу побачити фільтрацію на сторінці
- сортувати картки за іменем/віком та за алфавітом (A-Z/Z-A)
- фільтрувати друзів за віком, іменами, будь-якими іншими параметрами
- бачити модні іконки та крутий дизайн з тінями, градієнтами, жовтим шрифтом на синьому фоні тощо. Використання шаблону цілком прийнятне
Зауважте, що це додаткова частина завдання. Ви можете реалізувати будь-що зі списку нижче.
- додайте пагінацію до прокручування
- сортуйте не тільки за прізвищем і віком, а й за датою реєстрації
- фільтруйте за місцем розташування та електронною поштою
- створить гарний дизайн, який підходить для мобільних пристроїв - responsive/fluid/elastic/будь-що
- використовуйте async/awaits для обробки асинхронних дій
- додайте підтримку адресного рядка, що означає, що користувач повинен бачити стан фільтрів і сортування в URL
- використовуючи свої знання ООП, розділіть свій додаток на різні частини, наприклад:
FriendsList,FiltersContainerтощо. - за допомогою модулів ES6 створіть вебсайт на основі frontend-компонентів
- використовувати всі
Array.methods, які ви знаєте :) - спробувати розібратися з асинхронною інкапсуляцією даних у request/response. Спробуйте логіку callbacks у дії
- зрозуміти різницю між синхронними та асинхронними network запитами
- дізнатися параметри та запити в дії
- використовувати
fetchта/абоXMLHttpRequest. Але НЕ jQuery. Поганий jQuery, поганий! Ніхто не любить jQuery!¯\_(ツ)_/¯ - зрозуміти плюси та мінуси імутабельності (незмінності) даних на прикладі копій масивів
- спробувати key/mouse events форм, керувати ними, вмикати та вимикати їх
- Ми вважаємо, що для цього завдання вам потрібно буде використовувати promises ;)
- Randomuser api with awesome simple examples and docs - ви можете використовувати один із цих API для отримання даних для вашого вебсайту;
- URL API - ви можете використовувати це для роботи з URL;
- Подивіться на Array methods on learn.javascript.ru і на MDN
- Manipulating the browser history - ви повинні знати, як працювати з історією браузера.
Коли ви завершите завдання, пушніть свій код у репозиторію GitHub і опублікуйте його використовуючи GitHub Pages.
Після завершення виконайте наступне:
- Для цього завдання вам знадобиться review коду:
- Для студентів курсу Frontend 2022: будь ласка, дотримуйтесь цих інструкцій
- Для студентів p2p course: будь ласка, дотримуйтесь цих інструкцій
- Опублікуйте демо вашого проекту в Студентському чаті і попросіть про фідбек. Ліквідуйте знайдені колегами баги. В PR додайте комент, з якого було б видно, що фідбек зібрано і оброблено, а знайдені баги виправлено.
- Чудова робота! Якщо ваш PR вже продивились ментори, узгодили та вмерджили (його статус змінено на
mergedз фіолетовою іконкою), то прийшов час ділитись своїми досягненнями з іншими – опублікуйте повідомлення в course channel:Friends App — #done(абоFriends App — #p2p_doneякщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!
Congratulations! 🎉
- Ви виконали всі обов’язкові завдання?
- Перевірені практичні завдання та
PR змержені в
frontend-2022-homeworks
repo
master?
Ви закінчили Stage 0 курсу!
Розмістіть святкову наклейку або танцювальний GIF у course channel.
... і ще невелика річ. Вкажіть себе серед тих, хто закінчив Stage 0 курсу.