Лабораторная работа №4. Создание приложения на React

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "airbnb-base",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+        "quotes": "off",
+        "indent": "off",
+        "no-console": "off",
+        "no-use-before-define": "off",
+        "no-alert": "off",
+        "no-restricted-globals": "off",
+        "quote-props": "off"
+    }
+}

.gitignore

@@ -24,3 +24,5 @@
 hs_err_pid*
 replay_pid*
 
+#node
+/node_modules

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/codeStyles/Project.xml

@@ -0,0 +1,25 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <option name="LINE_SEPARATOR" value="&#10;" />
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="VAR_DECLARATION_WRAP" value="2" />
+      <option name="OBJECT_LITERAL_WRAP" value="2" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="RIGHT_MARGIN" value="100" />
+      <option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
+      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
+      <option name="METHOD_CALL_CHAIN_WRAP" value="2" />
+      <option name="IF_BRACE_FORCE" value="1" />
+      <option name="DOWHILE_BRACE_FORCE" value="1" />
+      <option name="WHILE_BRACE_FORCE" value="1" />
+      <option name="FOR_BRACE_FORCE" value="1" />
+      <indentOptions>
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/labs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/labs.iml" filepath="$PROJECT_DIR$/.idea/labs.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

css/banner.css

@@ -0,0 +1,25 @@
+#banner {
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+#banner img {
+    border: 1px solid #3c3c3f;
+    border-radius: 5px;
+}
+
+#banner img.banner-show {
+    width: 100%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+}
+
+#banner img.banner-hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+}

css/custom.css

@@ -0,0 +1,11 @@
+@media screen and (max-width: 990px) {
+    #book-search {
+        width: 80px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #book-search {
+        width: 40px;
+    }
+}

html/about.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Details</title>
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="../css/banner.css">
+    <link rel="stylesheet" href="/css/custom.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="../index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" type="search" placeholder="Какая Ваша любимая книга? :)"
+                            aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="book-list.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="about.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="about-page py-5">
+            <div class="container">
+                <h1 class="display-4 mb-4">О Book store</h1>
+                <div class="row">
+                    <div class="col-md-6" id="banner">
+                        <img class="banner-hide" src="https://via.placeholder.com/200x300" class="img-fluid"
+                            alt="О нас">
+                        <img class="banner-hide" src="https://via.placeholder.com/300x300" class="img-fluid"
+                            alt="О нас">
+                        <img class="banner-hide" src="https://via.placeholder.com/400x300" class="img-fluid"
+                            alt="О нас">
+                    </div>
+                    <div class="col-md-6">
+                        <h2 class="mb-4">Наша история</h2>
+                        <p class="lead mb-4">Book store - это ведущий онлайн-магазин, предлагающий широкий выбор
+                            книг для всех ваших потребностей в чтении. Мы страстно любим книги и верим в силу знания и
+                            воображения.</p>
+                        <h2 class="mb-4">Наша миссия</h2>
+                        <p class="lead mb-4">Наша миссия - обеспечить доступ к широкому выбору книг по доступным ценам.
+                            Мы стараемся обеспечить исключительный уровень клиентского сервиса и обеспечить безупречный
+                            процесс покупки для наших клиентов.</p>
+                        <h2 class="mb-4">Наша команда</h2>
+                        <p class="lead mb-4">Наша команда состоит из страстных любителей книг, которые работают без
+                            устали, чтобы собрать лучший выбор книг и обеспечить отличный клиентский сервис. Мы страстно
+                            любим книги и верим в трансформационную силу чтения.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-dark text-white py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <p>&copy; 2023 Book Store. All rights reserved.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-white mr-3">Privacy Policy</a>
+                    <a href="#" class="text-white">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="../js/script.js"></script>
+    <script type="module">
+        import { myBanner } from "../js/banner.js"
+
+        document.addEventListener('DOMContentLoaded', () => {
+            myBanner("#banner");
+        });
+    </script>
+</body>
+
+</html>

html/admin.html

@@ -0,0 +1,120 @@
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Book Details</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <!-- <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> -->
+    <link rel="stylesheet" href="../css/custom.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="../index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" type="search" placeholder="Какая Ваша любимая книга? :)"
+                            aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="book-list.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="about.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid p-2">
+        <div class="btn-group" role="group">
+            <button id="items-add" class="btn btn-info">Добавить товар (диалог)</button>
+            <a class="btn btn-success" href="/page-edit.html">Добавить товар (страница)</a>
+        </div>
+        <div>
+            <table id="items-table" class="table table-striped">
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" class="w-25">Товар</th>
+                    <th scope="col" class="w-25">Цена</th>
+                    <th scope="col" class="w-25">Количество</th>
+                    <th scope="col" class="w-25">Сумма</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+        Автор, 2022
+    </footer>
+    <div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
+        <div class="modal-dialog">
+            <form id="items-form" class="needs-validation" novalidate>
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="items-update-title"></h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="text-center">
+                            <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+                                alt="placeholder">
+                        </div>
+                        <input id="items-line-id" type="number" hidden>
+                        <div class="mb-2">
+                            <label for="item" class="form-label">Товары</label>
+                            <select id="item" class="form-select" name="selected" required>
+                            </select>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="price">Цена</label>
+                            <input id="price" name="price" class="form-control" type="number" value="0.00" min="1000.00"
+                                step="0.50" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="count">Количество</label>
+                            <input id="count" name="count" class="form-control" type="number" value="0" min="1" step="1"
+                                required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="image">Изображение</label>
+                            <input id="image" type="file" name="image" class="form-control" accept="image/*">
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
+                        <button type="submit" class="btn btn-primary">Сохранить</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script type="module">
+        import validation from "../js/validation";
+        import { linesForm } from "../js/lines";
+
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesForm();
+        });
+    </script>
+</body>
+
+</html>

