Improve listing page

index.css

@@ -1,14 +1,54 @@
+body {
+	font-family: cursive;
+}
+
 #header {
 	display: flex;
 	justify-content: space-between;
+	border-bottom: 2px solid gray;
+	margin: 0 1em 2em;
 }
 
 #buttons {
 	display: flex;
+	margin: 0 1em;
 }
 
 #buttons button {
-	height: 2em;
-	margin: 1em;
+	font-family: cursive;
+	padding: .5em 1em;
+	font-size: 1rem;
+	margin: 0 2em;
 	align-self: center;
+	background-color: white;
+	border: 2px solid black;
+	box-shadow: 2px 2px black;
+}
+
+#buttons button:hover {
+	background-color: #EEE;
+	cursor: pointer;
+}
+
+#products {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.product {
+	width: 150px;
+	height: 150px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	border: 2px solid black;
+	margin: 1em;
+	position: relative;
+}
+
+.delete-checkbox {
+	border: 1px solid black;
+	position: absolute;
+	top: 0px;
 }

index.html

@@ -13,12 +13,8 @@
 				<button id="delete-product-btn">MASS DELETE</button>
 			</div>
 		</div>
-<?php
-require 'model/product.php';
-
-$products = Product::selectAll();
-// TODO
-echo json_encode($products);
-?>
+		<div id="products">
+		</div>
 	</body>
+	<script src="index.js"></script>
 </html>

index.js

@@ -0,0 +1,28 @@
+const productsList = document.getElementById('products');
+
+const loadItems = () => {
+	const xhttp = new XMLHttpRequest();
+
+	xhttp.onload = function() {
+		const products = JSON.parse(this.responseText);
+
+		const boxes = products.map(product =>
+			`<div class="product">
+				<input type="checkbox" class="delete-checkbox" value="${product.id}">
+				<p>
+					${product.sku}<br>
+					${product.name}<br>
+					${product.price} $<br>
+					${product.attribute}
+				</p>
+			 </div>
+		`)
+
+		productsList.innerHTML = boxes.join('\n');
+	}
+
+	xhttp.open('GET', 'view/products.php', true);
+	xhttp.send();
+}
+
+loadItems();

model/product.php

@@ -86,6 +86,7 @@ abstract class Product implements JsonSerializable {
 
 	public function jsonSerialize() : mixed {
 		return [
+			'id' => $this->getProductId(),
 			'sku' => $this->getSKU(),
 			'name' => $this->getName(),
 			'price' => $this->getPrice(),

view/products.php

@@ -0,0 +1,4 @@
+<?php
+require '../model/product.php';
+
+echo json_encode(Product::selectAll());