diff --git a/public/index.html b/public/index.html index f89dd7a..dd51865 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,11 @@ +

Products Available:

+ + diff --git a/public/index.js b/public/index.js index 6515a73..e7087de 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,33 @@ //stuff -//more stuff \ No newline at end of file +//more stuff +'use strict' +let arrayOfBreweries +let arrayOfPosts +console.log("working!") + +const getProducts = () =>{ + fetch('https://my-json-server.typicode.com/jubs16/Products/Products') + .then(res => res.json()) + .then(posts => arrayOfPosts = posts) + console.log(arrayOfPosts) +} +const button = document.getElementById("clickButton") +clickButton.addEventListener('click', function(){ + console.log("Clicked") + getProducts() + console.log(arrayOfPosts) + for(let i =0; i < arrayOfPosts.length; i++){ + console.log(arrayOfPosts[i].name) + let li = document.createElement("li") + let img = document.createElement("img") + img.src = arrayOfPosts[i].imgUrl + img.height = '200' + console.log(arrayOfPosts[i].imgURL) + li.innerHTML = `${arrayOfPosts[i].name} costs $${arrayOfPosts[i].price} and looks like : ` + let ul = document.getElementById("productList") + li.appendChild(img) + ul.appendChild(li) + } +}) + +