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>
