-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (122 loc) · 4.25 KB
/
index.html
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 http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Bookshelf App - A simple application to manage your book collection."
/>
<meta name="keywords" content="books, bookshelf, app, manage, collection" />
<meta name="author" content="Sanudin" />
<meta property="og:title" content="Bookshelf App" />
<meta
property="og:description"
content="A simple application to manage your book collection."
/>
<meta property="og:image" content="images/social-preview.png" />
<meta
property="og:url"
content="https://ssanudin.github.io/bookshelf-app-v1/"
/>
<!-- Note: Twitter has rebranded to X, but the twitter: meta tags are still in use -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Bookshelf App" />
<meta
name="twitter:description"
content="A simple application to manage your book collection."
/>
<meta name="twitter:image" content="images/social-preview.png" />
<title>Bookshelf App</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
<script defer src="main.js"></script>
</head>
<body>
<header>
<h1>Bookshelf App</h1>
</header>
<main>
<section id="add" class="container card">
<h2 class="text-center">Tambah Buku Baru</h2>
<form id="bookForm" data-testid="bookForm">
<div class="form-group">
<label for="bookFormTitle">Judul</label>
<input
id="bookFormTitle"
type="text"
required
data-testid="bookFormTitleInput"
/>
</div>
<div class="form-group">
<label for="bookFormAuthor">Penulis</label>
<input
id="bookFormAuthor"
type="text"
required
data-testid="bookFormAuthorInput"
/>
</div>
<div class="form-group">
<label for="bookFormYear">Tahun</label>
<input
id="bookFormYear"
type="number"
required
data-testid="bookFormYearInput"
/>
</div>
<div class="">
<label for="bookFormIsComplete">Selesai dibaca</label>
<input
id="bookFormIsComplete"
type="checkbox"
data-testid="bookFormIsCompleteCheckbox"
/>
</div>
<input type="hidden" id="bookFormEditId" />
<button
id="bookFormSubmit"
type="submit"
data-testid="bookFormSubmitButton"
>
Masukkan Buku ke rak <span>Belum selesai dibaca</span>
</button>
</form>
</section>
<section id="search" class="container card">
<h2 class="text-center">Cari Buku</h2>
<form id="searchBook" data-testid="searchBookForm" class="center">
<label for="searchBookTitle">Judul</label>
<input
id="searchBookTitle"
type="text"
data-testid="searchBookFormTitleInput"
/>
<button
id="searchSubmit"
type="submit"
data-testid="searchBookFormSubmitButton"
>
Cari
</button>
</form>
</section>
<section id="incompleted" class="container card">
<h2>Belum selesai dibaca</h2>
<div id="incompleteBookList" data-testid="incompleteBookList"></div>
</section>
<section id="completed" class="container card">
<h2>Selesai dibaca</h2>
<div id="completeBookList" data-testid="completeBookList"></div>
</section>
</main>
</body>
</html>