diff --git a/public/index.html b/public/index.html index f89dd7a..00f890a 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,12 @@ My Store - + +
+

Shoe Shop

+
diff --git a/public/index.js b/public/index.js index 6515a73..84f5122 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,42 @@ -//stuff -//more stuff \ No newline at end of file +'use strict'; + +window.onload = function() { + getProducts() + console.log('hi') +} + +const getProducts = () => { + fetch('https://my-json-server.typicode.com/jubs16/Products/Products') + .then(response => { + return response.json() + }) + .then(data => { + data.forEach(productDiv); + }) +} + +let productDiv= function(data) { + let section = document.getElementById("product-container"); + + let div = document.createElement("div"); + let img = document.createElement("img"); + let p = document.createElement("p"); + let button = document.createElement("button"); + let name = data.name.toLowerCase(); + + section.classList.add("flex"); + div.classList.add("product"); + div.classList.add("flex-column"); + p.classList.add("flex-space-between"); + p.classList.add("capitalize"); + button.classList.add("capitalize"); + + img.src = data.imgUrl; + p.innerHTML = `${name} $${data.price}`; + button.innerHTML = "details"; + + div.appendChild(img); + div.appendChild(p); + div.appendChild(button); + section.appendChild(div); +} \ No newline at end of file diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..c68610e --- /dev/null +++ b/public/main.css @@ -0,0 +1,44 @@ +body { + background-color: whitesmoke; + font-family: Helvetica, Arial, sans-serif; +} + +.flex { + display: flex; + justify-content: center; + align-items: flex-end; + flex-flow: wrap; +} + +.flex-column { + flex-direction: column; + padding: 20px 10px; +} + +.flex-space-between { + display: flex; + justify-content: space-between; +} + +h1 { + width: 100%; + text-align: center; +} + +img { + width: 300px; + max-width: 100%; + height: auto; +} + +button { + background-color: blue; + color: whitesmoke; + padding: 8px 10px; + font-size: .8em; + border-radius: 3px; +} + +.capitalize { + text-transform: capitalize; +} \ No newline at end of file