index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Odin-Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>The Odin Library</h1>
    </header>
    <section class="library-section">
        <div class="add-book-div">
            <button class="add-book-btn">Add new Book</button>
        </div>
        <div class="myBooks"></div>
    </section>
    <footer>
        <p>copyright@<a href="https://github.com/codedstrings">codedstrings</a></p>
    </footer>
        <!-- Dialog Element for Modal -->
        <dialog id="bookDialog">
          <h2>Add a New Book</h2>
          <form id="newBookForm">
              <label for="title">Title:</label>
              <input type="text" id="title" name="title" required>
              <label for="author">Author:</label>
              <input type="text" id="author" name="author" required>
              <label for="pageNo">Pages:</label>
              <input type="number" id="pageNo" name="pageNo" required>
              <label for="isRead">Read:</label>
              <input type="checkbox" id="isRead" name="isRead">
              <button type="submit">Add Book</button>
          </form>
          <button id="closeDialog">Close</button>
      </dialog>
      <script type="module" src="script.js"></script>
</body>
</html>