pocess3

Lab3/PrBookfill/css/banner.css

@@ -2,7 +2,10 @@
     margin: 5px;
     display: flex;
     align-items: center;
-    flex-direction: column;
+    flex-direction: row;
+
+    justify-content: space-around; /* распределяет элементы равномерно по горизонтали */
+    flex-wrap: nowrap; /* если вы хотите, чтобы все элементы были в одной линии и не переходили на новую линию. Если нужно переход на новую линию при нехватке места, укажите 'wrap' */
 }
 
 #banner img {

Lab3/PrBookfill/index.html

@@ -54,17 +54,17 @@
         <div class="row">
             <div class="carousel container-fluid p-0 mt-5">
                 <div class="carousel-inner">
-                    <div id="banner">
-                        <img class="banner-hide" src="png/books/capital.jpg" alt="banner1">
-                        <img class="banner-hide" src="png/books/filosofy.jpg" alt="banner1">
-                        <img class="banner-hide" src="png/books/hideger.jpg" alt="banner1">
-                    </div>
                     <div class="carousel-item active p-4">
-                        <img src="png/books/capital.jpg" class="w-100 img-fluid mt-5 ml-4 p-3" id="el_car">
+                        <div id="banner">
+                            <img class="banner-hide" src="png/books/capital.jpg" alt="banner1">
+                            <img class="banner-hide" src="png/books/filosofy.jpg" alt="banner1">
+                            <img class="banner-hide" src="png/books/hideger.jpg" alt="banner1">
+                            <img class="banner-hide" src="png/books/metro.jpg" alt="banner1">
+                            <img class="banner-hide" src="png/books/platon.jpg" alt="banner1">
+                            <img class="banner-hide" src="png/books/blev.jpg" alt="banner1">
+                        </div>
                     </div>
-                    <div class="carousel-item">
+                    <div class="carousel-item"></div>
-                    </div>
-
                 </div>
 
                 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@@ -96,5 +96,4 @@
         });
     </script>
 </body>
-
 </html>

Lab3/PrBookfill/js/banner.js

@@ -17,8 +17,10 @@ function myBanner(root) {
     banners[i].setAttribute('class', 'banner-hide');
   }
 
-  let old = banners.length - 1;
+  let old = banners.length - 3;
   let current = 0;
+  let current2 = 1;
+  let current3 = 2;
 
   // функция меняет изображения в цикле
   // изображение с классом banner-show будет показано
@@ -28,16 +30,28 @@ function myBanner(root) {
   // eslint-disable-next-line require-jsdoc
   function loop() {
     banners[current].setAttribute('class', 'banner-show');
+    banners[current2].setAttribute('class', 'banner-show');
+    banners[current3].setAttribute('class', 'banner-show');
     banners[old].setAttribute('class', 'banner-hide');
 
     // eslint-disable-next-line quotes
     console.info("Banner changed");
 
     old = current;
-    current += 1;
+    current = current2;
+    current2 = current3;
+    current3 += 1;
 
-    if (current === banners.length) {
+    if (current + 2 === banners.length) {
       current = 0;
+      current2 = 1;
+      current3 = 2;
+      banners[old].setAttribute('class', 'banner-hide');
+      banners[old + 1].setAttribute('class', 'banner-hide');
+      banners[old + 2].setAttribute('class', 'banner-hide');
+      banners[current].setAttribute('class', 'banner-show');
+      banners[current + 1].setAttribute('class', 'banner-show');
+      banners[current + 2].setAttribute('class', 'banner-show');
     }
 
     setTimeout(loop, 5000);

Lab3/PrBookfill/js/lines.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 // модуль с логикой
 
 import {hideUpdateModal, showUpdateModal} from './lines-modal';
@@ -19,7 +18,7 @@ async function drawItemsSelect() {
   cntrls.itemsType.innerHTML = '';
   // пустое значение
   // eslint-disable-next-line max-len
-  cntrls.itemsType.appendChild(createItemsOption('Выберите значение', '', true));
+  cntrls.itemsType.appendChild(createItemsOption('Choose category', '', true));
   // цикл по результату ответа от сервера
   // используется лямбда-выражение
   // (item) => {} аналогично function(item) {}
@@ -185,7 +184,8 @@ export function linesForm() {
       const blob = await result.blob();
       // Получение base64 строки для файла
       // Здесь выполняется Promise из функции readFile
-      // Promise позволяет писать линейный код для работы с асинхронными методами
+      // Promise позволяет писать линейный код для
+      // работы с асинхронными методами
       // без использования обработчиков (callback) с помощью await
       imageBase64 = await readFile(blob);
     }
@@ -218,7 +218,8 @@ export function linesForm() {
   });
 }
 
-// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
+// Функция для обработки создания и
+// редактирования элементов таблицы через страницу page-edit.html
 // Если хотите делать через модальное окно, то удалите эту функцию
 // eslint-disable-next-line require-jsdoc
 export async function linesPageForm() {
@@ -287,7 +288,8 @@ export async function linesPageForm() {
       const blob = await result.blob();
       // Получение base64 строки для файла
       // Здесь выполняется Promise из функции readFile
-      // Promise позволяет писать линейный код для работы с асинхронными методами
+      // Promise позволяет писать линейный
+      // код для работы с асинхронными методами
       // без использования обработчиков (callback) с помощью await
       imageBase64 = await readFile(blob);
     }

Lab3/PrBookfill/package.json

@@ -1,27 +1,26 @@
 {
-  "name": "prbookfill",
+  "name": "int-prog",
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "vite": "vite",
     "serve": "http-server -p 3000 ./dist/",
     "build": "vite build",
-    "prod": "npm-run-all build serve"
+    "rest": "json-server --watch data.json -p 8081",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all build --parallel serve rest"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "6.4.2",
-    "@popperjs/core": "^2.11.8",
     "bootstrap": "5.3.2",
-    "fontkit": "^2.0.2",
+    "@fortawesome/fontawesome-free": "6.4.2"
-    "jquery": "^3.7.1",
-    "jsdom": "^22.1.0"
   },
   "devDependencies": {
-    "eslint": "^8.53.0",
+    "vite": "4.4.9",
-    "eslint-config-google": "^0.14.0",
+    "eslint": "8.50.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
     "http-server": "14.1.1",
-    "npm-run-all": "4.1.5",
+    "json-server": "0.17.4",
-    "vite": "4.4.9"
+    "npm-run-all": "4.1.5"
   }
-}
+}