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>JS Book List App</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main class="container">
        <header class="book-list_title mt-3">
            <h1>
                <a href="./" class="text-dark">
                    <i class="fa-solid fa-book-open"></i>My<span>Book</span>List
                </a>
            </h1>
        </header>
        <section class="book-lists_form">
            <form id="books-form" class="form-control w-75 mx-auto">
                <div class="mb-3">
                    <label for="title">Title</label>
                    <input type="text" id="title" class="form-control">
                </div>
                <div class="mb-3">
                    <label for="author">Author</label>
                    <input type="text" id="author" class="form-control">
                </div>
                <div class="mb-3">
                    <label for="isbn">ISBN</label>
                    <input type="text" id="isbn" class="form-control">
                </div>
                <div class="d-grid submit">
                    <input type="submit" id="submit" class="btn btn-lg text-light">
                    <button class="btn btn-lg text-light cancel mt-3 d-none">Cancel</button>
                </div>
            </form>
        </section>
        <section id="books" class="mt-4">
            <table class="table-books">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Author</th>
                        <th>ISBN</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="book-list"></tbody>
            </table>
        </section>
    </main>

    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">&copy;Booklist 2022.</span>
        </div>
    </footer>

    <script src="./main.js"></script>
</body>

</html>