-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
124 lines (109 loc) · 4.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="images/library-favicon.png">
<link type="text/css" rel="stylesheet" href="css/modern-normalize.min.css">
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link href="css/fontawesome.min.css" rel="stylesheet">
<link href="css/duotone.min.css" rel="stylesheet">
<link href="css/solid.min.css" rel="stylesheet">
<title>Library</title>
</head>
<body id="content">
<div id="side-form">
<header>
<h1 id="logo"><i class="fad fa-books theme-books"></i> Library</i></h1>
</header>
<form>
<div class="input-block">
<input id="title" type="text" name="title" autocomplete="off" required>
<span class="placeholder">What is the title of the book?</span>
<div class="validation-block">
<p class="validation-text title">Please fill out this field.</p>
</div>
</div>
<div class="input-block">
<input id="name" type="text" name="name" autocomplete="off" required>
<span class="placeholder">Who is the author of the book?</span>
<div class="validation-block">
<p class="validation-text name">Please fill out this field.</p>
</div>
</div>
<div class="input-block">
<input id="number" type="text" name="number" autocomplete="off" required>
<span class="placeholder">How many pages are in the book?</span>
<div class="validation-block">
<p class="validation-text number">Please enter a number bigger than 0.</p>
</div>
</div>
<label class="checkbox">
<span class="checkbox-input">
<input type="checkbox" name="checkbox" autocomplete="off">
<span class="checkbox-control">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden="true" focusable="false">
<path fill='none' stroke='currentColor' stroke-width='3' d='M1.73 12.91l6.37 6.37L22.79 4.59'></svg>
</span>
</span>
<span class="checkbox-label">I have already read this book!</span>
</label>
<input type="button" value="ADD A NEW BOOK" id="add-book">
</form>
<footer id="footer">
<p class="project-info">
<i class="fas fa-info-circle hover-icon"></i>
<span class="tooltip-text">
This is a small Library App, where you can add new books,
delete old ones, change status of your books to read/unread and see your library statistics.
<b>The data is stored in localStorage</b>.
</span>
Hover to read about this project
</p>
<p id="crafted-by"> ☽ Crafted by
<a href="https://github.com/mooniiDev" target="_blank" >mooniiDev</a> |
<a href="https://github.com/mooniiDev/library" target="_blank">Source</a> ☾
</p>
</footer>
</div>
<main id="library-content">
<div id="library-info">
<p>BOOKS READ: <span id="books-read"></span></p>
<p>BOOKS UNREAD: <span id="books-unread"></span></p>
<p>TOTAL BOOKS: <span id="total-books"></span></p>
<button type="button" id="delete-all-btn">DELETE ALL</button>
</div>
<table id="books-list">
<thead id="book-requirements">
<tr>
<td>TITLE</td>
<td>AUTHOR</td>
<td>PAGES</td>
<td>STATUS</td>
<td>REMOVAL</td>
</tr>
</thead>
<tbody id="table-body">
<!-- HERE IS A LIST OF BOOKS GENERATED BY JS -->
</tbody>
</table>
<!-- MODAL -->
<div id="modal" class="close">
<div class="modal-card">
<div class="modal-header">
<h2>BOOKS REMOVAL</h2>
<span class="close-modal close">×</span>
</div>
<div class="modal-content">
<p>Do you really want to delete all the books from your library?</p>
<div class="modal-options">
<button type="button" class="cancel-removal close">Cancel</button>
<button type="button" class="confirm-removal">DELETE ALL</button>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>