Skip to content

Svitwave/Team-work-CodeV1be-JavaScript

 
 

Repository files navigation

📚 Booksy Project

Створено командою “CodeVibe” в рамках освітнього проєкту GoIT, потік FSON120

⚙️ Технічний опис проєкту

Booksy — адаптивний багатосекційний лендинг, створений командою CodeVibe згідно з технічним завданням курсу GoIT FullStack Developer.


📋 Загальні вимоги

  • Розмітка семантична та валідна.
  • Підключено сучасний ресет і нормалізацію стилів.
  • Використано систему змінних CSS.
  • Код стилів організований за принципом mobile-first.
  • Адаптивна верстка для трьох точок розбиття:
    • 320px+ — мобільна версія,
    • 768px+ — планшетна,
    • 1440px+ — десктопна.
  • Застосовано Flexbox для побудови макета.
  • Використано JavaScript для інтерактивності та роботи динамічних елементів.

🧩 Структура сторінки

  1. Header (Ігор Коваленко) — логотип, навігація, кнопка відкриття модального вікна.
  2. Hero (Skyline) — головний заклик до дії з зображенням і кнопкою переходу із використанням Swiper.js.
  3. Article + Events (Світлана Дуда) — коротка інформація про платформу та перелік актуальних подій із використанням Swiper.js.
  4. Books (Євгенія Ріпа) — динамічний рендер списку книжок через JS, зображення і ціна.
  5. Feedbacks (Дмитро Фарбун) — відгуки користувачів, реалізовані через Swiper.js.
  6. Location (Максим Сичов) — інтерактивна карта та контактна інформація.
  7. Modal Window Modal Window Books (Ірина Пона) — модальне вікно з формою реєстрації.
  8. Modal Window Books (Карен) — модальне вікно з детальною інформацією про книгу реалізовано через JS.
  9. Footer (Михайло K.) — навігація, соцмережі, політика конфіденційності.

💡 JavaScript функціональність

  • Ініціалізація Swiper для секцій Hero, Events і Feedbacks.
  • Реалізація відкриття/закриття модальних вікон.
  • Обробка подій кліків для навігації та форм.
  • Плавна прокрутка до секцій.
  • Анімації появи елементів при скролі.
  • Рендер контенту через JS (Books,Hero,Modals Window,feedbacks, Events).
  • Валідація форм перед відправкою.

🚀 Ключові ролі

Роль Учасник GitHub
🧠 Team Lead Дмитро Фарбун @Diamond-Fox.ua
🧭 Scrum-майстер Дуда Світлана @Svitwave

👥 Команда розробників

Учасник Розділ GitHub
Ігор Коваленко 🧠 Header @Ihor-Kovalenko13
Ірина Пона 💬 Modal Window,🔧 Modal Window Books @iryna-pona
Skyline 💡 Hero Section @Skyline
Світлана Дуда 📰 Article, 🎉 Events @Світлана-Дуда
Євгенія Ріпа 📚 Books @Yevheniia Ripa
Максим Сичов 📍 Location @Максим-Сичов
Михайло K. 🔧 Footer, 💬 Feedbacks @Mykhailo-K
Карен 🔧 Modal Window Books @karen

🔗 Посилання на Pull Requests

🧩 Список основних пул-реквестів кожного учасника (номери вкажіть після злиття):

Учасник Розділ Pull Requests
Ігор Коваленко Header #... , #...
Ірина Пона Modal Window #... , #...
Дмитро Чорний Hero #... , #...
Світлана Дуда Article + Events #Diamond-FoxUA#4, #Diamond-FoxUA#13
Євгенія Ріпа Books #... , #...
Дмитро Фарбун Feedbacks #... , #...
Максим Сичов Location #...
Михайло Kрупа Footer #... , #...
Kарен Ісмаілов Modal Window Books #... , #...

🧾 Примітка

Внесок кожного учасника збережений в історії комітів та записах Pull Request-ів на GitHub.


🌐 Опис проєкту

Booksy — це вебсайт для книжкової спільноти, де можна:

  • 📖 знаходити та купувати нові книги;
  • 🎟️ дізнаватись про події та зустрічі;
  • 🗞️ реєструватись на зустрічі;
  • 💬 залишати відгуки;
  • 🌍 знаходити локації книжкових подій.

🛠 Використані технології

HTML5 CSS3 JavaScript GitHub



📐 Додаткові деталі

  • Макет виконано у Figma: Booksy Design
  • Тестування адаптивності через Chrome DevTools.
  • Валідація HTML/CSS — W3C Validator.
  • Оптимізація зображень — squoosh.
  • Деплой — GitHub Pages.

❤️ Вдячність

Проєкт реалізовано з любов’ю та ентузіазмом командою CodeVibe
під час навчання в GoIT FullStack Developer

Made with love

About

Booksy

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 42.1%
  • JavaScript 31.8%
  • HTML 26.1%