| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Макет | |||||||||||||||||||||||||
2 | Booksy (односторінковий сайт) | |||||||||||||||||||||||||
3 | БАЗОВА ВЕРСІЯ (MVP - minimum viable product) | |||||||||||||||||||||||||
4 | Базові задачі | |||||||||||||||||||||||||
5 | Верстка адаптивна, окрім мобільних пристроїв. Точки перелому: - mobile: верстка гумова від 320px, стає адаптивною з 375px; - tablet: з 768px; - desktop: з 1440px При написанні стилів використаний Mobile First підхід і медіа-функція min-width. | |||||||||||||||||||||||||
6 | Верстка валідна (https://validator.w3.org/ , https://jigsaw.w3.org/css-validator/ ) | |||||||||||||||||||||||||
7 | Забезпечити дотримання семантики відповідно до стандартів HTML5 | |||||||||||||||||||||||||
8 | Код написаний з дотриманням настанови | |||||||||||||||||||||||||
9 | Підключений нормалізатор стилів modern-normalize | |||||||||||||||||||||||||
10 | Вихідний код відформатований за допомогою Prettier | |||||||||||||||||||||||||
11 | Здійснити підключення шрифтів | |||||||||||||||||||||||||
12 | Забезпечити оптимізацію розмірів векторної та растрової графіки | |||||||||||||||||||||||||
13 | Забезпечити підтримку відображення картинок для retina-екранів. Всі фонові і контентні растрові зображення — респонсивні і підтримують екрани щільністю x1 и x2. | |||||||||||||||||||||||||
14 | Оптимізувати завантаження зображень | |||||||||||||||||||||||||
15 | Всі svg-іконки підключити через sprite | |||||||||||||||||||||||||
16 | Додати відображення фавікон сторінки (знаходиться в UI KIT) | |||||||||||||||||||||||||
17 | Всім інтерактивним елементам (кнопки, посилання тощо) слід додати hover-ефект згідно макету (відповідно до UI Kit). Для ефекту hover клікабельним елементам потрібно додати зміну курсору. | |||||||||||||||||||||||||
18 | Анімації не є обовʼязковими, але їх використання може зробити взаємодію з вебсайтом більш приємною та інтуїтивно зрозумілою для користувача | |||||||||||||||||||||||||
19 | Посилання на документацію API https://books-backend.p.goit.global/api-docs/ | |||||||||||||||||||||||||
20 | Перелік категорій книг | https://books-backend.p.goit.global/books/category-list | пагінація кастомна | |||||||||||||||||||||||
21 | Популярні книги, що належать до усіх категорій | https://books-backend.p.goit.global/books/top-books | ||||||||||||||||||||||||
22 | Книги окремої категорії | https://books-backend.p.goit.global/books/category?category=selectedCategory | ||||||||||||||||||||||||
23 | Детальна інформація про книгу | https://books-backend.p.goit.global/books/ bookId | ||||||||||||||||||||||||
24 | Структура проєкту | |||||||||||||||||||||||||
25 | - Header - Hero - Books - Feedbacks - Events - Article - Location - Footer - Modal window | |||||||||||||||||||||||||
26 | Header | Кравець Дмитро. dima2.kravets@gmail.com | ||||||||||||||||||||||||
27 | В Header-і знаходиться logo і навігація по сайту. | tasks: markup header, | ||||||||||||||||||||||||
28 | Logo слід реалізувати у форматі svg. | JS:mobile menu/window | ||||||||||||||||||||||||
29 | Для мобільних пристроїв навігація по сайту має бути розміщена в меню, взаємодія з яким має бути реалізована за допомогою JS. По clickу на кнопку-іконку з бургер-меню, меню має плавно зʼявитися і заповнити всю ширину та висоту в'юпорту пристрою користувача. Поки відкрито бургер-меню сторінка під ним не повинна скролитись. У разі clickу по елементу навігації, користувача слід перенаправити до відповідної секції сайту і закрити меню. Меню також можна закрити по clickу на кнопку-іконку закриття. | files: header.js header.html | ||||||||||||||||||||||||
30 | Навігація по сайту має бути реалізована якірними посиланнями, які ведуть до відповідних секцій сайту з застосуванням повільного скролу. | |||||||||||||||||||||||||
31 | Hero | Оксана Семенчук - oksana.kostenko3000@gmail.com | ||||||||||||||||||||||||
32 | Текст “Discover Your Next Great Read Today!” є головним заголовком сайту | tasks: markup hero, | ||||||||||||||||||||||||
33 | Посилання "Shop Now!" має перенаправляти користувача до секції "Books" | JS: slider | ||||||||||||||||||||||||
34 | Секція також містить слайдер (https://swiperjs.com/swiper-api), який має бути реалізований як список елементів за допомогою <ul>. Користувач повинен мати змогу взаємодіяти зі слайдером через кнопки (стрілочки вліво та вправо). У разі досягнення кінця списку елементів, кнопка відповідно до вказаного напрямку повинна бути задізейблена (користувач більше не може взаємодіяти з нею, і вона не реагує на події clickу або натискання клавіші). Задізейблена кнопка візуальною змінюється, що підкреслює її неактивний стан (стилі взяти з UI Elements на макеті). | hero.html hero.js | ||||||||||||||||||||||||
35 | Зображення у слайдері слід реалізувати як контентні та взяті з макету, можна додати ще свої. | |||||||||||||||||||||||||
36 | Books | Danylo Borovskyi, danilborovskii199911@gmail.com | ||||||||||||||||||||||||
37 | У секції немає видимого заголовку. Потрібно зробити прихований заголовок “Trending books”. | |||||||||||||||||||||||||
38 | Текст “Books” є підзаголовком секції. | |||||||||||||||||||||||||
39 | Праворуч від підзаголовку секції розміщена інформація про кількість відображених книг у списку із загальну кількості, наприклад "Showing 32 of 100" | tasks:markup books,visuallly-hiden, | ||||||||||||||||||||||||
40 | Під підзаголовком секції має бути блок з фільтрацією у вигляді списку <ul>. Категорії фільтратції потрібно глянути з отриманої відповіді з бекенду. | JS: fitered, book modal | ||||||||||||||||||||||||
41 | Праворуч від блоку фільтрації відображений перелік доступних книг до продажу, який слід реалізувати за допомогою <ul>. Кожен елемент списку містить зображення книги, назву як заголовок, автора та ціну, кнопку "Learn More". Інформація про книги з'являється по запиту на бекенд. В десктопній весії список має складатися з 24 книг, а в мобільній версії - з 10-ти. Клік по кнопці відкриває модальне вікно "Book Modal". | files: books.html books.js | ||||||||||||||||||||||||
42 | Зображення потрібно реалізувати як контенті. | |||||||||||||||||||||||||
43 | Під списком потрібно реалізувати пагінацію. Кожен раз по clickу на кнопку "Show More" типу "button" має додатково підвантажуватись ще 4 книги (посилання на документацію API знаходиться вище в ТЗ) до тих пір, поки не вичерпається їх перелік. В такому разі кнопка "Show More" має бути прихована. | |||||||||||||||||||||||||
44 | Feedbacks | Anastasiia Sukhai, asyasyka@gmail.com | ||||||||||||||||||||||||
45 | Текст “Customer Feedbacks" є заголовком секції. | |||||||||||||||||||||||||
46 | Перелік відгуків необхідно реалізувати за допомогою <ul> у вигляді горизонтального слайдера (https://swiperjs.com/swiper-api). Користувач повинен мати змогу взаємодіяти зі слайдером через мишу, клавіатуру (клавіш Tab та стрілок) або сенсорний екран. У разі досягнення кінця списку елементів, кнопка відповідно до вказаного напрямку повинна бути задізейблена (користувач більше не може взаємодіяти з нею, і вона не реагує на події clickу або натискання клавіші). Задізейблена кнопка візуальною змінюється, що підкреслює її неактивний стан. Текст відгуків взяти з макету, або довільний. | tasks: markup feedbacks, JS:slider files: feedback.html feedback.js | ||||||||||||||||||||||||
47 | Events | Анна Ярмоленко anna8879ns@gmail.com | ||||||||||||||||||||||||
48 | Текст “Upcoming Events at Booksy" є заголовком секції. | tasks: markup events, | ||||||||||||||||||||||||
49 | Перелік популярних івентів необхідно реалізувати за допомогою <ul> як список елементів-подій. Кожна з статей складається з контентного зображення, заголовку, формату і дати, опису та кнопки "Register". Кнопка "Register" відкриває модальне вікно реєстрації на захід. | JS:modal window files: events.html events.js | ||||||||||||||||||||||||
50 | Article | (dmd) dmode90@gmail.com | ||||||||||||||||||||||||
51 | Текст “Welcome to Booksy – your cozy corner for handpicked reads” є заголовком секції. | Files:article.html JS:products-api.js | ||||||||||||||||||||||||
52 | Секція також містить зображення, яке слід реалізувати як контенте, та описову частину. | JS: запити до api, localStorage | ||||||||||||||||||||||||
53 | Location | София Курилова sofia.velikaua@gmail.com | ||||||||||||||||||||||||
54 | Текст “How to find us” є заголовком секції. | |||||||||||||||||||||||||
55 | У секції знаходиться перелік контактів компанії, який необхідно реалізувати як список елементів за допомогою <ul> (пошти, телефону та адреси книгарні). | |||||||||||||||||||||||||
56 | Іконки з контактами/адресою потрібно реалізувати у форматі svg. (Див.рядок 15) | |||||||||||||||||||||||||
57 | Пошта та телефон повинні мати спеціальні href і бути клікабельними. | |||||||||||||||||||||||||
58 | Під списком необхідно підключити карту google-maps через iframe. Для цього заходимо до карти goolge maps, обираємо потрібну адресу на карті, далі ліворуч тиснемо на кнопку "Поділитися", обираємо вкладку "Вставити карту" та тиснемо "Скопіювати HTML-код". Адресу потрібно обрати 123 Books St, Sydney NSW 2000 AU. Інструкція додавання коду карти до проєкту. | Tasks: markup location, iframe | ||||||||||||||||||||||||
59 | Footer | Milena Kachko kachkomilena@gmail.com | ||||||||||||||||||||||||
60 | В Footer-і знаходиться лого, перелік якірних посилань по сайту, форма та напис: "© 2025 Booksy. All rights reserved." | |||||||||||||||||||||||||
61 | Logo слід реалізувати у форматі svg. | |||||||||||||||||||||||||
62 | Перелік якірних посилань, які ведуть до відповідних секцій сайту, мають бути реалізовано як список елементів за допомогою <ul>. | Tasks: markup footer JS: form | ||||||||||||||||||||||||
63 | Секція також містить форму, що включає обовʼязкові до заповнення елементи <input> та кнопку “Sign Up" типу submit. Полю для введення електронної пошти слід додати мінімальну валідацію введених даних за допомогою атрибуту pattern="^\w+(\.\w+)?@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$". | Files: footer.html footer.js | ||||||||||||||||||||||||
64 | Book Modal | dmd: modal-books.html markup тімліду: запитай ментора що робити з виділеним червоним, бо таких даних апі не видає, я зараз створив тестовий обєкт якийм заміняю відсутні дані, і з нього підтягую "Details", "Shipping" та "Returns"... | ||||||||||||||||||||||||
65 | Модальне вікно складається з інформації про книгу, по якій відбувся клік в секції “Books” на кнопку "Learn More" - фото, назви, автора, ціни, форми для вибору кількості та інформації про дану книгу - Details, Shipping, Returns. | |||||||||||||||||||||||||
66 | Текст “I will find you" є назвою книги (заголовок), назва має підтягуватись динамічно. | |||||||||||||||||||||||||
67 | Форма містить поля для збільшення та зменшення кількості книг до замовлення, а також кнопки "Add To Cart", яка надсилає обрану кількість книг з типом button та кнопку "Buy Now" з типом submit. При кліку на кнопку "Add To Cart" інформація про кількість обраних книг має бути виведена у консоль, або довільним повідомленням на сторінці. При кліку на кнопку "Buy Now" потрібно вивести повідомлення "Дякуємо за покупку". | |||||||||||||||||||||||||
68 | Деталі про книгу варто реалізувати через бібліотеку Accordeon, які містять три пункти "Details", "Shipping" та "Returns", інформація має підтягуватись динамічно. | |||||||||||||||||||||||||
69 | Модальне вікно також містить кнопку-іконку закриття, яку слід реалізувати як svg. | |||||||||||||||||||||||||
70 | Модальне вікно повинно закриватись по clickу на кнопку-іконку закриття, по clickу на backdrop, а також натисканню на клавішу Escape. | |||||||||||||||||||||||||
71 | Сторінка під модальним вікном не повинна скролитись. | |||||||||||||||||||||||||
72 | Contact Modal | dmd: modal-contacts.html markup | ||||||||||||||||||||||||
73 | Текст “Register" є заголовком модального вікна. | |||||||||||||||||||||||||
74 | У модальному вікні треба створити форму з полями для імені, пошти та повідомлення, кнопкою "Register" з типом submit. Поля Name* та Email* є обовʼязковими. | на якомусь з занять в нас це було. за допомогою JS робимо перевірку і в JS фарбуємо border і color в червоний | ||||||||||||||||||||||||
75 | Модальне вікно також містить назву події, на яку відбувається реєстрація та кнопку-іконку закриття. | dmd: така вимога є в ТЗ MVP чи у додаткових завданнях? Пропоную тим, чого немає в ТЗ зайнятись лише після того як буде готове MVP та додаткові завдання. | ||||||||||||||||||||||||
76 | Модальне вікно повинно закриватись по clickу на кнопку-іконку закриття, по clickу на backdrop, а також натисканню на клавішу Escape. | |||||||||||||||||||||||||
77 | Сторінка під модальним вікном не повинна скролитись. | |||||||||||||||||||||||||
78 | ДОДАТКОВІ ЗАВДАННЯ (необовʼязкові) | |||||||||||||||||||||||||
79 | можуть реалізовуватися командою лише за наявності реалізованого MVP. | |||||||||||||||||||||||||
80 | Loader | |||||||||||||||||||||||||
81 | Підключити/зверстати Loader (spinner) для асинхронних запитів | Oleksandr Rachok "rachok010291@gmail.com" | ||||||||||||||||||||||||
82 | Scroll up | |||||||||||||||||||||||||
83 | Реалізувати кнопку, по clickу на яку користувач повертатиметься на початок сайту ("Arrows" в UI Elements) | |||||||||||||||||||||||||
84 | Pagination | |||||||||||||||||||||||||
85 | Пагінацію потрібно реалізувати на клієнті, віддаючи колекцію Shopping list, яка зберігається в localStorage, відповідними порціями на сторінку Shopping list | |||||||||||||||||||||||||
86 | ||||||||||||||||||||||||||
87 | ||||||||||||||||||||||||||
88 | ||||||||||||||||||||||||||
89 | ||||||||||||||||||||||||||
90 | ||||||||||||||||||||||||||
91 | ||||||||||||||||||||||||||
92 | ||||||||||||||||||||||||||
93 | ||||||||||||||||||||||||||
94 | ||||||||||||||||||||||||||
95 | ||||||||||||||||||||||||||
96 | ||||||||||||||||||||||||||
97 | ||||||||||||||||||||||||||
98 | ||||||||||||||||||||||||||
99 | ||||||||||||||||||||||||||
100 | ||||||||||||||||||||||||||