-
Notifications
You must be signed in to change notification settings - Fork 0
/
book-search.html
95 lines (94 loc) · 6.2 KB
/
book-search.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Tracker - Search for a Book</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="navbar">
<ul class="nav-menu">
<li class="nav-item">
<a href="index_test.html" class="nav-link ">My Books</a>
</li>
<li class="nav-item">
<a href="book-search.html" class="nav-link">Search Books</a>
</li>
</ul>
</nav>
</header>
<div class="container">
<div class="search-container input-group mb-3 pt-4">
<span class="input-group-text" id="inputGroup-sizing-default">Book Title</span>
<input id="search-input" type="text" class="form-control shadow-none">
<button onclick="searchBook()" type="button" class="btn btn-primary">Search</button>
</div>
<div>
<p id="title"></p>
<p id="author"></p>
<img src="" alt="" id="thumbnail" />
</div>
<div class="list-view d-flex" id="search-results">
<div class="search-result-item row py-2">
<div class="col-auto">
<img class="img-fluid img-search-result" src="http://books.google.com/books/content?id=iaM7DwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api">
</div>
<div class="col">
<div class="book-title">Old Man's War</div>
<div class="book-author">John Scalzi</div>
<div class="book-pages">327 pages</div>
<div class="book-description">Perfect for an entry-level sci-fi reader and the ideal addition to a veteran fan’s collection, John Scalzi's Old Man’s War will take audiences on a heart-stopping adventure into the far corners of the universe. John Perry did two things on his 75th birthday. First he visited his wife's grave. Then he joined the army. The good news is that humanity finally made it into interstellar space. The bad news is that planets fit to live on are scarce-and aliens willing to fight for them are common. The universe, it turns out, is a hostile place. So: we fight. To defend Earth (a target for our new enemies, should we let them get close enough) and to stake our own claim to planetary real estate. Far from Earth, the war has gone on for decades: brutal, bloody, unyielding. Earth</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="add-book-modal" tabindex="-1" role="dialog" aria-labelledby="addBookModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-md modal-dialog-centered" role="document" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="save-book-confirm-message">Add book to my list?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="pb-3 text-center">
<img class="m-auto img-fluid img-modal" id="save-modal-image" src="">
</div>
<div class="pb-3 position-relative">
<div class="field-label position-absolute"><span>Title</span></div>
<div class="field-text field-small mx-3 mt-2" id="save-modal-book-title">Dune</div>
</div>
<div class="pb-3 position-relative">
<div class="field-label position-absolute"><span>Author</span></div>
<div class="field-text field-small mx-3" id="save-modal-book-author">Frank Herbert</div>
</div>
<div class="pb-3 position-relative">
<div class="field-label position-absolute"><span>Pages</span></div>
<div class="field-text mx-3" id="save-modal-book-pages">706</div>
</div>
<div class="pb-3 position-relative">
<div class="field-label position-absolute"><span>Description</span></div>
<div class="field-text field-large mx-3 overflow-y-auto" id="save-modal-book-description">
Set on the desert planet Arrakis, Dune is the story of the boy Paul Atreides, heir to a noble
family tasked with ruling an inhospitable world where the only thing of value is the “spice”
melange, a drug capable of extending life and enhancing consciousness.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="save-confirm-cancel" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="save-confirm-ok" class="btn btn-primary">Add Book</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="db.js"></script>
<script src="script-search.js"></script>
</body>
</html>