From 25943408b0f5b42d152e39bb815ee7ddc281a5ab Mon Sep 17 00:00:00 2001 From: "efaulkenberry@gmail.com" Date: Tue, 26 May 2020 20:27:16 -0500 Subject: [PATCH 1/5] product + product details + css --- public/index.html | 5 ++++- public/index.js | 40 ++++++++++++++++++++++++++++++++++++++-- public/main.css | 27 +++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 public/main.css diff --git a/public/index.html b/public/index.html index f89dd7ae..4bf61fcf 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,12 @@ My Store - + +
+ +
diff --git a/public/index.js b/public/index.js index 6515a734..5ec9c1ec 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,38 @@ -//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"); + 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 00000000..e4f2518b --- /dev/null +++ b/public/main.css @@ -0,0 +1,27 @@ +body { + background-color: peachpuff; +} +.flex { + display: flex; + justify-content: center; + align-items: flex-end; + flex-flow: wrap; +} + +.flex-column { + flex-direction: column; + padding: 20px 10px; +} + +img { + width: 300px; + max-width: 100%; + height: auto; +} + +button { + background-color: plum; + color: darkmagenta; + padding: 8px 10px; + font-size: .7em; +} \ No newline at end of file From a7d924abd49f9de253033d8f3f0ea9e034c038c1 Mon Sep 17 00:00:00 2001 From: "efaulkenberry@gmail.com" Date: Tue, 26 May 2020 21:16:21 -0500 Subject: [PATCH 2/5] updated css/js --- public/index.js | 2 ++ public/main.css | 9 +++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/public/index.js b/public/index.js index 5ec9c1ec..d0e0601f 100644 --- a/public/index.js +++ b/public/index.js @@ -27,6 +27,8 @@ let productDiv= function(data) { section.classList.add("flex"); div.classList.add("product"); div.classList.add("flex-column"); + p.classList.add("flex-space-between"); + img.src = data.imgUrl; p.innerHTML = `${name} $${data.price}`; button.innerHTML = "Details"; diff --git a/public/main.css b/public/main.css index e4f2518b..f2f77dd1 100644 --- a/public/main.css +++ b/public/main.css @@ -13,6 +13,11 @@ body { padding: 20px 10px; } +.flex-space-between { + display: flex; + justify-content: space-between; +} + img { width: 300px; max-width: 100%; @@ -20,8 +25,8 @@ img { } button { - background-color: plum; - color: darkmagenta; + background-color: peru; + color: papayawhip; padding: 8px 10px; font-size: .7em; } \ No newline at end of file From 4aa6a750f3a429f3870d47fc081d12887744381e Mon Sep 17 00:00:00 2001 From: "efaulkenberry@gmail.com" Date: Tue, 26 May 2020 21:28:27 -0500 Subject: [PATCH 3/5] fixed typo in index.html --- public/index.html | 2 +- public/index.js | 6 ++++-- public/main.css | 6 +++++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index 4bf61fcf..d573ebed 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ My Store -
diff --git a/public/index.js b/public/index.js index d0e0601f..84f51222 100644 --- a/public/index.js +++ b/public/index.js @@ -28,10 +28,12 @@ let productDiv= function(data) { 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"; + p.innerHTML = `${name} $${data.price}`; + button.innerHTML = "details"; div.appendChild(img); div.appendChild(p); diff --git a/public/main.css b/public/main.css index f2f77dd1..085ebc43 100644 --- a/public/main.css +++ b/public/main.css @@ -28,5 +28,9 @@ button { background-color: peru; color: papayawhip; padding: 8px 10px; - font-size: .7em; + font-size: .75em; +} + +.capitalize { + text-transform: capitalize; } \ No newline at end of file From d426a4bb83a061348175bd16dd951393e26ffaaf Mon Sep 17 00:00:00 2001 From: "efaulkenberry@gmail.com" Date: Tue, 26 May 2020 22:48:49 -0500 Subject: [PATCH 4/5] colors, button design --- public/main.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/public/main.css b/public/main.css index 085ebc43..a9367d0d 100644 --- a/public/main.css +++ b/public/main.css @@ -1,5 +1,6 @@ body { - background-color: peachpuff; + background-color: whitesmoke; + font-family: Helvetica, Arial, sans-serif; } .flex { display: flex; @@ -25,10 +26,11 @@ img { } button { - background-color: peru; - color: papayawhip; + background-color: blue; + color: whitesmoke; padding: 8px 10px; - font-size: .75em; + font-size: .8em; + border-radius: 3px; } .capitalize { From 180bb97013af1e7cd4d74dcbc6927b0483ccd337 Mon Sep 17 00:00:00 2001 From: "efaulkenberry@gmail.com" Date: Tue, 26 May 2020 23:02:30 -0500 Subject: [PATCH 5/5] h1 --- public/index.html | 2 +- public/main.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index d573ebed..00f890a1 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@
- +

Shoe Shop

diff --git a/public/main.css b/public/main.css index a9367d0d..c68610ea 100644 --- a/public/main.css +++ b/public/main.css @@ -2,6 +2,7 @@ body { background-color: whitesmoke; font-family: Helvetica, Arial, sans-serif; } + .flex { display: flex; justify-content: center; @@ -19,6 +20,11 @@ body { justify-content: space-between; } +h1 { + width: 100%; + text-align: center; +} + img { width: 300px; max-width: 100%;