Блог

Главная - Вопросы по программированию - Как я могу создать список книг, используя классы и объекты ES6

Как я могу создать список книг, используя классы и объекты ES6

#javascript #ecmascript-6

Вопрос:

Задачи :

  1. HTML — Создайте структуру страницы (Подсказка: список книг может быть таблицей, а любая новая добавленная книга на стороне JS может быть элементом).
  2. CSS — стиль элементов, чтобы они выглядели как в прикрепленном gif
  3. JS :
  • Создайте 2 класса с соответствующими конструкторами(классная книга и пользовательский интерфейс класса)
  • Класс книги( используется для создания объектов книги)
  • Класс пользовательского интерфейса( методы только здесь: для добавления книги в список, удаления книги, проверки полей ввода с подтверждением)

Примечание: При необходимости используйте функции со стрелками как можно чаще.

Gif :

https://imgur.com/a/oyQdzKt

мой код :

index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book List</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-3">
                    <h4>Add Book</h4>
                    <form id="form" action="#">
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" name="title" id="title" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="author">Author</label>
                            <input type="text" name="author" id="author" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="isbn">ISBN#</label>
                            <input type="text" name="isbn" id="isbn" class="form-control">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </form>
                    <table id="table" class="table">
                        <thead id="thead">
                            <tr>
                                <th scope="col">Title</th>
                                <th scope="col">Author</th>
                                <th scope="col">ISBN#</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>    
<script src="app.js"></script>
</body>
</html>

app.js

 // get html elements
const formElem = document.getElementById('form');
const titleElem = document.getElementById('title');
const authorElem = document.getElementById('author');
const isbnElem = document.getElementById('isbn');

// console.log(formElem, titleElem, authorElem, isbnElem);

class Book {

}

class UI {
    constructor(){

    }

    addBookToList(){

    }

    deleteBook(){

    }
}

formElem.addEventListener('submit', (e) => {
    e.preventDefault();

    let ui = new UI();
});

Часть es6, мне не удалось ее выучить, и я понятия не имею, как мне следует действовать, любое предложение приветствуется, спасибо..

Комментарии:

1. Что вы пробовали ? Я не пытаюсь быть неуважительным, но мы не делаем домашнюю работу. По крайней мере, попытайтесь это сделать или покажите, что вы сделали

2. Вот рабочая версия codepen.io/riza-khan/pen/oNwxyNM?editors=1011 Единственная проблема в том, что он не совсем соответствует вашим указаниям. Это жесткие правила или хорошо для имущих?

3. После небольшого размышления использование классов для пользовательского интерфейса немного излишне. Хранение всех данных в массиве в Javascript намного чище…

4. Большое вам спасибо, я возьмусь читать код, я точно не понял, поэтому даже не пытался ..

Метки: ,