Lesson 11

HomeWork/Lesson 4.txt

@@ -34,7 +34,10 @@
 Гра: "Математичний квіз"
 
 Опис гри:
-Програма генерує випадкові математичні вирази (додавання, віднімання, множення, ділення) та запитує у користувача правильну відповідь. Користувач має обмежену кількість спроб, щоб дати правильну відповідь. Програма виводить кількість правильних та неправильних відповідей після завершення гри.
+Програма генерує випадкові математичні вирази (додавання, віднімання, множення, ділення) 
+та запитує у користувача правильну відповідь. Користувач має обмежену кількість спроб, 
+щоб дати правильну відповідь. Програма виводить кількість правильних та неправильних відповідей 
+після завершення гри.
 
 Кроки для виконання завдання:
 

HomeWork/Lesson 5.txt

@@ -27,7 +27,8 @@ https://moz.gov.ua/uk/jak-viznachti-optimalnu-vagu-formula-indeksu-masi-tila#:~:
 
 Завдання 2
 
-Написати програму, яка обчислює площу та периметр різних геометричних фігур (коло, прямокутник, трикутник). Кожна геометрична фігура повинна мати свою окрему функцію для обчислення площі та периметру.
+Написати програму, яка обчислює площу та периметр різних геометричних фігур (коло, прямокутник, трикутник). 
+Кожна геометрична фігура повинна мати свою окрему функцію для обчислення площі та периметру.
 
 Кроки для виконання завдання:
 1. Створити функцію для обчислення площі та периметру кола:

HomeWork/Lesson 7.txt

@@ -1,22 +1,21 @@
-Завдання: Написати програму для управління інформацією про студентів у групі. Програма повинна дозволяти додавати нових студентів, видаляти студентів і виводити інформацію про всіх студентів.
+Завдання: Написати програму для управління інформацією про студентів у групі. 
+Програма повинна дозволяти додавати нових студентів, видаляти студентів і виводити інформацію про всіх студентів.
 
 Кроки для виконання завдання:
-
 Створити конструктор або фабричну функцію для створення об'єктів студентів:
-
 Кожен об'єкт студента повинен містити наступні властивості: ім'я, прізвище, вік, ідентифікаційний номер, середній бал.
-Створити об'єкт для управління групою студентів:
 
+Створити об'єкт для управління групою студентів:
 Цей об'єкт повинен містити масив студентів та методи для додавання, видалення і виведення інформації про студентів.
-Додати метод для додавання нового студента:
 
+Додати метод для додавання нового студента:
 Метод повинен приймати параметри для створення нового об'єкта студента і додавати його до масиву.
-Додати метод для видалення студента:
 
+Додати метод для видалення студента:
 Метод повинен видаляти студента за його ідентифікаційним номером.
-Додати метод для виведення списку всіх студентів:
 
+Додати метод для виведення списку всіх студентів:
 Метод повинен виводити на екран список студентів із зазначенням всіх їхніх властивостей.
-Додати функціонал для пошуку студента за його ідентифікаційним номером:
 
+Додати функціонал для пошуку студента за його ідентифікаційним номером:
 Метод повинен шукати студента в масиві і повертати всю інформацію про нього.

HomeWork/Lesson 8.txt

@@ -1,13 +1,16 @@
-Завдання: Написати програму, яка виводить список книг у бібліотеці на веб-сторінку. Програма повинна брати інформацію з масиву об’єктів, де кожен об’єкт представляє книгу, і динамічно додавати її в HTML.
+Завдання: Написати програму, яка виводить список книг у бібліотеці на веб-сторінку. 
+Програма повинна брати інформацію з масиву об’єктів, де кожен об’єкт представляє книгу, і динамічно додавати її в HTML.
 
 Кроки для виконання завдання:
 
 	1.	Створити масив об’єктів, де кожен об’єкт представляє книгу:
