Skip to content
This repository was archived by the owner on Apr 20, 2025. It is now read-only.

Commit 5a24f93

Browse files
nnivxixnnivxix
committed
feat: add clear search book
1 parent 005ed0c commit 5a24f93

File tree

3 files changed

+164
-78
lines changed

3 files changed

+164
-78
lines changed

‎index.html

Lines changed: 126 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,138 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<link rel="preconnect" href="https://fonts.gstatic.com" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
15+
<link rel="stylesheet" href="style.css" />
16+
<meta name="theme-color" content="#E9E9E9" />
317

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
9-
<link rel="preconnect" href="https://fonts.gstatic.com">
10-
<link rel="preconnect" href="https://fonts.googleapis.com">
11-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12-
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
13-
<link rel="stylesheet" href="style.css">
14-
<meta name="theme-color" content="#E9E9E9">
18+
<!-- Primary Meta Tags -->
19+
<title>Rakbuku</title>
20+
<meta name="title" content="Rakbuku" />
21+
<meta name="description" content="Atur buku yang kamu baca sekarang" />
1522

16-
<!-- Primary Meta Tags -->
17-
<title>Rakbuku</title>
18-
<meta name="title" content="Rakbuku">
19-
<meta name="description" content="Atur buku yang kamu baca sekarang">
23+
<!-- Open Graph / Facebook -->
24+
<meta property="og:type" content="website" />
25+
<meta property="og:url" content="https://nnivxix.github.io/bookshelf/" />
26+
<meta property="og:title" content="Rakbuku" />
27+
<meta
28+
property="og:description"
29+
content="Atur buku yang kamu baca sekarang"
30+
/>
31+
<meta
32+
property="og:image"
33+
content="https://i.ibb.co/1rfDL5J/Dribbble-Mockup-Shot-01-1.png"
34+
/>
2035

21-
<!-- Open Graph / Facebook -->
22-
<meta property="og:type" content="website">
23-
<meta property="og:url" content="https://nnivxix.github.io/bookshelf/">
24-
<meta property="og:title" content="Rakbuku">
25-
<meta property="og:description" content="Atur buku yang kamu baca sekarang">
26-
<meta property="og:image" content="https://i.ibb.co/1rfDL5J/Dribbble-Mockup-Shot-01-1.png">
36+
<!-- Twitter -->
37+
<meta property="twitter:card" content="summary_large_image" />
38+
<meta
39+
property="twitter:url"
40+
content="https://nnivxix.github.io/bookshelf/"
41+
/>
42+
<meta property="twitter:title" content="Rakbuku" />
43+
<meta
44+
property="twitter:description"
45+
content="Atur buku yang kamu baca sekarang"
46+
/>
47+
<meta
48+
property="twitter:image"
49+
content="https://i.ibb.co/1rfDL5J/Dribbble-Mockup-Shot-01-1.png"
50+
/>
51+
</head>
2752

