d-okhrimenko · welkmoon · Sep 27, 2024 · Sep 27, 2024 · Oct 1, 2024 · Oct 2, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/ClassWork/Lesson 3/task3.html b/ClassWork/Lesson 3/task3.html
@@ -23,7 +23,7 @@
     <script>
         document.querySelector("#btnToC").onclick = function() {
             let tempF = Number(document.querySelector("#temp").value); 
-            let tempC = 5/9 * (tempF - 32);
+            let tempC = 5 / 9 * (tempF - 32);
             showResult(tempC);
         }
 

diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/index.html b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="uk">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>library</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <script id="template" type="text/template">
+        <section class="book">
+            <button onclick="edit({{id}})">Редагувати</button>
+            <button onclick="remove({{id}})">Видалити</button>
+            <h3>{{title}}</h3>
+            <p><strong>Author:</strong> {{author}}</p>
+            <p><strong>Year of publication:</strong> {{year}}</p>
+            <p><strong>Genre:</strong> {{genre}}</p>
+        </section>
+    </script>
+
+    <form id="booksForm">
+        <div><label for="">Назва</label><input type="text" id="titleInput" name="title" required></div>
+        <div><label for="">Автор</label><input type="text" id="authorInput" name="author"
+                pattern="^[A-Za-zА-Яа-яЁёЇїІіЄєҐґ',.\-\s]+$" minlength="2" required></div>
+        <div><label for="">Рік видання</label><input type="text" id="yearInput" name="year" pattern="[0-9]{4}"
+                maxlength="4" required>
+        </div>
+        <div><label for="">Жанр твору</label><input type="text" id="genreInput" name="genre"
+                pattern="^[А-Яа-яЁёЇїІіЄєҐґ']+$" required>
+        </div>
+        <button class="button" type="submit">Зберегти</button>
+    </form>
+
+    <section id="books" class="books"></section>
+
+    <script src="../../../../node_modules/mustache/mustache.min.js"></script>
+    <script src="js/model.js"></script>
+    <script src="js/view.js"></script>
+    <script src="js/validation.js"></script>
+    <script src="js/controller.js"></script>
+</body>
+
+</html>
+
+
+
+
+<!-- 
+Додайте валідацію до форми з попереднього уроку яка додає та редагує книги.
+
+Виконайте наступні перевірки
+
+1. Поле "Назва книги" (title)
+Перевірка на порожнє значення: назва книги не повинна бути порожньою.
+Перевірка на дублікати: перевірити, чи вже є така книга в масиві books.
+
+2. Поле "Автор" (author)
+Перевірка на порожнє значення: ім'я автора не повинно бути порожнім.
+
+3. Поле "Рік видання" (year)
+Перевірка на порожнє значення: рік повинен бути вказаний.
+Перевірка на тип даних: це має бути число.
+Перевірка на діапазон значень: рік не може бути меншим за 1450 (перші друковані книги) і більшим за поточний рік.
+
+4. Поле "Жанр" (genre)
+Перевірка на порожнє значення: жанр не повинен бути порожнім. -->
diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/controller.js b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/controller.js
@@ -0,0 +1,63 @@
+let element = document.querySelector("#books");
+const html = document.querySelector("#books");
+const template = document.querySelector("#template").innerHTML;
+
+const booksForm = document.querySelector("#booksForm");
+
+const titleInput = document.querySelector("#titleInput");
+const authorInput = document.querySelector("#authorInput");
+const yearInput = document.querySelector("#yearInput");
+const genreInput = document.querySelector("#genreInput");
+
+let editId = false;
+let elementId;
+
+function render() {
+    bookList.renderWithTemplate(booksList.books, html, template);
+}
+
+booksForm.addEventListener("submit", function (e) {
+  e.preventDefault();
+
+  let book = {
+    title: titleInput.value,
+    author: authorInput.value,
+    year: yearInput.value,
+    genre: genreInput.value,
+  };
+
+  if (editId) {
+    booksList.update(elementId, book);
+    editId = false;
+  } else {
+    booksList.add(book);
+  }
+
+  render();
+
+  titleInput.value = "";
+  authorInput.value = "";
+  yearInput.value = "";
+  genreInput.value = "";
+});
+
+function remove(id) {
+  booksList.remove(id);
+  render();
+}
+
+function edit(id) {
+  const book = booksList.find(id);
+
+  editId = true;
+  elementId = book.id;
+
+  titleInput.value = book.title;
+  authorInput.value = book.author;
+  yearInput.value = book.year;
+  genreInput.value = book.genre;
+
+  render();
+}
+
+render();
diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/model.js b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/model.js
@@ -0,0 +1,60 @@
+
+const booksList = {
+  books: [
+    {
+      id: 1,
+      title: "1984",
+      author: "Джордж Орвелл",
+      year: 1949,
+      genre: "Антиутопія",
+    },
+    {
+      id: 2,
+      title: "Гаррі Поттер і філософський камінь",
+      author: "Дж. К. Роулінг",
+      year: 1997,
+      genre: "Фентезі",
+    },
+    {
+      id: 3,
+      title: "Гра престолів",
+      author: "Джордж Р. Р. Мартін",
+      year: 1996,
+      genre: "Фентезі",
+    },
+    {
+      id: 4,
+      title: "Старий і море",
+      author: "Ернест Хемінгуей",
+      year: 1952,
+      genre: "Пригодницький роман",
+    },
+    {
+      id: 5,
+      title: "Майстер і Маргарита",
+      author: "Михайло Булгаков",
+      year: 1967,
+      genre: "Фантастика",
+    },
+  ],
+
+  lastId: 5,
+
+  add(book) {
+    this.lastId++;
+    book.id = this.lastId;
+    this.books.push(book);
+  },
+  remove(id) {
+    let index = this.books.findIndex((x) => x.id == id);
+    this.books.splice(index, 1);
+  },
+  update(id, book) {
+    let index = this.books.findIndex((x) => x.id == id);
+    this.books[index] = book;
+  },
+  find(id) {
+    let index = this.books.findIndex((x) => x.id == id);
+    return this.books[index];
+  },
+};
diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/validation.js b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/validation.js
@@ -0,0 +1,26 @@
+const form = document.forms[0];
+
+form.title.addEventListener("change", function (event) {
+  let titleCoincidence = booksList.books.some((book) => book.title == form.title.value);
+  if (titleCoincidence) {
+    form.title.setCustomValidity("Книга з такою назвою вже є у списку");
+    event.preventDefault();
+  } else {
+    form.title.setCustomValidity("");
+  }
+});
+
+const minYear = 1450;
+let currentYear = new Date().getFullYear();
+
+form.year.addEventListener("change", function (event) {
+  if (form.year.value < minYear) {
+    form.year.setCustomValidity("Рік видання не може бути меншим за 1450 рік");
+    event.preventDefault();
+  } else if (form.year.value > currentYear) {
+    form.year.setCustomValidity("Рік видання не може бути більшим за поточний рік");
+    event.preventDefault();
+  } else {
+    form.year.setCustomValidity("");
+  }
+});
diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/view.js b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/js/view.js
@@ -0,0 +1,9 @@
+const bookList = {
+    renderWithTemplate(books, element, template){
+        let html = "";
+        books.forEach(book => {
+            html += Mustache.render(template, book);
+        });
+        element.innerHTML = html;
+    }
+}
diff --git a/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/style.css b/HomeWork/HomeWorkAnswers/Lesson-10/HW-Library/style.css
@@ -0,0 +1,41 @@
+.book {
+    background-color: #d6e6f5;
+    padding: 10px;
+    margin: 20px 10px;
+    border-radius: 20px;
+  }
+
+  .button {
+    width: 100px;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 10px;
+    margin-right: 10px;
+    background-color: #a4cab1;
+  }
+
+  .button:active {
+    color: beige;
+    background-color: #577965;
+  }
+
+  #booksForm {
+    margin: 20px 10px;
+  }
+
+  #booksForm label {
+    display: inline-block;
+    width: 100px;
+  }
+
+  #booksForm div {
+    margin-bottom: 10px;
+  }
+
+  input:valid {
+    border: 1px solid green;
+  }
+
+  input:invalid {
+    border: 1px solid red;
+  }