html/book-details.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Details</title>
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="/css/custom.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="../index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" type="search" placeholder="Какая Ваша любимая книга? :)" aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="book-list.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="about.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="book-page py-5">
+            <div class="container">
+                <h1 class="display-4 mb-4">Информация о книге</h1>
+                <div class="row">
+                    <div class="col-md-4">
+                        <img src="https://via.placeholder.com/300x200" class="img-fluid" alt="Book Cover">
+                    </div>
+                    <div class="col-md-8">
+                        <h2 class="mb-4">Война и мир</h2>
+                        <p class="lead mb-4">/описание/</p>
+                        <ul class="list-unstyled mb-4">
+                            <li><strong>Автор:</strong> Лев Толстой</li>
+                            <li><strong>Цена:</strong> $10.99</li>
+                            <li><strong>Количество страниц:</strong> 200</li>
+                            <li><strong>Год публикации:</strong> 2020</li>
+                        </ul>
+                        <button class="btn btn-primary btn-lg">Добавить в корзину</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-dark text-white py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <p>&copy; 2024 Book Store. All rights reserved.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-white mr-3">Privacy Policy</a>
+                    <a href="#" class="text-white">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="../js/script.js"></script>
+</body>
+
+</html>

html/book-list.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Catalog</title>
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="../css/custom.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="../index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" type="search" placeholder="Какая Ваша любимая книга? :)" aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="catalog.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="checkout.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="catalog-page py-5">
+            <div class="container">
+                <h1 class="display-4 mb-4">Каталог</h1>
+                <div class="row">
+                    <div class="col-md-3">
+                        <h2 class="mb-4">Фильтры</h2>
+                        <form>
+                            <div class="mb-3">
+                                <label for="category" class="form-label">Категория</label>
+                                <select class="form-select" id="category">
+                                    <option value="all">Все</option>
+                                    <option value="sci-fiction">Научная фантастика</option>
+                                    <option value="detective">Детективы</option>
+                                    <option value="biography">Биография</option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <label for="price-range" class="form-label">Диапазон цены</label>
+                                <input type="range" class="form-range" id="price-range" min="0" max="100" step="10">
+                                от <input type="number" class="" id="price-range" min="0" step="10">
+                                \n до <input type="number" class="" id="price-range" min="0" step="10">
+                            </div>
+                            <button type="submit" class="btn btn-primary">Сохранить фильтры</button>
+                        </form>
+                    </div>
+                    <div class="col-md-9">
+                        <div class="row">
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4 mb-4">
+                                <div class="card">
+                                    <img src="https://via.placeholder.com/300x200" class="card-img-top"
+                                        alt="Book Cover">
+                                    <div class="card-body">
+                                        <h5 class="card-title">Название Книги</h5>
+                                        <p class="card-text">Имя Автора</p>
+                                        <p class="card-text">$10.99</p>
+                                        <a href="book.html" class="btn btn-primary">Карточка товара</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-dark text-white py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <p>&copy; 2024 Book Store. All rights reserved.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-white mr-3">Privacy Policy</a>
+                    <a href="#" class="text-white">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="../js/script.js"></script>
+</body>
+
+</html>

html/cart.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cart Page</title>
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="/css/custom.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="../index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" type="search" placeholder="Какая Ваша любимая книга? :)" aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="catalog.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="about.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="cart-page py-5">
+            <div class="container">
+                <h1 class="display-4 mb-4">Товары в корзине</h1>
+                <div class="row">
+                    <div class="col-md-8">
+                        <table class="table table-striped table-bordered">
+                            <thead>
+                                <tr>
+                                    <th>Название Книги</th>
+                                    <th>Автор</th>
+                                    <th>Цена</th>
+                                    <th>Количество</th>
+                                    <th>Удалить</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>Название Книги 1</td>
+                                    <td>Автор 1</td>
+                                    <td>$10.99</td>
+                                    <td>
+                                        <input type="number" value="1" class="form-control">
+                                    </td>
+                                    <td>
+                                        <button class="btn btn-danger btn-sm">Remove</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Название Книги 2</td>
+                                    <td>Автор 2</td>
+                                    <td>$12.99</td>
+                                    <td>
+                                        <input type="number" value="2" class="form-control">
+                                    </td>
+                                    <td>
+                                        <button class="btn btn-danger btn-sm">Remove</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-4">
+                        <h2 class="mb-4">Итого</h2>
+                        <p class="lead mb-4">К оплате: $23.98</p>
+                        <button class="btn btn-primary btn-lg">Оформить заказ</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-dark text-white py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <p>&copy; 2024 Book Store. All rights reserved.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-white mr-3">Privacy Policy</a>
+                    <a href="#" class="text-white">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="../js/script.js"></script>
+</body>
+
+</html>

