3 files changed, 46 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..13136da
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="main.css">
+<body></body>
+<script src="data.js"></script>
+<script src="main.js"></script>
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..711aaf2
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,21 @@
+body {
+  margin: 2rem;
+}
+
+.g-Books {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-gap: 1rem;
+
+}
+
+.g-Book {
+  width: 13rem;
+  align-self: center;
+  border: 1px solid #DDDDDD;
+}
+
+.g-Book:hover {
+  transform: scale(1.1);
+  transition: transform 0.1s linear;
+}
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..29de235
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,19 @@
+const sortedBooks = books.sort((a, b) =>
+  a.authorsSort == b.authorsSort
+    ? a.date > b.date
+    : a.authorsSort > b.authorsSort)
+
+const view = h('div', 
+  { className: 'g-Books' }, 
+  ...sortedBooks.map(book => h('img', { className: 'g-Book', src: book.cover })))
+
+document.body.appendChild(view)
+
+// Helpers
+
+function h(tagName, attrs, ...children) {
+  let elem = document.createElement(tagName)
+  elem = Object.assign(elem, attrs)
+  for (const child of children) elem.append(child)
+  return elem
+}