My-book

• 🇺🇸 English
• 🇺🇦 Ukrainian
• 🇷🇺 Russian

---

📚 EN 📚

Practice of layout, styles and code

Design - Figma layout

Description

A site for searching books and adding them to your library. This project is a practical work on the layout of HTML pages using CSS, SASS and JavaScript. The goal of the project is to improve the skills of responsive layout, styling with CSS and SASS, and interaction with the DOM via JavaScript.

Technology stack

🔍 APIs used:

Google Books APIs

Libraries used

• "parcel": "^2.10.2" is a packager for web applications, which helps automate the process of creating websites.
• "axios": "^1.6.1" - is a JavaScript library that allows you to make HTTP requests from a browser or from Node.js.
• "tui-pagination": "^3.4.1" - pagination component can show you the current page within a multi-page document and also provides links for included pages.
• "modern-normalize": "^2.0.0" — for unifying styles across browsers.
• "sass": "^1.69.5" — for writing nested styles and using variables in CSS.
• gh-pages - publish files to a gh-pages branch on GitHub

Implemented

General:

• added change of site theme;
• added a button to quickly move to the top of the site;
• adding a book to the library is implemented using the localStorage web storage;
• implemented adaptive pages;
• implemented the opening of a modal window with additional information when clicking on a book;

HomePage:

• rendering of random books based on four book series;
• custom animation for book series categories;
• slider for books in the mobile version of the site;

Catalog:

• when entering this page - a render of 10 random books in the .hero section in 5 categories.
• added a slider for books in the .hero section
• when entering this page - books are rendered in the .catalog section according to the first category from the .hero section;
• added the ability to search for books by book title;
• added pagination for the book catalog;

My Library:

• in the .hero section, a random book is displayed from the array in the dictionary.json file;
• a button for updating a random book has been added to the .hero section;
• when entering the page on this page - a render of books added to the library;
• added pagination for the book library;
• the number of pages is updated when books are added or removed from the library page;

---

---

📚 UK 📚 ⬆ Home ⬆

Практика верстки, стилів і коду

Дизайн - Figma layout

Опис

Сайт для пошуку книг і додавання їх до вашої бібліотеки. Цей проект являє собою практичну роботу з верстки HTML-сторінок за допомогою CSS, SASS і JavaScript. Метою проекту є вдосконалення навичок адаптивної верстки, стилізації за допомогою CSS і SASS і взаємодії з DOM через JavaScript.

Стек технологій

🔍 Використовувані API:

Google Books APIs

Використані бібліотеки

• "parcel": "^2.10.2" – пакувальник веб-додатків, який допомагає автоматизувати процес створення веб-сайтів.
• "axios": "^1.6.1" - це бібліотека JavaScript, яка дозволяє робити HTTP-запити з браузера або з Node.js.
• "tui-pagination": "^3.4.1" - компонент пагінації може показати вам поточну сторінку в багатосторінковому документі, а також надає посилання для включені сторінки.
• "modern-normalize": "^2.0.0" — для уніфікації стилів у різних браузерах.
• "sass": "^1.69.5" — для написання вкладених стилів і використання змінних у CSS.
• gh-pages - публікувати файли у гілці gh-pages на GitHub

Реалізовано

Загальне:

• додана зміна теми сайту;
• додана кнопка для швидкого переходу в початок сайту;
• додавання книги до бібліотеки реалізовано за допомогою веб-сховища localStorage;
• реалізовані адаптивні сторінки;
• реалізовано відкриття модального вікна з додатковою інформацією при натисканні на книгу;

Домашня сторінка:

• відтворення випадкових книг на основі чотирьох книжкових серій;
• власна анімація для категорій книжкових серій;
• слайдер для книг у мобільній версії сайту;

Каталог:

• при вході на цю сторінку - рендер 10 випадкових книг у розділі .hero у 5 категоріях.
• додано повзунок для книг у розділі .hero
• при вході на цю сторінку - книги відображаються в розділі .catalog відповідно до першого категорія з розділу .hero;
• додана можливість пошуку книг за назвою;
• додана пагінація для каталогу книг;

Моя бібліотека:

• у розділі .hero виводиться випадкова книга з масиву у файлі dictionary.json;
• в розділ .hero додана кнопка для оновлення випадкової книги;
• при вході на сторінку на цій сторінці - рендер книг, доданих до бібліотеки;
• додана пагінація для бібліотеки книг;
• кількість сторінок оновлюється при додаванні або видаленні книг зі сторінки бібліотеки;

---

---

📚 RU 📚 ⬆ Home ⬆

Практика верстки, стилей и кода

Дизайн - Figma layout

Описание

Сайт для поиска книг и добавления их в библиотеку. Данный проект представляет собой практическую работу по верстке HTML-страниц с использованием CSS, SASS и JavaScript. Цель проекта — улучшить навыки адаптивной верстки, стилизации с помощью CSS и SASS, а также взаимодействия с DOM через JavaScript.

Стек технологий

🔍 Используемые API:

Google Books APIs

Используемые библиотеки

• "parcel": "^2.10.2" — упаковщик веб-приложений, который помогает автоматизировать процесс создания веб-сайтов.
• "axios": "^1.6.1" — библиотека JavaScript, которая позволяет вам делать HTTP-запросы из браузера или из Node.js.
• "tui-pagination": "^3.4.1" — компонент пагинации может показывать вам текущую страницу в многостраничном документе, а также предоставляет ссылки на включенные страницы.
• "modern-normalize": "^2.0.0" — для унификации стилей в разных браузерах.
• "sass": "^1.69.5" — для написания вложенных стилей и использования переменных в CSS.
• gh-pages - публикация файлов в ветке gh-pages на GitHub

Реализовано

Общие:

• добавлена ​​смена темы сайта;
• добавлена ​​кнопка быстрого перехода наверх сайта;
• добавление книги в библиотеку реализовано с использованием веб-хранилища localStorage;
• реализованы адаптивные страницы;
• реализовано открытие модального окна с дополнительной информацией при клике на книгу;

Главная cтраница:

• отрисовка случайных книг на основе четырех серий книг;
• настраиваемая анимация для категорий серий книг;
• слайдер для книг в мобильной версии сайта;

Каталог:

• при входе на эту страницу - отрисовка 10 случайных книг в разделе .hero в 5 категориях.
• добавлен слайдер для книг в разделе .hero
• при входе на эту страницу - отрисовка книг в разделе .catalog по первой категории из раздела .hero;
• добавлена ​​возможность поиска книг по названию книги;
• добавлена ​​пагинация для каталога книг;

Моя библиотека:

• в разделе .hero отображается случайная книга из массива в файле dictionary.json;
• в разделе .hero добавлена ​​кнопка обновления случайной книги;
• при входе на эту страницу - рендер книг, добавленных в библиотеку;
• добавлена ​​пагинация для библиотеки книг;
• количество страниц обновляется при добавлении или удалении книг со страницы библиотеки;