index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Store</title>
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="/css/custom.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="index.html">Book Store</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <form class="d-flex mx-auto w-50">
+                        <input class="form-control me-2" id="book-search" type="search" placeholder="Какая Ваша любимая книга? :)" aria-label="Search" width="100px">
+                        <button class="btn btn-outline-light" type="submit">Поиск</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="html/book-list.html">Каталог</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="html/about.html">О нас</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="html/cart.html" style="display: inline-block;">Корзина</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="html/admin.html" style="display: inline-block;">Админ</a>
+                            <!-- <img src="/src/icons/cart.svg" width="30px"> -->
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero py-5">
+            <div class="container">
+                <h1 class="display-4 mb-4">Приветствуем на Book Store!</h1>
+                <p class="lead mb-4">На нашем сайте вы найдете множество книг на любой вкус :)</p>
+                <a href="/html/book-list.html" class="btn btn-primary btn-lg">Перейти в каталог</a>
+            </div>
+        </section>
+
+        <section class="featured-books py-5">
+            <div class="container">
+                <h2 class="mb-4">Хиты этого месяца</h2>
+                <div class="row">
+                    <div class="col-md-4 mb-4">
+                        <div class="card">
+                            <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Book Cover">
+                            <div class="card-body">
+                                <h5 class="card-title">Война и мир</h5>
+                                <p class="card-text">Лев Толстой</p>
+                                <a href="html/book-details.html" class="btn btn-primary">Карточка товара</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 mb-4">
+                        <div class="card">
+                            <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Book Cover">
+                            <div class="card-body">
+                                <h5 class="card-title">Война и мир</h5>
+                                <p class="card-text">Лев Толстой</p>
+                                <a href="html/book-details.html" class="btn btn-primary">Карточка товара</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 mb-4">
+                        <div class="card">
+                            <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Book Cover">
+                            <div class="card-body">
+                                <h5 class="card-title">Война и мир</h5>
+                                <p class="card-text">Лев Толстой</p>
+                                <a href="html/book-details.html" class="btn btn-primary">Карточка товара</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-dark text-white py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <p>&copy; 2024 Book Store. All rights reserved.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-white mr-3">Privacy Policy</a>
+                    <a href="#" class="text-white">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="js/script.js"></script>
+</body>
+
+</html>

js/banner.js

@@ -0,0 +1,44 @@
+// модуль для смены изображения в баннере по таймеру
+
+// указывается блок, в котором будет баннер
+// блок должен содержать изображения
+export function myBanner(root) {
+    console.info("Loaded");
+
+    // получение всех изображений внутри баннера
+    const banners = document.querySelectorAll(`${root} img`);
+
+    // всем изображениям устанавливается класс banner-hide
+    // если были другие классы, то они будут удалены
+    for (let i = 0; i < banners.length; i += 1) {
+        banners[i].setAttribute("class", "banner-hide");
+    }
+
+    let old = banners.length - 1;
+    let current = 0;
+
+    // функция меняет изображения в цикле
+    // изображение с классом banner-show будет показано
+    // изображение с классом banner-hide будет скрыто
+    // функция запускает таймер, который через 5 секунд
+    // запускает функцию, снова создается таймер и т. д.
+    function loop() {
+        banners[current].setAttribute("class", "banner-show");
+        banners[old].setAttribute("class", "banner-hide");
+
+        console.info("Banner changed");
+
+        old = current;
+        current += 1;
+
+        if (current === banners.length) {
+            current = 0;
+        }
+
+        setTimeout(loop, 5000);
+    }
+
+    loop();
+}
+
+export default myBanner;

js/lines-modal.js

@@ -0,0 +1,59 @@
+// Модуль для работы с модальным окном
+
+// импорт компонента Modal из bootstrap
+import { Modal } from "bootstrap";
+import { cntrls, imagePlaceholder } from "./lines-ui";
+
+// поиск модального окна на странице
+const modal = document.getElementById("items-update");
+// если он найден, то создается экземпляр компонента Modal
+// для программного управления модальным окном
+const myModal = modal ? new Modal(modal, {}) : null;
+
+// поиск тега с заголовком модального кона для его смены
+const modalTitle = document.getElementById("items-update-title");
+
+// обнуление значений модального окна, т. к.
+// используется одно окно для всех операций
+function resetValues() {
+    cntrls.lineId.value = "";
+    cntrls.itemsType.value = "";
+    cntrls.price.value = parseFloat(0).toFixed(2);
+    cntrls.count.value = 0;
+    cntrls.image.value = "";
+    cntrls.imagePreview.src = imagePlaceholder;
+}
+
+// функция для показа модального окна
+// перед показом происходит заполнение формы для редактирования
+// если объект item не пуст
+export function showUpdateModal(item) {
+    modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
+    console.info(item);
+
+    if (item) {
+        cntrls.lineId.value = item.id;
+        cntrls.itemsType.value = item.itemsId;
+        cntrls.price.value = item.price;
+        cntrls.count.value = item.count;
+        // заполнение превью
+        // Если пользователь выбрал изображение, то оно загружается
+        // в тэг image с id image - preview
+        // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+        cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
+    } else {
+        resetValues();
+    }
+
+    myModal.show();
+}
+
+// функция для скрытия модального окна
+export function hideUpdateModal() {
+    resetValues();
+
+    // удаление класса was-validated для скрытия результатов валидации
+    cntrls.form.classList.remove("was-validated");
+
+    myModal.hide();
+}

js/lines-rest-api.js

