-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathRandomBookGenerator.html
158 lines (136 loc) · 5.91 KB
/
RandomBookGenerator.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Random Book Generator</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script type="module" src="./main.js"></script>
<link rel="stylesheet" href="main.css">
<!-- Code for slider taken from https://codingartistweb.com/2021/06/double-range-slider-html-css-javascript/ -->
<link rel="stylesheet" href="slider-style.css">
</head>
<body id="bootstrap-override">
<div class="container-fluid">
<div class="row">
<div class="d-flex align-items-center text-center heading">
<div class="line"></div>
<h2 id="headingBox" class="col-lg-3 mx-auto">Random Book Generator</h2>
</div>
</div> <!-- Close row -->
<div class="row justify-content-center align-items-center">
<div class="col-lg-4">
<div class="form-group p-3 text-center">
<form id="fileUpload">
<label>Upload a GoodReads Library in CSV format:
<sup><a href="https://www.goodreads.com/review/import" target="_blank"><img src="images/info-circle.svg" width="15px" data-toggle="tooltip" data-placement="top" title="Don't know how to get your GoodReads library? Click on this button."/></a></sup>
</label>
<input type="file" accept=".csv,text/csv" id="csv" name="uploadCSV">
</form>
</div>
</div>
</div> <!-- Close row -->
<div id="errorSpot"></div>
<div class="row justify-content-center">
<div class="col-lg-4" id="criteriaBox">
<div class="text-center p-2"><h5>Set your criteria</h5></div>
<div id="criteriaList">
<form id="criteria">
<table>
<tr> <!-- First table row -->
<td colspan="3">
<div class="form-group p-2">
<label class="labels">Number of books to generate:</label>
<input type="number" name="numBooks" min="1" max="100" value="10" class="form-control"/>
</div>
</td>
</tr>
<tr> <!-- Second table row -->
<td width="50px">
<div class="form-group p-2">
<label class="labels">Recency:</label>
<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="recency" value="Select a time period" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select a time period</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Past month</a></li>
<li><a class="dropdown-item" href="#">Past 3 months</a></li>
<li><a class="dropdown-item" href="#">Past 6 months</a></li>
<li><a class="dropdown-item" href="#">Past year</a></li>
<li><a class="dropdown-item" href="#">All time</a></li>
</ul>
</div>
</div>
</td>
<td>
<div class="form-group p-2">
<label class="labels">Rating:</label>
<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="rating" value="Select a rating" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select a rating</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">3 stars+</a></li>
<li><a class="dropdown-item" href="#">4 stars+</a></li>
<li><a class="dropdown-item" href="#">Any</a></li>
</ul>
</div>
</div>
</td>
<td>
<!--<input type="checkbox">Available in-store at Indigo? -->
</td>
</tr>
<tr> <!-- Third table row -->
<td colspan="3">
<div class="form-group p-2">
<label class="labels">Number of pages:</label>
<div class="values">
<span id="range1">
0
</span>
<span> ‐ </span>
<span id="range2">
100
</span>
</div>
<div class="slider-container">
<div class="slider-track"></div>
<input type="range" min="0" max="5000" value="0" id="slider-1" oninput="slideOne()">
<input type="range" min="0" max="5000" value="5000" id="slider-2" oninput="slideTwo()">
</div>
</div>
</td>
</tr>
<tr> <!-- Fourth table row -->
<td colspan="3">
<div class="form-group p-2" id="shelfChoicesMandatory">
<p class="labels">Shelves:</p>
<p class="labels"><small>ALL from:</small></p>
<p id="message"><small><i>Please upload a GoodReads library to get the list of possible shelves</i></small></p>
<!-- Filled in by createCheckboxes method in JS -->
</div>
<div class="form-group p-2" id="shelfChoices">
<p class="labels"><small>ANY from:</small></p>
<p id="message"><small><i>Please upload a GoodReads library to get the list of possible shelves</i></small></p>
<!-- Filled in by createCheckboxes method in JS -->
</div>
</td>
</tr>
</table>
</form> <!-- Close criteria form -->
</div>
</div>
<div class="col-lg-4" id="booksBox">
<div class="text-center p-2"><h5>List of books</h5></div>
<div id="bookList">
<p style="text-align:center;">No books yet. Click on the <i>Generate books</i> button to generate a list.</p>
</div>
</div>
</div> <!-- Close row -->
<div class="row justify-content-center align-items-center">
<div id="sendForm">
<input type="button" id="submitButton" value="Generate books">
</div>
</div>
</div> <!-- Close container -->
<script src="slider.js"></script>
</body>
</html>