-	•	Кожен об’єкт повинен містити наступні властивості: назва книги, автор, рік видання, жанр. (Приклад масиву наведено нижче)
+	•	Кожен об’єкт повинен містити наступні властивості: назва книги, автор, рік видання, жанр. 
+	    (Приклад масиву наведено нижче)
 	2.	Створити HTML-структуру для виведення списку книг:
 	•	Додати контейнер (наприклад, <div id="bookList"></div>), в який буде додаватися інформація про книги.
 	3.	Написати функцію для динамічного виведення книг:
-	•	Функція повинна перебирати масив книг і для кожної книги створювати HTML-елемент (наприклад, <div>, <p>) із відповідною інформацією.
+	•	Функція повинна перебирати масив книг і для кожної книги створювати HTML-елемент 
+	    (наприклад, <div>, <p>) із відповідною інформацією.
 	•	Виведені дані повинні включати назву книги, автора, рік видання та жанр.
 	4.	Додати функціонал для відображення списку книг на сторінці:
 	•	Використовувати document.querySelector для вибору контейнера на сторінці.

HomeWork/Lesson 9.txt

@@ -2,7 +2,8 @@
 
 1. Створити функцію для додавання нової книги до масиву:
 
-Функція повинна приймати параметри для створення нового об'єкта книги (назва, автор, рік видання, жанр) і додавати його до масиву books.
+Функція повинна приймати параметри для створення нового об'єкта книги (назва, автор, рік видання, жанр) 
+і додавати його до масиву books.
 Після додавання нової книги, список книг на веб-сторінці повинен оновлюватися.
 
 2. Створити функцію для редагування інформації про книгу:

HomeWorkAnswers/Lesson 10/index.html

@@ -0,0 +1,51 @@
+<!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>
+    <button class="control-btn" onclick="showBtn()">Show book list</button>
+    <button class="control-btn" onclick="hideBtn()">Hide book list</button>
+
+    <form id="bookForm">
+      <div>
+        <label for="titleInput">Title</label
+        ><input type="text" id="titleInput" name="title" required />
+        <span class="error" id="titleError">This name already exists</span>
+      </div>
+      <div>
+        <label for="authorInput">Author</label
+        ><input type="text" id="authorInput" required />
+      </div>
+      <div>
+        <label for="yearInput">Year</label
+        ><input
+          type="number"
+          id="yearInput"
+          name="year"
+          aria-describedby="yearError"
+          required
+          min="1450"
+          max="2024"
+        />
+        <span class="error" id="yearError"
+          >The year must be from 1450 to 2024</span
+        >
+      </div>
+      <div>
+        <label for="genreInput">Genre</label
+        ><input type="text" id="genreInput" required />
+      </div>
+      <button type="submit">Save</button>
+    </form>
+
+    <section id="bookList" class="hide"></section>
+
+    <script src="js/model.js"></script>
+    <script src="js/view.js"></script>
+    <script src="js/controller.js"></script>
+  </body>
+</html>

HomeWorkAnswers/Lesson 10/js/controller.js

