небольшие изменения для сдачи доп задания по дизайну

.eslintrc.json

@@ -12,7 +12,8 @@
     "rules": {
       "prettier/prettier": "error",
       "no-console": "off",
-      "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+      "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+       "no-param-reassign": "off"
     }
   }
   

html/mvc/view.js

@@ -22,17 +22,36 @@ const view = {
     renderBooks(books, container) {
         container.innerHTML = "";
         books.forEach((book) => {
+            // определяем класс для статуса
+            let statusClass = "text-muted fw-bold";
+            switch ((book.statusName || "").toLowerCase()) {
+                case "вышла":
+                    statusClass = "text-success fw-bold";
+                    break;
+                case "не вышла":
+                    statusClass = "text-danger fw-bold";
+                    break;
+                case "не переведена":
+                    statusClass = "text-warning fw-bold";
+                    break;
+                case "прочитана":
+                    statusClass = "text-primary fw-bold";
+                    break;
+                default:
+                    statusClass = "text-muted fw-bold";
+                    break;
+            }
             const div = document.createElement("div");
             div.className = "card mb-3";
             div.innerHTML = `
-                <a href = "manga.html">
-                <img src="${book.cover || "img/заглушка.jpg"}" class="card-img-top" alt="Обложка книги" style="max-height:300px; object-fit:cover; background:#37c6c6;">
+                <a href="manga.html">
+                    <img src="${book.cover || "img/заглушка.jpg"}" class="card-img-top shadow mt-2" alt="Обложка книги" style="max-height:300px; object-fit:contain; ">
                 </a>
-                <div class="card-body ">
+                <div class="card-body">
                     <h5 class="card-title">${book.title}</h5>
                     <p class="card-text">${book.description}</p>
                     <p class="card-text"><small class="text-muted">Автор: ${book.authorName || "Неизвестен"}</small></p>
-                    <p class="card-text"><small class="text-muted">Статус: ${book.statusName || "Неизвестен"}</small></p>
+                    <p class="card-text"><small class="${statusClass}">Статус: ${book.statusName || "Неизвестен"}</small></p>
                     <button data-id="${book.id}" class="btn btn-danger btn-sm delete-btn">Удалить</button>
                     <a href="add_book.html?id=${book.id}" class="btn btn-warning btn-sm edit-btn">Редактировать</a>
                 </div>`;