-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (122 loc) · 5.09 KB
/
index.html
File metadata and controls
131 lines (122 loc) · 5.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project | Bookshelf Apps</title>
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<header>
<h1>Bookshelf Apps</h1>
<nav>
<ul>
<li>
<a href="#search-books">Search Books</a>
</li>
<li>
<a href="#crud-books">CRUD Books</a>
</li>
<li>
<a href="https://github.com/Alvinnn-R">About</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="input_section">
<div class="container" id="crud-books">
<h2>Masukan Buku Baru</h2>
<form id="form">
<input type="hidden" name="id" id="inputBookId">
<div class="form-group">
<label for="judul">Judul Buku</label>
<input type="text" id="inputBookTitle" required>
</div>
<div class="form-group">
<label for="penulis">Penulis</label>
<input type="text" id="inputBookAuthor" required>
</div>
<div class="form-group">
<label for="tahun">Tahun</label>
<input type="text" id="inputBookYear" required>
</div>
<p class="status">Status Buku</p>
<div class="form-group-inline">
<input type="radio" id="inputBookIsComplete" name="status" value="Sudah Selesai Dibaca">
<label for="sudah-selesai">Sudah Selesai Dibaca</label><br>
<!-- <input type="radio" id="crud" name="status" value="Belum Selesai Dibaca">
<label for="belum-selesai">Belum Selesai Dibaca</label><br> -->
</div>
<button class="add" id="bookSubmit" type="submit" value="Create" onclick="save()">Masukan Buku
Ke Rak</button>
</form>
</div>
</section>
<section class="search_section" id="search-books">
<h2 class="title-section text-center">Cari Buku</h2>
<form action="" id="search-form">
<input type="text" name="input-search" id="input-search" class="input-search"
placeholder="input judul buku">
<button type="submit" id="searchSubmit">Cari</button>
</form>
</section>
<section class="summary-books-count">
<h3 class="title-section text-center">Jumlah Buku</h3>
<div class="book-counts">
<span id="uncompleted-count"></span>Belum Selesai Baca
<span id="completed-count"></span>Selesai Baca
</div>
</section>
<section class="book_self">
<h3 class="title-section text-center">Belum Selesai Dibaca</h3>
<div class="book_list" id="uncompleted-books">
<table id="datatable" class="fl-table">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Penulis</th>
<th>Tahun</th>
<th>Selesai Baca</th>
<th>Edit</th>
<th>Hapus</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
<div class="search-results" id="uncompleted-search-results"></div>
</section>
<section class="book_self">
<h3 class="title-section text-center">Sudah Selesai Dibaca</h3>
<div class="book_list" id="completed-books">
<table id="datatable" class="fl-table">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Penulis</th>
<th>Tahun</th>
<th>Belum Baca</th>
<th>Edit</th>
<th>Hapus</th>
</tr>
</thead>
<tbody id="table2">
</tbody>
</table>
</div>
<div class="search-results" id="completed-search-results"></div>
</section>
</main>
<footer>
<p>Copyright © 2024, By <a href="https://github.com/Alvinnn-R">Alvin Rama Saputra</a></p>
</footer>
<script src="script.js"></script>
</body>
</html>