Javascript-форум - Помогите допилить код

sergiy_1991,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
    <!-- <link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css"> -->
    <title>MyboolList App</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!--<link rel="stylesheet" href="main.css">-->
</head>
<body>
    <div class="container mt-4">
     <h1 class="disolay-4 text-center">To Do List</h1>
      <form id="book-form">
      	<div class="form-group">
      		<label for="task">Название задачи</label>
      		<input type="text" id="task" class="form-control">
      	</div>
      	<div class="form-group">
      		<label for="description">Описание задачи</label>
      		<input type="text" id="description" class="form-control">
      	</div>
      	<div class="form-group">
      		<label for="priority">Приоритет</label>
      		<!-- <input type="text" id="priority" class="form-control"> -->
      		<select type="text" id="priority" class="form-control">
      			<option>Высокий</option>
      			<option>Выше среднего</option>
      			<option>Средний</option>
      			<option>Низкий</option>
      		</select>
      	</div>
      	<input type="submit" value="Добавить задачу" class="bth bth-primary btn-block">
      </form>
      <table class="table table-striped">
      	<thead>
      	 <tr>
      	  <th>Название задачи</th>
      	  <th>Описание задачи</th>
      	  <th>Приоритет</th>
      	  <th></th>
      	 </tr>
      	</thead>
      	  <tbody id="book-list"></tbody>
       </table>
     </div>

    <script>// Class: представляющий задачу
class Book {
	constructor(task, description, priority) {
		this.task = task;
		this.description = description;
		this.priority = priority;
	}
}

// UI Class: Handle UI Tasks Обрабатывать задачи пользовательского интерфейса
class UI {
	static displayBooks() {
		const books = Store.getBooks();
        const list = document.querySelector('#book-list');
        list.innerHTML = '';
		books.forEach((book, i) => UI.addBookToList(book, i));
	}

	static addBookToList(book, i) {
		const list = document.querySelector('#book-list');
		const row = document.createElement('tr');

		row.innerHTML = `
			<td>${book.task}</td>
			<td>${book.description}</td>
			<td>${book.priority}</td>
			<td><a href="#" class="btn btn-danger btn-sm edit" data-index="${i}">--</a></td>
			<td><a href="#" class="btn btn-danger btn-sm delete" data-index="${i}">X</a></td>
			`;

			list.appendChild(row);
	}

	static deleteBook(el) {
		if(el.classList.contains('delete'))	{
            const index = el.dataset.index;
            Store.removeBook(index);
		}
	}
    static editBook(el) {
		if(el.classList.contains('edit'))	{
            const index = el.dataset.index;
            const books = Store.getBooks();
            const book = books[index];
            ['task', 'description', 'priority'].forEach(id => document.querySelector(`#${id}`).value = book[id]);
            const btn = document.querySelector('#book-form [type="submit"]');
            btn.value = 'Изменить данные?';
            btn.dataset.index = index;
		}
	}


	static showAlert(message, className) {
		const div = document.createElement('div');
		div.className = `alert alert-${className}`;
		div.appendChild(document.createTextNode(message));
		const container = document.querySelector('.container');
		const form = document.querySelector('#book-form');
		container.insertBefore(div, form);

	// Vanish in 2 seconds
	setTimeout(() => document.querySelector('.alert').remove(), 2000);
}

	static clearFields(){
		document.querySelector('#task').value = '';
		document.querySelector('#description').value = '';
		document.querySelector('#priority').value = '';
        const btn = document.querySelector('#book-form [type="submit"]');
        btn.removeAttribute('data-index');
        btn.value = 'Добавить задачу';
	}
}

// Store Class: Handle Storage Класс магазина: Ручка для хранения
class Store {
	static getBooks() {
		let books;
		if(localStorage.getItem('books') === null) {
			books = [];
		} else {
			books = JSON.parse(localStorage.getItem('books'));
		}

		return books;
	}

	static addBook(book) {
		const books = Store.getBooks();
		books.push(book);
		localStorage.setItem('books', JSON.stringify(books));
        UI.displayBooks();
	}

	static removeBook(index) {
		const books = Store.getBooks();
        books.splice(index, 1);
		localStorage.setItem('books', JSON.stringify(books));
        UI.displayBooks();
	}
}

// Event: Display Books Событие: показ книг
document.addEventListener('DOMContentLoaded', UI.displayBooks);

// Event: Add a Book Событие: добавить книгу
document.querySelector('#book-form').addEventListener('submit', (e) => {
	// Prevent actual submit
	e.preventDefault();

//Get from value Получить из стоимости
const task = document.querySelector('#task').value;
const description = document.querySelector('#description').value;
const priority = document.querySelector('#priority').value;

const btn = document.querySelector('#book-form [type="submit"]');
const index = btn.dataset.index; console.log(index)
// Validate утверждать
if(task === '' || description === '' || priority === '') {
	UI.showAlert('Please fill in all fields', 'danger');
}
else if(index !== void 0){
    const book = new Book(task, description, priority);
    const books = Store.getBooks();
    books[index] = book;
    localStorage.setItem('books', JSON.stringify(books));
    UI.displayBooks();
    UI.showAlert(`Book ${index} edit `, 'success');
    UI.clearFields();
}

else {
	// Instatiate book Книга с описанием
    const book = new Book(task, description, priority);

	// Add Book to UI Добавить книгу в пользовательский интерфейс
	UI.addBookToList(book);

	// Add book to store Добавить книгу в магазин
	Store.addBook(book);

	//Show success message Показать сообщение об успехе
	UI.showAlert('Book Added', 'success');

	// Clear fields Очистить поля
	UI.clearFields();
}
});

// // Event: Remove a Book Событие: удалить книгу
// document.querySelector('#book-edit').addEventListener('click', (e) => {
// 	preventDefault();
//  });

// Event: Remove a Book Событие: удалить книгу
document.querySelector('#book-list').addEventListener('click', (e) => {
	UI.deleteBook(e.target);
    UI.editBook(e.target);
 });</script>
</body>
</html>