@@ -0,0 +1,127 @@
+const section = document.querySelector("#bookList");
+bookList.render(books, section);
+
+const showBtn = () => {
+  section.classList.replace("hide", "show");
+};
+
+const hideBtn = () => {
+  section.classList.replace("show", "hide");
+};
+
+const bookForm = document.querySelector("#bookForm");
+const titleInput = document.querySelector("#titleInput");
+const authorInput = document.querySelector("#authorInput");
+const yearInput = document.querySelector("#yearInput");
+const genreInput = document.querySelector("#genreInput");
+
+let editId = null;
+
+bookForm.addEventListener("submit", function (e) {
+  e.preventDefault();
+
+  const isTitleValid = validateTitle();
+  const isYearValid = validateYear();
+
+  if (!isTitleValid || !isYearValid) {
+    return;
+  }
+
+  let book = {
+    title: titleInput.value,
+    author: authorInput.value,
+    year: yearInput.value,
+    genre: genreInput.value,
+  };
+
+  if (editId == null) {
+    bookManager.add(book);
+  } else {
+    bookManager.update(editId, book);
+    editId = null;
+  }
+
+  alert("Form submitted");
+
+  bookList.render(bookManager.books);
+  bookForm.reset();
+});
+
+function remove(id) {
+  bookManager.remove(id);
+  bookList.render(bookManager.books);
+}
+
+function edit(id) {
+  const book = bookManager.find(id);
+
+  editId = id;
+
+  titleInput.value = book.title;
+  authorInput.value = book.author;
+  yearInput.value = book.year;
+  genreInput.value = book.genre;
+
+  bookList.render(bookManager.books);
+}
+
+bookList.render(bookManager.books);
+
+const titleError = document.querySelector("#titleError");
+
+titleError.addEventListener("input", function () {
+  validateTitle();
+});
+
+titleError.addEventListener("invalid", function (e) {
+  e.preventDefault();
+});
+
+function validateTitle() {
+  const titleValue = titleInput.value.trim();
+
+  titleError.style.display = "none";
+  titleInput.classList.remove("invalid");
+  titleInput.classList.remove("valid");
+
+  if (bookManager.checkTitle(titleValue)) {
+    titleInput.classList.add("invalid");
+    titleError.style.display = "inline";
+    return false;
+  } else {
+    titleInput.classList.add("valid");
+    return true;
+  }
+}
+
+const yearError = document.querySelector("#yearError");
+
+yearInput.addEventListener("input", function () {
+  validateYear();
+});
+
+yearInput.addEventListener("invalid", function (e) {
+  e.preventDefault();
+});
+
+function validateYear() {
+  const yearValue = yearInput.value;
+  const currentYear = new Date().getFullYear();
+  yearError.style.display = "none";
+  yearInput.classList.remove("invalid");
+  yearInput.classList.remove("valid");
+
+  if (yearValue >= 1450 && yearValue <= currentYear) {
+    yearInput.classList.add("valid");
+    return true;
+  } else if (yearValue === "") {
+    yearInput.classList.add("invalid");
+    yearError.style.display = "inline";
+    yearError.textContent = "The year field cannot be empty";
+    return false;
+  } else {
+    yearInput.classList.add("invalid");
+    yearError.style.display = "inline";
+    return false;
+  }
+}

HomeWorkAnswers/Lesson 10/js/model.js

@@ -0,0 +1,71 @@
+const 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: "Фантастика",
+  },
+];
+
+let lastId = 5;
+
+const bookManager = {
+  books: books,
+  lastId: lastId,
+
+  add(book) {
+    this.lastId++;
+    book.id = this.lastId;
+    this.books.push(book);
+  },
+
+  remove(id) {
+    let index = this.books.findIndex((book) => book.id === id);
+    this.books.splice(index, 1);
+  },
+
+  update(id, book) {
+    let index = this.books.findIndex((book) => book.id === id);
+    this.books[index] = { ...this.books[index], ...book };
+  },
+
+  find(id) {
+    let index = this.books.findIndex((book) => book.id === id);
+    return this.books[index];
+  },
+
+  checkTitle(title) {
+    return this.books.some(
+      (book) => book.title.toLowerCase() === title.toLowerCase()
+    );
+  },
+};

HomeWorkAnswers/Lesson 10/js/view.js

@@ -0,0 +1,18 @@
+const bookList = {
+  render(books) {
+    section.innerHTML = "";
+    books.forEach((book) => {
+      section.insertAdjacentHTML(
+        "beforeend",
+        `<div class="book">
+          <h2>Title: ${book.title}</h2>
+          <p>Author: ${book.author}</p>
+          <p>Year: ${book.year}</p>
+          <p>Genre: ${book.genre}</p>
+          <button onclick="edit(${book.id})">Edit</button>
+          <button onclick="remove(${book.id})">Delete</button>
+        </div>`
+      );
+    });
+  },
+};