-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (135 loc) · 4.81 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
132
133
134
135
136
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Bookshelf App</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="src/style/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<header class="head_bar">
<h1 class="head_bar__title">Bookshelf App</h1>
</header>
<main>
<div class="container">
<div class="card">
<div class="photo">
<img src="assets/img/vector.webp" alt="" />
</div>
<div class="input_section">
<div class="image">
<img src="assets/img/vector.webp" alt="" />
</div>
<h2>Input Buku Baru</h2>
<form id="inputBook">
<div class="input">
<label for="inputBookTitle">Judul</label>
<input
id="inputBookTitle"
type="text"
placeholder="ex : Laskar Pelangi"
required
/>
</div>
<div class="input">
<label for="inputBookAuthor">Penulis</label>
<input
id="inputBookAuthor"
type="text"
required
placeholder="ex : Andrea Hirata"
/>
</div>
<div class="input">
<label for="inputBookYear">Tahun</label>
<input
id="inputBookYear"
type="number"
required
placeholder="ex : 2005"
/>
</div>
<div class="input">
<label for="inputBookCategory">Kategori</label>
<select
name="bookCategory"
id="inputBookCategory"
class="bookCategory"
required
>
<option value="" selected>Pilih kategori buku...</option>
<option value="Pendidikan">Pendidikan</option>
<option value="Politik">Politik</option>
<option value="Petualangan">Petualangan</option>
<option value="Komedia">Komedi</option>
<option value="Anak-anak">Anak-anak</option>
<option value="Dewasa">Dewasa</option>
<option value="Horor">Horor</option>
<option value="Misteri">Misteri</option>
<option value="Romantis">Romantis</option>
<option value="Thriller">Thriller</option>
<option value="Sejarah">Sejarah</option>
</select>
</div>
<div class="input">
<label for="inputBookImage">Link Cover Buku</label>
<input
id="inputBookImage"
type="text"
required
placeholder="ex : https://edit.org/images/cat/book-covers-big-2019101610.jpg"
/>
</div>
<div class="input_inline">
<label for="inputBookIsComplete">Selesai dibaca</label>
<input id="inputBookIsComplete" type="checkbox" />
</div>
<button id="bookSubmit" type="submit">
Masukkan buku ke rak <span>Belum selesai dibaca</span>
</button>
</form>
</div>
</div>
<div class="card second">
<div class="searchCard">
<div class="search" id="search">
<div class="search-box shadow">
<input
id="search-txt"
class="search-txt"
type="text"
name=""
placeholder="Ketik judul buku disini.."
/>
<button id="searchSubmit" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
<div class="BookCard"></div>
</div>
</div>
<div class="bookShelf">
<div class="bookStatus">
<div class="BookshelfCard incompleteBookshelfList">
<h2>Belum Selesai Dibaca</h2>
<div class="BookCard" id="uncompleteBook"></div>
</div>
<div class="BookshelfCard completeBookshelfList">
<h2>Selesai Dibaca</h2>
<div class="BookCard" id="completeBook"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="src/script/index.js" type="module"></script>
</body>
</html>