28-
<!-- Twitter -->
29-
<meta property="twitter:card" content="summary_large_image">
30-
<meta property="twitter:url" content="https://nnivxix.github.io/bookshelf/">
31-
<meta property="twitter:title" content="Rakbuku">
32-
<meta property="twitter:description" content="Atur buku yang kamu baca sekarang">
33-
<meta property="twitter:image" content="https://i.ibb.co/1rfDL5J/Dribbble-Mockup-Shot-01-1.png">
34-
</head>
35-
36-
<body>
37-
<header class="head_bar">
38-
<h1 class="head_bar__title">Rakbuku</h1>
39-
<form id="searchBook" onsubmit="event.preventDefault();">
40-
<input id="searchBookTitle" type="text" placeholder="Cari Buku: Manusia Hebat">
41-
</form>
42-
</header>
43-
44-
<main class="container">
45-
<div class="input_section flex" id="input_section" >
46-
<form id="inputBook">
47-
<div class="input">
48-
<label for="inputBookTitle">Judul Buku<span class="important">*</span></label>
49-
<input id="inputBookTitle" autofocus type="text" required placeholder="Menjadi Koki Handal">
50-
</div>
51-
<div class="input">
52-
<label for="inputBookAuthor">Penulis Buku <span class="important">*</span></label>
53-
<input id="inputBookAuthor" type="text" required placeholder="Junaedi">
54-
</div>
55-
<div class="input">
56-
<label for="inputBookYear">Tahun Terbit <span class="important">*</span></label>
57-
<input id="inputBookYear" type="number" required placeholder="2019">
58-
</div>
59-
<div class="input_inline">
60-
<input id="inputBookIsComplete" type="checkbox" style="padding-right: 10px;">
61-
<label for="inputBookIsComplete">Selesai dibaca</label>
62-
</div>
63-
<button id="bookSubmit" type="submit"></button>
53+
<body>
54+
<header class="head_bar">
55+
<h1 class="head_bar__title">Rakbuku</h1>
56+
<form id="searchBook" onsubmit="event.preventDefault();">
57+
<span id="clearSearch">&#x2716;</span>
58+
<input
59+
id="searchBookTitle"
60+
type="text"
61+
placeholder="Cari Buku: Manusia Hebat"
62+
/>
6463
</form>
65-
</div>
66-
<div class="book_shelf">
67-
<h2>Sedang dibaca 📖</h2>
68-
<div id="incompleteBookshelfList" class="book_list">
69-
<!-- konten buku berada di sini -->
64+
</header>
65+
66+
<main class="container">
67+
<div class="input_section flex" id="input_section">
68+
<form id="inputBook">
69+
<div class="input">
70+
<label for="inputBookTitle"
71+
>Judul Buku<span class="important">*</span></label
72+
>
73+
<input
74+
id="inputBookTitle"
75+
autofocus
76+
type="text"
77+
required
78+
placeholder="Menjadi Koki Handal"
79+
/>
80+
</div>
81+
<div class="input">
82+
<label for="inputBookAuthor"
83+
>Penulis Buku <span class="important">*</span></label
84+
>
85+
<input
86+
id="inputBookAuthor"
87+
type="text"
88+
required
89+
placeholder="Junaedi"
90+
/>
91+
</div>
92+
<div class="input">
93+
<label for="inputBookYear"
94+
>Tahun Terbit <span class="important">*</span></label
95+
>
96+
<input
97+
id="inputBookYear"
98+
type="number"
99+
required
100+
placeholder="2019"
101+
/>
102+
</div>
103+
<div class="input_inline">
104+
<input
105+
id="inputBookIsComplete"
106+
type="checkbox"
107+
style="padding-right: 10px"
108+
/>
109+
<label for="inputBookIsComplete">Selesai dibaca</label>
110+
</div>
111+
<button id="bookSubmit" type="submit"></button>
112+
</form>
70113
</div>
71-
</div>
72-
73-
<div class="book_shelf">
74-
<h2>Sudah dibaca 📚</h2>
75-
<div id="completeBookshelfList" class="book_list">
76-
<!-- konten buku berada di sini -->
114+
<div class="book_shelf">
115+
<h2>Sedang dibaca 📖</h2>
116+
<div id="incompleteBookshelfList" class="book_list">
117+
<!-- konten buku berada di sini -->
118+
</div>
77119
</div>
78-
</div>
79-
80-
<footer>
81-
<p>Dibangun bersama dengan 💛 oleh <a target="_blank" href="https://github.com/nnivxix">Hanasa</a> di 🇮🇩.</p>
82-
</footer>
83-
</main>
84120

85-
<script src="main.js"></script>
121+
<div class="book_shelf">
122+
<h2>Sudah dibaca 📚</h2>
123+
<div id="completeBookshelfList" class="book_list">
124+
<!-- konten buku berada di sini -->
125+
</div>
126+
</div>
86127

87-
</body>
128+
<footer>
129+
<p>
130+
Dibangun bersama dengan 💛 oleh
131+
<a target="_blank" href="https://github.com/nnivxix">Hanasa</a> di 🇮🇩.
132+
</p>
133+
</footer>
134+
</main>
88135

136+
<script src="main.js"></script>
137+
</body>
89138
</html>

‎main.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,36 @@ const author = document.getElementById("inputBookAuthor");
88
const year = document.getElementById("inputBookYear");
99
const isComplete = document.getElementById("inputBookIsComplete");
1010
const searchBookTitle = document.getElementById("searchBookTitle");
11+
const searchBook = document.getElementById("searchBook");
12+
const clearSearch = document.getElementById("clearSearch");
1113
const bookSubmit = document.getElementById("bookSubmit");
1214
const formInput = document.getElementById("inputBook");
1315
const inputSection = document.getElementById("input_section");
1416

17+
/**
18+
*
19+
* Add clear search input
20+
*
21+
*/
22+
searchBookTitle.addEventListener("input", function () {
23+
if (searchBookTitle.value.length) {
24+
clearSearch.style.display = "block";
25+
} else {
26+
clearSearch.style.display = "none";
27+
}
28+
});
29+
clearSearch.addEventListener("click", function () {
30+
searchBookTitle.value = "";
31+
clearSearch.style.display = "none";
32+
});
33+
34+
/**
35+
*
36+
* Add keyboard event when user click `ctrl + K`
37+
*
38+
*/
1539
window.addEventListener("keydown", function (event) {
16-
if (event.ctrlKey && event.key === "k") {
40+
if ((event.ctrlKey && event.key === "k") || event.key === "K") {
1741
event.preventDefault();
1842

1943
searchBookTitle.focus();

‎style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,19 @@ color: var(--second-text-color);
203203
width: 100%;
204204
}
205205

206+
#searchBook {
207+
position: relative;
208+
}
209+
210+
#clearSearch {
211+
position: absolute;
212+
top: 0;
213+
right: 0;
214+
margin-right: 14px;
215+
margin-top: 8px;
216+
cursor: pointer;
217+
}
218+
206219
footer {
207220
grid-column: 1 / 3;
208221
text-align: center;

0 commit comments

Comments
 (0)