diff --git a/index.css b/index.css index efa041e..2e87909 100644 --- a/index.css +++ b/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; } diff --git a/index.php b/index.html similarity index 75% rename from index.php rename to index.html index dc8eecd..ad256d6 100644 --- a/index.php +++ b/index.html @@ -13,12 +13,8 @@ - +
+
+ diff --git a/index.js b/index.js new file mode 100644 index 0000000..fbca442 --- /dev/null +++ b/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 => + `
+ +

+ ${product.sku}
+ ${product.name}
+ ${product.price} $
+ ${product.attribute} +

+
+ `) + + productsList.innerHTML = boxes.join('\n'); + } + + xhttp.open('GET', 'view/products.php', true); + xhttp.send(); +} + +loadItems(); diff --git a/model/product.php b/model/product.php index 1386d28..798fe92 100644 --- a/model/product.php +++ b/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(), diff --git a/view/products.php b/view/products.php new file mode 100644 index 0000000..76f5705 --- /dev/null +++ b/view/products.php @@ -0,0 +1,4 @@ +