d-okhrimenko · olvak · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/HomeWorkAnswers/Homework Lesson 10/index.html b/HomeWorkAnswers/Homework Lesson 10/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Book List</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <script id="template" type="text/template">
+      <section class="book">
+        <h2>Title: {{title}}</h2>
+        <h3>Author: {{author}}</h3>
+        <p>Year: {{year}}</p>
+        <p>Genre: {{genre}}</p>
+        <button onclick="edit({{id}})">Edit</button>
+        <button onclick="remove({{id}})">Delete</button>
+      </section>
+    </script>
+    <form id="bookForm">
+      <div><label for="">Title</label><input type="text" id="titleInput" name="titleInput" required /></div>
+      <div><label for="">Author</label><input type="text" id="authorInput" name="authorInput" required /></div>
+      <div><label for="">Year</label><input type="number" id="yearInput" name="yearInput" min="1450" max="" required/></div>
+      <div><label for="">Genre</label><input type="text" id="genreInput" name="genreInput" required /></div>
+      <button type="submit">Save</button>
+    </form>
+    <section id="books-list"></section>
+    <script src="/ClassWork/node_modules/mustache/mustache.min.js"></script>
+    <script src="js/model.js"></script>
+    <script src="js/view.js"></script>
+    <script src="js/controller.js"></script>
+  </body>
+</html>
diff --git a/HomeWorkAnswers/Homework Lesson 10/js/controller.js b/HomeWorkAnswers/Homework Lesson 10/js/controller.js
@@ -0,0 +1,68 @@
+const currentYear = new Date().getFullYear();
+document.getElementById("yearInput").setAttribute("max", currentYear);
+
+let html = document.querySelector("#books-list");
+let template = document.querySelector("#template").innerHTML;
+bookList.renderWithTemplate(bookInfo.books, html, template);
+
+const titleInput = document.querySelector("#titleInput");
+const authorInput = document.querySelector("#authorInput");
+const yearInput = document.querySelector("#yearInput");
+const genreInput = document.querySelector("#genreInput");
+
+let editId = null;
+
+function render() {
+  bookList.renderWithTemplate(bookInfo.books, html, template);
+}
+
+titleInput.addEventListener("input", function () {
+  const title = titleInput.value.trim();
+
+  if (bookInfo.books.some(book => book.title.toLowerCase() === title.toLowerCase() && book.id !== editId)) {
+    titleInput.setCustomValidity("Duplicate!");
+    titleInput.reportValidity();
+  } else {
+    titleInput.setCustomValidity("");
+  }
+});
+
+bookForm.addEventListener("submit", function (e) {
+  e.preventDefault();
+
+  let book = {
+    title: titleInput.value,
+    author: authorInput.value,
+    year: yearInput.value,
+    genre: genreInput.value,
+  };
+
+  if (editId == null) {
+    bookInfo.add(book);
+  } else {
+    bookInfo.update(editId, book);
+    editId = null;
+  }
+
+  render();
+});
+
+function remove(id) {
+  bookInfo.remove(id);
+  render();
+}
+
+function edit(id) {
+  const book = bookInfo.find(id);
+
+  editId = book.id;
+
+  titleInput.value = book.title;
+  authorInput.value = book.author;
+  yearInput.value = book.year;
+  genreInput.value = book.genre;
+
+  render();
+}
+
+render();
diff --git a/HomeWorkAnswers/Homework Lesson 10/js/model.js b/HomeWorkAnswers/Homework Lesson 10/js/model.js
@@ -0,0 +1,62 @@
+const bookInfo = {
+  books: [
+    {
+      id: 1,
+      title: "The Mysterious Island",
+      author: "Jules Verne",
+      year: "1875",
+      genre: "Adventure Novel",
+    },
+    {
+      id: 2,
+      title: "Forrest Gump",
+      author: "Winston Groom",
+      year: "1986",
+      genre: "Novel",
+    },
+    {
+      id: 3,
+      title: "White Fang",
+      author: "Jack London",
+      year: "1906",
+      genre: "Adventure",
+    },
+    {
+      id: 4,
+      title: "The Witcher",
+      author: "Andrzej Sapkowski",
+      year: "1986",
+      genre: "Fantasy",
+    },
+    {
+      id: 5,
+      title: "Ivanhoe",
+      author: "Walter Scott",
+      year: "1819",
+      genre: "Chivalric Romance",
+    },
+  ],
+
+  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/HomeWorkAnswers/Homework Lesson 10/js/view.js b/HomeWorkAnswers/Homework Lesson 10/js/view.js
@@ -0,0 +1,21 @@
+const bookList = {
+  render(books, element) {
+    books.forEach((book) => {
+      let section = document.createElement("section");
+      section.classList.add("book");
+      section.insertAdjacentHTML("beforeend", `<h2>Title: ${book.title}</h2>`);
+      section.insertAdjacentHTML("beforeend", `<h3>Author: ${book.author}</h3>`);
+      section.insertAdjacentHTML("beforeend", `<p>Year: ${book.year}</p>`);
+      section.insertAdjacentHTML("beforeend", `<p>Genre: ${book.genre}</p>`);
+      element.appendChild(section);
+    });
+  },
+
+  renderWithTemplate(books, element, template) {
+    let html = "";
+    books.forEach((book) => {
+      html += Mustache.render(template, book);
+    });
+    element.innerHTML = html;
+  },
+};
diff --git a/HomeWorkAnswers/Homework Lesson 10/styles.css b/HomeWorkAnswers/Homework Lesson 10/styles.css
@@ -0,0 +1,105 @@
+body {
+  background-color: lightgray;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+#books-list,
+#bookForm {
+  width: 80%;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: lightgoldenrodyellow;
+  border: 1px solid gray;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+#bookForm div {
+  margin-bottom: 15px;
+}
+
+#bookForm label {
+  font-size: 1.2em;
+  color: gray;
+  margin-right: 10px;
+}
+
+#bookForm input {
+  padding: 10px;
+  font-size: 1em;
+  border: 1px solid gray;
+  border-radius: 4px;
+  width: calc(100% - 40px);
+}
+
+#bookForm button {
+  padding: 10px 20px;
+  font-size: 1em;
+  background-color: gray;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#bookForm button:hover {
+  background-color: yellow;
+  color: gray;
+}
+
+.book {
+  background-color: lightgoldenrodyellow;
+  border: 1px solid gray;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.book h2 {
+  font-size: 1.5em;
+  margin: 0;
+  color: gray;
+}
+
+.book h3 {
+  font-size: 1.2em;
+  margin: 5px 0;
+  color: gray;
+}
+
+.book p {
+  font-size: 1em;
+  margin: 2px 0;
+  color: gray;
+}
+
+.book button {
+  padding: 10px 20px;
+  font-size: 1em;
+  background-color: gray;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.book button:hover {
+  background-color: yellow;
+  color: gray;
+}
+
+.book:hover {
+  background-color: whitesmoke;
+  border-color: yellow;
+}