-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbookList.html
103 lines (96 loc) · 3.59 KB
/
bookList.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>📚 Becca Reading List 📚</title>
<link href="bookList.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>📚 Becca's Reading List 📚</h1>
<table id="bookList">
<thead>
<tr>
<th class="title">Title</th>
<th class="author">Author</th>
<th class="pages">Pages</th>
<th class="audioLength">Audiobook Length</th>
<th class="dueOrOwn">Library Due Date/ Own Book?</th>
<th class="progress">Progress</th>
<th class="removable">Click to Remove</th>
</tr>
</thead>
<tbody id="tableBody">
<tr class="striped">
<td class="title">Sample Book</td>
<td class="author">Anonymous</td>
<td class="pages">999 pages</td>
<td class="audioLength">17 hrs, 9 min</td>
<td class="dueOrOwn">Own Audiobook, ebook due 3/31</td>
<td class="progress">5%</td>
<td class="removable">Remove?</td>
</tr>
<!-- <tr class="striped">
<td>Radical Acceptance</td>
<td>Tara Brach</td>
<td>333 pages</td>
<td>12 hrs, 15 min</td>
<td>Own Audiobook, Book Due 3/16</td>
<td>Not yet</td>
<td class="removable">Remove?</td>
</tr>
<tr class="non-striped">
<td>This is How They Tell Me the World Ends</td>
<td>Nicole Perlroth</td>
<td>528 pages</td>
<td>18 hrs, 23 min</td>
<td>Book Due 3/16</td>
<td>Not yet</td>
<td class="removable">Remove?</td>
</tr>
<tr class="striped">
<td>A Mind For Numbers</td>
<td>Barbara Oakley</td>
<td>322 pages</td>
<td>7 hrs, 2 min</td>
<td>Own Audiobook</td>
<td>Rereading</td>
<td class="removable">Remove?</td>
</tr>
-->
</tbody>
</table>
<button class="unHide" id="unHide">Un-Hide All Columns</button>
<br>
<div class="bookForm">
<h3>Add More Books!</h3>
<form id="newBookForm">
<label for="title">Book Title: </label>
<input type="text" class="input" name="title" id="title" required>
<br>
<label for="author">Author Name: </label>
<input type="text" class="input" name="author" id="author">
<br>
<label>Pages:
<input type="number" id="pages" min="0" max="2000" placeholder="###">
</label>
<br>
<label>Audiobook Length:
<input type="text" id="audioLength" name="audioLength" placeholder="# hrs, # min">
</label>
<br>
<label>Date due if library, or if you own either book/audio:
<input type="text" id="dueOrOwn" name="dueOrOwn" placeholder="ebook due 9/30, own audio">
</label>
<br>
<label>Progress:
<input type="text" id="progress" name="progress" placeholder="# %">
</label>
<br>
<button class="form-btn" type="submit" id="submit">Submit</button>
</form>
</div>
<h2 id="info"></h2>
<script src="bookList.js"></script>
</body>
</html>