Skip to content

Instantly share code, notes, and snippets.

@kunxin-chor

kunxin-chor/index.html

Created June 20, 2023 09:34
Show Gist options
  • Save kunxin-chor/e2d70a4a867c3efb93f768760137fd3f to your computer and use it in GitHub Desktop.
Save kunxin-chor/e2d70a4a867c3efb93f768760137fd3f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Book List</title>
<!-- include Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- A sample application that demonstrates the major features of ES6, ES7, ES8, ES9, and ES10
in an interactive book CRUD application -->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="title-input" class="form-label">Title:</label>
<input type="text" id="title-input" class="form-control">
</div>
<div class="mb-3">
<label for="author-input" class="form-label">Author:</label>
<input type="text" id="author-input" class="form-control">
</div>
<div class="mb-3">
<label for="year-input" class="form-label">Year:</label>
<input type="text" id="year-input" class="form-control">
</div>
<button id="add-button" class="btn btn-primary">Add Book</button>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="title-filter" class="form-label">Filter by Title:</label>
<input type="text" id="title-filter" class="form-control">
</div>
<div class="mb-3">
<label for="author-filter" class="form-label">Filter by Author:</label>
<input type="text" id="author-filter" class="form-control">
</div>
<div class="mb-3">
<label for="sort-select" class="form-label">Sort by:</label>
<select id="sort-select" class="form-select">
<option value="title-asc">Title (A-Z)</option>
<option value="title-desc">Title (Z-A)</option>
<option value="author-asc">Author (A-Z)</option>
<option value="author-desc">Author (Z-A)</option>
</select>
</div>
<button id="filter-button" class="btn btn-primary">Filter Books</button>
</div>
</div>
<ul class="list-group book-list"></ul>
</div>
<!-- include axios as a module-->
<script type="module" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- we want to use modules instead of regular includes -->
<script type="module" src="script.mjs"></script>
<!-- include Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment