-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (152 loc) · 6.02 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
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
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reflection Library</title>
<link rel="stylesheet" href="./style/main.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
<div class="global-wrapper">
<header class="wrapper">
<div class="logo left">Reflection Library</div>
<div class="right">
<a
href="https://github.com/jj-jinosko/"
target="”_blank”"
class="href"
>Github</a
>
<a
href="https://www.linkedin.com/in/jessicajinosko"
target="”_blank”"
class="href"
>Linkedin</a
>
<a href="" target="”_blank”" class="href">Contact Me</a>
</div>
</header>
<main class="wrapper">
<!-- <div class="hero">
<h2>Reflection quote</h2>
<p class="quote">
"The great path has no gates,<br>
Thousands of roads enter it.<br>
When one passes through this gateless gate<br>
He walks freely between heaven and earth"<br>
<em>- By Ekai from The Gateless Gate</em>
</p>
</div>
<div class="queue-container">
<h2>Queue</h2>
<div class="queue">
<div class="current">
Current
<div class="current-book">Current book</div>
</div>
<div class="next">
Next
<div class="next-books">
<ol>
<li>Book 1</li>
<li>Book 2</li>
<li>Book 3</li>
<li>Book 4</li>
<li>Book 5</li>
</ol>
</div>
</div>
</div>
</div> -->
<div class="library">
<!-- Library -->
<!-- <aside>filter/sort</aside> -->
<div class="books-wrapper">
<h2>Books</h2>
<!-- <button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Delete Book</h1>
<p>Are you sure you want to delete this book?</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="button" class="deletebtn">Delete</button>
</div>
</div>
</form>
</div> -->
<div class="book">
<table>
<!-- <thead>Add Book</thead> -->
<form id="bookForm" action="" method="">
<tr class="title input">
<th>
<label for="newTitle"
>Title<span aria-label="required">*</span></label
>
</th>
<td>
<input id="newTitle" type="text" name="title" required />
</td>
</tr>
<tr class="author input">
<th>
<label for="newAuthor"
>Author<span aria-label="required">*</span></label
>
</th>
<td>
<input
id="newAuthor"
type="text"
name="author"
required
/>
</td>
</tr>
<tr class="quote input">
<th><label for="newQuote">Quote</label></th>
<td>
<textarea name="quote" id="newQuote" rows="5"></textarea>
</td>
</tr>
<tr class="read input">
<th><label for="newRead">Read?</label></th>
<td><input id="newRead" type="text" name="read" /></td>
</tr>
<tr>
<th>
<button class="addBookBtn" type="submit input">
submit
</button>
</th>
</tr>
</form>
</table>
</div>
<button class="surpriseMeBtn">SURPRISE ME!</button>
<div class="bookshelf"></div>
</div>
</div>
</main>
<footer class="wrapper">Thank you for visiting!</footer>
</div>
<script src="./script.js"></script>
<!-- test script -->
<!-- <script>
// need to appendChild in correct order
// .innerText replaces everything? including subelements? it seems like it...
let p = document.createElement("p");
let p2 = document.createElement("p");
document.body.appendChild(p);
// p.appendChild(p2); // doesn't work when p innertext overwrites!!!! xD
// p.innerText = "hello, testing";
// p.appendChild(p2); // works, need to add innertext to p first? No! I think innerText OVERWRITES p2!
p2.innerText = "did p2 work?"
</script> -->
</body>
</html>