@@ -0,0 +1,100 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(item, price, count, image) {
+    return {
+        itemsId: item,
+        price: parseFloat(price).toFixed(2),
+        count,
+        sum: parseFloat(price * count).toFixed(2),
+        image,
+    };
+}
+
+// обращение к серверу для получения всех типов товара (get)
+export async function getAllItemTypes() {
+    const response = await fetch(`${serverUrl}/items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения всех записей (get)
+export async function getAllLines() {
+    const response = await fetch(`${serverUrl}/lines?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения записи по первичному ключу (id) (get)
+// id передается в качестве части пути URL get-запроса
+export async function getLine(id) {
+    const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для создания записи (post)
+// объект отправляется в теле запроса (body)
+export async function createLine(item, price, count, image) {
+    const itemObject = createLineObject(item, price, count, image);
+
+    const options = {
+        method: "POST",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для обновления записи по id (put)
+// объект отправляется в теле запроса (body)
+// id передается в качестве части пути URL get-запроса
+export async function updateLine(id, item, price, count, image) {
+    const itemObject = createLineObject(item, price, count, image);
+
+    const options = {
+        method: "PUT",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для удаления записи по id (delete)
+// id передается в качестве части пути URL get-запроса
+export async function deleteLine(id) {
+    const options = {
+        method: "DELETE",
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}

js/lines-ui.js

@@ -0,0 +1,93 @@
+// модуль для работы с элементами управления
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    button: document.getElementById("items-add"),
+    table: document.querySelector("#items-table tbody"),
+    form: document.getElementById("items-form"),
+    lineId: document.getElementById("items-line-id"),
+    itemsType: document.getElementById("item"),
+    price: document.getElementById("price"),
+    count: document.getElementById("count"),
+    image: document.getElementById("image"),
+    imagePreview: document.getElementById("image-preview"),
+};
+
+// Дефолтное превью
+export const imagePlaceholder = "https://via.placeholder.com/200";
+
+// функция создает тег option для select
+// <option value="" selected>name</option>
+export function createItemsOption(name, value = "", isSelected = false) {
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name;
+    return option;
+}
+
+// функция создает ссылку (a) для таблицы
+// содержимое тега a заполняется необходимой иконкой (icon)
+// при нажатии вызывается callback
+// ссылка "оборачивается" тегом td
+// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
+function createTableAnchor(icon, callback) {
+    const i = document.createElement("i");
+    i.classList.add("fa-solid", icon);
+
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(i);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+    };
+
+    const td = document.createElement("td");
+    td.appendChild(a);
+    return td;
+}
+
+// функция создает колонку таблицы с текстом value
+// <td>value</td>
+function createTableColumn(value) {
+    const td = document.createElement("td");
+    td.textContent = value;
+    return td;
+}
+
+// функция создает строку таблицы
+// <tr>
+// <th scope="row">index + 1</th>
+// <td>item.items.name</td>
+// <td>parseFloat(item.price).toFixed(2))</td>
+// <td>item.count</td>
+// <td>parseFloat(item.sum).toFixed(2))</td>
+// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
+// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
+// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
+// </tr>
+export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(cntrls.itemsType[item.itemsId].innerText));
+    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+    row.appendChild(createTableColumn(item.count));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    // редактировать в модальном окне
+    row.appendChild(createTableAnchor("fa-pencil", editCallback));
+    // редактировать на странице page-edit
+    row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
+    // удаление
+    row.appendChild(createTableAnchor("fa-trash", deleteCallback));
+    return row;
+}

js/lines.js

@@ -0,0 +1,305 @@
+// модуль с логикой
+
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRow, imagePlaceholder,
+} from "./lines-ui";
+
+async function drawItemsSelect() {
+    // вызов метода REST API для получения списка типов товаров
+    const data = await getAllItemTypes();
+    // очистка содержимого select
+    // удаляется все, что находится между тегами <select></select>
+    // но не атрибуты
+    cntrls.itemsType.innerHTML = "";
+    // пустое значение
+    cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item) => {} аналогично function(item) {}
+    data.forEach((item) => {
+        cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
+    });
+}
+
+async function drawLinesTable() {
+    console.info("Try to load data");
+    if (!cntrls.table) {
+        return;
+    }
+    // вызов метода REST API для получения всех записей
+    const data = await getAllLines();
+    // очистка содержимого table
+    // удаляется все, что находится между тегами <table></table>
+    // но не атрибуты
+    cntrls.table.innerHTML = "";
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item, index) => {} аналогично function(item, index) {}
+    data.forEach((item, index) => {
+        cntrls.table.appendChild(
+            createTableRow(
+                item,
+                index,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+                () => showUpdateModal(item),
+                () => location.assign(`page-edit.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(item, price, count, image) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(item, price, count, image);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, item, price, count, image) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, item, price, count, image);
+    console.info("Updated");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function removeLine(id) {
+    if (!confirm("Do you really want to remove this item?")) {
+        console.info("Canceled");
+        return;
+    }
+    console.info("Try to remove item");
+    // вызов метода REST API для удаления записи
+    const data = await deleteLine(id);
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+// функция для получения содержимого файла в виде base64 строки
+// https://ru.wikipedia.org/wiki/Base64
+async function readFile(file) {
+    const reader = new FileReader();
+
+    // создание Promise-объекта для использования функции
+    // с помощью await (асинхронно) без коллбэков (callback)
+    // https://learn.javascript.ru/promise
+    return new Promise((resolve, reject) => {
+        // 2. "Возвращаем" содержимое когда файл прочитан
+        // через вызов resolve
+        // Если не использовать Promise, то всю работу по взаимодействию
+        // с REST API пришлось бы делать в обработчике (callback) функции
+        // onloadend
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            // Здесь могла бы быть работа с REST API
+            // Чтение заканчивает выполняться здесь
+            resolve(fileContent);
+        };
+        // 3. Возвращаем ошибку
+        reader.onerror = () => {
+            // Или здесь в случае ошибки
+            reject(new Error("oops, something went wrong with the file reader."));
+        };
+        // Шаг 1. Сначала читаем файл
+        // Чтение начинает выполняться здесь
+        reader.readAsDataURL(file);
+    });
+}
+
+// функция для обновления блока с превью выбранного изображения
+async function updateImagePreview() {
+    // получение выбранного файла
+    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
+    const file = cntrls.image.files[0];
+    // чтение содержимого файла в виде base64 строки
+    const fileContent = await readFile(file);
+    console.info("base64 ", fileContent);
+    // обновление атрибута src для тега img с id image-preview
+    cntrls.imagePreview.src = fileContent;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+
+        let imageBase64 = "";
+        // Получение выбранного пользователем изображения в виде base64 строки
+        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+        // дефолтное изображение
+        if (cntrls.imagePreview.src !== imagePlaceholder) {
+            // Загрузка содержимого атрибута src тэга img с id image-preview
+            // Здесь выполняется HTTP запрос с типом GET
+            const result = await fetch(cntrls.imagePreview.src);
+            // Получение из HTTP-ответа бинарного содержимого
+            const blob = await result.blob();
+            // Получение base64 строки для файла
+            // Здесь выполняется Promise из функции readFile
+            // Promise позволяет писать линейный код для работы с асинхронными методами
+            // без использования обработчиков (callback) с помощью await
+            imageBase64 = await readFile(blob);
+        }
+
+        // получение id строки для редактирования
+        // это значение содержится в скрытом input
+        const currentId = cntrls.lineId.value;
+        // если значение id не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        if (!currentId) {
+            await addLine(
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+            );
+        }
+
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
+// Если хотите делать через модальное окно, то удалите эту функцию
+export async function linesPageForm() {
+    console.info("linesPageForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+
+    // func1 = (id) => {} аналогично function func1(id) {}
+    const goBack = () => location.assign("/page4.html");
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события onchange в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    // получение параметров GET-запроса из URL
+    // параметры перечислены после символа ? (?id=1&color=black&...)
+    const urlParams = new URLSearchParams(location.search);
+
+    // получение значения конкретного параметра (id)
+    // указан только при редактировании
+    const currentId = urlParams.get("id");
+    // если id задан
+    if (currentId) {
+        try {
+            // вызов метода REST API для получения записи по первичному ключу(id)
+            const line = await getLine(currentId);
+            // заполнение формы для редактирования
+            cntrls.itemsType.value = line.itemsId;
+            cntrls.price.value = line.price;
+            cntrls.count.value = line.count;
+            // заполнение превью
+            // Если пользователь выбрал изображение, то оно загружается
+            // в тэг image с id image - preview
+            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
+        } catch {
+            // в случае ошибки происходит возврат к page4
+            goBack();
+        }
+    }
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+
+        let imageBase64 = "";
+        // Получение выбранного пользователем изображения в виде base64 строки
+        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+        // дефолтное изображение
+        if (cntrls.imagePreview.src !== imagePlaceholder) {
+            // Загрузка содержимого атрибута src тэга img с id image-preview
+            // Здесь выполняется HTTP запрос с типом GET
+            const result = await fetch(cntrls.imagePreview.src);
+            // Получение из HTTP-ответа бинарного содержимого
+            const blob = await result.blob();
+            // Получение base64 строки для файла
+            // Здесь выполняется Promise из функции readFile
+            // Promise позволяет писать линейный код для работы с асинхронными методами
+            // без использования обработчиков (callback) с помощью await
+            imageBase64 = await readFile(blob);
+        }
+
+        // если значение параметра запроса не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        if (!currentId) {
+            await addLine(
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+            );
+        }
+        // возврат к странице page4
+        goBack();
+    });
+}

js/validation.js

@@ -0,0 +1,25 @@
+// модуль используется для валидации форма на странице
+
+function validation() {
+    // поиск всех форма с классом .needs-validation
+    const forms = document.querySelectorAll("form.needs-validation");
+
+    for (let i = 0; i < forms.length; i += 1) {
+        const form = forms[i];
+        // для каждой формы добавляется обработчик события отправки
+        form.addEventListener("submit", (event) => {
+            // если форма не прошла валидацию
+            // то выключить стандартное действие
+            if (!form.checkValidity()) {
+                event.preventDefault();
+                // предотвращает распространение preventDefault
+                // на другие объекты
+                event.stopPropagation();
+            }
+            // добавляет к форме класс was-validated
+            form.classList.add("was-validated");
+        });
+    }
+}
+
+export default validation;

package.json

@@ -0,0 +1,27 @@
+{
+    "name": "book-store",
+    "version": "1.0.0",
+    "description": "Online book store",
+    "main": "index.html",
+    "scripts": {
+        "vite": "vite",
+        "start": "http-server -p 3000 ./",
+        "build": "vite build",
+        "rest": "json-server --watch data.json -p 8081",
+        "dev": "npm-run-all --parallel rest vite",
+        "prod": "npm-run-all build --parallel serve rest"
+    },
+    "dependencies": {
+        "bootstrap": "^5.2.3",
+        "@fortawesome/fontawesome-free": "6.4.2",
+        "json-server": "^1.0.0-beta.1"
+    },
+    "devDependencies": {
+      "eslint": "8.50.0",
+      "eslint-config-airbnb-base": "15.0.0",
+      "eslint-plugin-import": "2.28.1",
+        "http-server": "14.1.1 ",
+        "vite": "^4.1.4",
+        "npm-run-all": "4.1.5"
+    }
+}

react-app/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}

react-app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react-app/README.md

@@ -0,0 +1,29 @@
+#### Окружение:
+- nodejs 18;
+- VSCode;
+- ESLint плагин для VSCode;
+- для отладки необходимы бразузеры Chrome или Edge.
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта:
+
+```commandline
+npm run dev
+```
+
+#### Сборка проекта:
+
+```commandline
+npm run build
+```

react-app/index.html

@@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>My shop</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

react-app/jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

react-app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}

react-app/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+</svg>

react-app/src/App.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Header from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Header routes={routes}></Header>
+      <Container className='p-2' as="main" fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;

react-app/src/components/Header.jsx

@@ -0,0 +1,43 @@
+const Header = () => {
+    return (
+        <header>
+            <nav className="navbar navbar-expand navbar-dark bg-primary">
+                <div className="container">
+                    <a className="navbar-brand" href="index.html">Book Store</a>
+                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#navbarNav"
+                            aria-controls="navbarNav" aria-expanded="false"
+                            aria-label="Toggle navigation">
+                        <span className="navbar-toggler-icon"></span>
+                    </button>
+                    <div className="collapse navbar-collapse" id="navbarNav">
+                        <form className="d-flex mx-auto w-50">
+                            <input className="form-control me-2" id="book-search" type="search"
+                                   placeholder="Какая Ваша любимая книга? :)" aria-label="Search"
+                                   width="100px"/>
+                            <button className="btn btn-outline-light" type="submit">Поиск</button>
+                        </form>
+                        <ul className="navbar-nav ms-auto">
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/book-list.html">Каталог</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/about.html">О нас</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/cart.html"
+                                   style="display: inline-block;">Корзина</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/admin.html"
+                                   style="display: inline-block;">Админ</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        </header>
+    );
+};
+
+export default Header;

react-app/src/components/banner/Banner.css

@@ -0,0 +1,25 @@
+#banner {
+    margin: 2px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+#banner img {
+    border: 1px solid #3c3c3f;
+    border-radius: 5px;
+}
+
+#banner img.banner-show {
+    width: 100%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+}
+
+#banner img.banner-hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+}

react-app/src/components/banner/Banner.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/banner1.png';
+import banner2 from '../../assets/banner2.png';
+import banner3 from '../../assets/banner3.png';
+import './Banner.css';
+
+const Banner = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+    });
+
+    return (
+        <div id="banner" >
+            {
+                banners.map((banner, index) =>
+                    <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
+            }
+        </div >
+    );
+};
+
+export default Banner;

react-app/src/components/footer/Footer.css

@@ -0,0 +1,5 @@
+.my-footer {
+    background-color: #9c9c9c;
+    height: 32px;
+    color: #fff;
+}

react-app/src/components/footer/Footer.jsx

@@ -0,0 +1,23 @@
+//import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <footer className="bg-dark text-white py-4">
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-6">
+                        <p>&copy; {year} Book Store. All rights reserved.</p>
+                    </div>
+                    <div className="col-md-6 text-md-end">
+                        <a href="#" className="text-white mr-3">Privacy Policy</a>
+                        <a href="#" className="text-white">Terms of Service</a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

react-app/src/components/navigation/Navigation.css

@@ -0,0 +1,30 @@
+.my-navbar {
+    background-color: #3c3c3c !important;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+}
+
+.my-navbar .logo {
+    width: 26px;
+    height: 26px;
+}
+.form-centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5px;
+}
+
+@media (max-width: 768px) {
+    .form-centered {
+        flex-direction: column; /* Изменяем направление на колонку для мобильных устройств */
+        width: 100%; /* Устанавливаем ширину на 100% */
+    }
+
+    .form-centered .form-control {
+        width: 80%; /* Устанавливаем ширину поля ввода на 80% */
+        margin-bottom: 10px; /* Добавляем отступ снизу для мобильных устройств */
+    }
+}

react-app/src/components/navigation/Navigation.jsx

@@ -0,0 +1,54 @@
+import {
+    Navbar, Container, Form, FormControl, Button, Nav,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'react-router-dom';
+import { Cart2 } from 'react-bootstrap-icons';
+
+const Header = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false)
+        .shift();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+    return (
+        <Navbar expand="lg" variant="dark" bg="primary">
+            <Container fluid>
+                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                    <Cart2 className="d-inline-block align-top me-1 logo"/>
+                    Book Store
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="navbarNav"/>
+                <Navbar.Collapse id="navbarNav">
+                    <Form className="d-flex mx-auto form-centered" style={{ marginTop: '10px' }}>
+                        <FormControl
+                            type="search"
+                            placeholder="Какая Ваша любимая книга? :)"
+                            aria-label="Search"
+                            style={{
+                                width: '500px',
+                                marginRight: '5px',
+                            }}
+                        />
+                        <Button variant="outline-light" type="submit">Поиск</Button>
+                    </Form>
+                    <Nav className="me-auto link" activeKey={location.pathname}>
+                        {
+                            pages.map((page) =>
+                                <Nav.Link as={Link} key={page.path} eventKey={page.path}
+                                          to={page.path ?? '/'}>
+                                    {page.title}
+                                </Nav.Link>)
+                        }
+                    </Nav>
+
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};
+Header.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Header;

react-app/src/index.css

@@ -0,0 +1,27 @@
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}

react-app/src/main.jsx

@@ -0,0 +1,55 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import ErrorPage from './pages/ErrorPage.jsx';
+import WelcomePage from './pages/WelcomePage.jsx';
+import BookList from './pages/BookList.jsx';
+import BookDetails from './pages/BookDetails.jsx';
+import Page4 from './pages/Cart.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <WelcomePage />,
+    title: 'Главная страница',
+  },
+  {
+    path: '/BookList',
+    element: <BookList />,
+    title: 'Каталог',
+  },
+  {
+    path: '/BookDetails',
+    element: <BookDetails />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/page4',
+    element: <Page4 />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);

react-app/src/pages/BookDetails.jsx

@@ -0,0 +1,29 @@
+const BookDetails = () => {
+    return (
+        <main>
+            <section className="book-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Информация о книге</h1>
+                    <div className="row">
+                        <div className="col-md-4">
+                            <img src="https://via.placeholder.com/300x200" className="img-fluid" alt="Book Cover" />
+                        </div>
+                        <div className="col-md-8">
+                            <h2 className="mb-4">Война и мир</h2>
+                            <p className="lead mb-4">/описание/</p>
+                            <ul className="list-unstyled mb-4">
+                                <li><strong>Автор:</strong> Лев Толстой</li>
+                                <li><strong>Цена:</strong> $10.99</li>
+                                <li><strong>Количество страниц:</strong> 200</li>
+                                <li><strong>Год публикации:</strong> 2020</li>
+                            </ul>
+                            <button className="btn btn-primary btn-lg">Добавить в корзину</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default BookDetails;

react-app/src/pages/BookList.jsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+
+const Catalog = () => {
+    const [category, setCategory] = useState('all');
+    const [priceRange, setPriceRange] = useState({ min: 0, max: 100 });
+
+    const handleCategoryChange = (e) => {
+        setCategory(e.target.value);
+    };
+
+    const handlePriceChange = (e) => {
+        const { name, value } = e.target;
+        setPriceRange((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle filter submission logic here
+        console.log(`Selected Category: ${category}, Price Range: $${priceRange.min} - $${priceRange.max}`);
+    };
+
+    return (
+        <main>
+            <section className="catalog-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Каталог</h1>
+                    <div className="row">
+                        <div className="col-md-3">
+                            <h2 className="mb-4">Фильтры</h2>
+                            <form onSubmit={handleSubmit}>
+                                <div className="mb-3">
+                                    <label htmlFor="category" className="form-label">Категория</label>
+                                    <select className="form-select" id="category" value={category} onChange={handleCategoryChange}>
+                                        <option value="all">Все</option>
+                                        <option value="sci-fiction">Научная фантастика</option>
+                                        <option value="detective">Детективы</option>
+                                        <option value="biography">Биография</option>
+                                    </select>
+                                </div>
+                                <div className="mb-3">
+                                    <label htmlFor="price-range" className="form-label">Диапазон цены</label>
+                                    <input
+                                        type="range"
+                                        className="form-range"
+                                        id="price-range"
+                                        min="0"
+                                        max="100"
+                                        step="10"
+                                        value={priceRange.max}
+                                        onChange={handlePriceChange}
+                                        name="max"
+                                    />
+                                    от
+                                    <input
+                                        type="number"
+                                        className=""
+                                        name="min"
+                                        min="0"
+                                        step="10"
+                                        value={priceRange.min}
+                                        onChange={handlePriceChange}
+                                    />
+                                    до
+                                    <input
+                                        type="number"
+                                        className=""
+                                        name="max"
+                                        min="0"
+                                        step="10"
+                                        value={priceRange.max}
+                                        onChange={handlePriceChange}
+                                    />
+                                </div>
+                                <button type="submit" className="btn btn-primary">Сохранить фильтры</button>
+                            </form>
+                        </div>
+                        <div className="col-md-9">
+                            <div className="row">
+                                {/* Example book card */}
+                                {[...Array(6)].map((_, index) => (
+                                    <div key={index} className="col-md-4 mb-4">
+                                        <div className="card">
+                                            <img src={`https://via.placeholder.com/300x200?text=Book+${index + 1}`} className="card-img-top" alt={`Book Cover ${index + 1}`} />
+                                            <div className="card-body">
+                                                <h5 className="card-title">Название Книги {index + 1}</h5>
+                                                <p className="card-text">Имя Автора {index + 1}</p>
+                                                <p className="card-text">$10.99</p>
+                                                <a href="book.html" className="btn btn-primary">Карточка товара</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default Catalog;

react-app/src/pages/Cart.jsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+
+const Cart = () => {
+    const [cartItems, setCartItems] = useState([
+        {
+            id: 1, title: 'Название Книги 1', author: 'Автор 1', price: 10.99, quantity: 1,
+        },
+        {
+            id: 2, title: 'Название Книги 2', author: 'Автор 2', price: 12.99, quantity: 2,
+        },
+    ]);
+
+    const handleQuantityChange = (id, newQuantity) => {
+        setCartItems((prevItems) =>
+            prevItems.map((item) =>
+                (item.id === id ? { ...item, quantity: Math.max(1, newQuantity) } : item)));
+    };
+
+    const handleRemoveItem = (id) => {
+        setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    };
+
+    const getTotalPrice = () => {
+        return cartItems.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);
+    };
+
+    return (
+        <main>
+            <section className="cart-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Товары в корзине</h1>
+                    <div className="row">
+                        <div className="col-md-8">
+                            <table className="table table-striped table-bordered">
+                                <thead>
+                                <tr>
+                                    <th>Название Книги</th>
+                                    <th>Автор</th>
+                                    <th>Цена</th>
+                                    <th>Количество</th>
+                                    <th>Удалить</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {cartItems.map((item) => (
+                                    <tr key={item.id}>
+                                        <td>{item.title}</td>
+                                        <td>{item.author}</td>
+                                        <td>${item.price.toFixed(2)}</td>
+                                        <td>
+                                            <input
+                                                type="number"
+                                                value={item.quantity}
+                                                className="form-control"
+                                                onChange={(e) =>
+                                                    // eslint-disable-next-line max-len
+                                                    handleQuantityChange(item.id, parseInt(e.target.value, 10))}
+                                            />
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="btn btn-danger btn-sm"
+                                                onClick={() => handleRemoveItem(item.id)}
+                                            >
+                                                Удалить
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="col-md-4">
+                            <h2 className="mb-4">Итого</h2>
+                            <p className="lead mb-4">К оплате: ${getTotalPrice()}</p>
+                            <button className="btn btn-primary btn-lg">Оформить заказ</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default Cart;

react-app/src/pages/ErrorPage.jsx

@@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center">
+            <Container className='col-md-6'>
+                <Alert variant="danger">
+                    Страница не найдена
+                </Alert>
+                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;

react-app/src/pages/PageEdit.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const ItemsUpdateModal = ({ showModal, handleClose }) => {
+    const [itemId, setItemId] = useState('');
+    const [price, setPrice] = useState(0);
+    const [count, setCount] = useState(1);
+    const [image, setImage] = useState(null);
+    const [selectedItem, setSelectedItem] = useState('');
+
+    const handleImageChange = (e) => {
+        if (e.target.files[0]) {
+            setImage(URL.createObjectURL(e.target.files[0]));
+        }
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle form submission logic here
+        console.log({ itemId, selectedItem, price, count, image });
+        // Reset form or close modal after submission if needed
+        handleClose();
+    };
+
+    return (
+        <Modal show={showModal} onHide={handleClose} backdrop="static" keyboard={false}>
+            <Modal.Header closeButton>
+                <Modal.Title>Update Item</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <div className="text-center">
+                    <img
+                        src={image || 'https://via.placeholder.com/200'}
+                        className="rounded rounded-circle"
+                        alt="Preview"
+                    />
+                </div>
+                <Form onSubmit={handleSubmit} noValidate>
+                    <input type="hidden" value={itemId} onChange={(e) => setItemId(e.target.value)} />
+                    <Form.Group className="mb-2">
+                        <Form.Label>Товары</Form.Label>
+                        <Form.Select
+                            required
+                            value={selectedItem}
+                            onChange={(e) => setSelectedItem(e.target.value)}
+                        >
+                            {/* Add options dynamically here */}
+                            <option value="">Select an item</option>
+                            {/* Example options */}
+                            <option value="item1">Item 1</option>
+                            <option value="item2">Item 2</option>
+                        </Form.Select>
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Цена</Form.Label>
+                        <Form.Control
+                            type="number"
+                            value={price}
+                            min="1000.00"
+                            step="0.50"
+                            onChange={(e) => setPrice(parseFloat(e.target.value))}
+                            required
+                        />
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Количество</Form.Label>
+                        <Form.Control
+                            type="number"
+                            value={count}
+                            min="1"
+                            step="1"
+                            onChange={(e) => setCount(parseInt(e.target.value, 10))}
+                            required
+                        />
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Изображение</Form.Label>
+                        <Form.Control
+                            type="file"
+                            accept="image/*"
+                            onChange={handleImageChange}
+                        />
+                    </Form.Group>
+                </Form>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Закрыть
+                </Button>
+                <Button variant="primary" type="submit" form="items-form">
+                    Сохранить
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default ItemsUpdateModal;

react-app/src/pages/WelcomePage.jsx

@@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom';
+
+const WelcomePage = () => {
+    return (
+        <>
+            <main>
+                <section className="hero py-5">
+                    <div className="container">
+                        <h1 className="display-4 mb-4">Приветствуем на Book Store!</h1>
+                        <p className="lead mb-4">На нашем сайте вы найдете множество книг на любой вкус :)</p>
+                        <a href="/html/book-list.html" className="btn btn-primary btn-lg">Перейти в каталог</a>
+                    </div>
+                </section>
+
+                <section className="featured-books py-5">
+                    <div className="container">
+                        <h2 className="mb-4">Хиты этого месяца</h2>
+                        <div className="row">
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+};
+
+export default WelcomePage;

react-app/vite.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});

src/icons/cart.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.29977 5H21L19 12H7.37671M20 16H8L6 3H3M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>