From 981b4a9427187d4a7fc8ec9a72218920a208d2bc Mon Sep 17 00:00:00 2001 From: Tomson Kan Date: Sun, 6 Oct 2019 09:31:17 -0500 Subject: [PATCH 1/2] intial upload Fetchpractice --- 07week/brew.css | 34 +++++++++++++++++++++++++++ 07week/brew.html | 43 ++++++++++++++++++++++++++++++++++ 07week/brew.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 138 insertions(+) create mode 100644 07week/brew.css create mode 100644 07week/brew.html create mode 100644 07week/brew.js diff --git a/07week/brew.css b/07week/brew.css new file mode 100644 index 000000000..bae2a69aa --- /dev/null +++ b/07week/brew.css @@ -0,0 +1,34 @@ +body, +#result { + padding: 50px; +} + +h2 { + margin: 15px 501px -100px; + padding: 12px +} + +ol li { + padding-bottom: 5px; +} + + + +input[type="text"] { + width: 350px; + margin: 150px 200px; + padding: 12px; + border: 1px solid #ccc; + border-radius: 4px; + resize: vertical; +} + +button { + background-color: #4caf50; + color: white; + margin: -186px ; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} \ No newline at end of file diff --git a/07week/brew.html b/07week/brew.html new file mode 100644 index 000000000..545e87575 --- /dev/null +++ b/07week/brew.html @@ -0,0 +1,43 @@ + + + + + + + + + + +

Breweries!

+
+ + +
+
+ + diff --git a/07week/brew.js b/07week/brew.js new file mode 100644 index 000000000..62c305c8f --- /dev/null +++ b/07week/brew.js @@ -0,0 +1,61 @@ +// GamepadButton.addEventListener('click', function grabVal() ) + + + +function getBrew() { + const proxy = "https://cors-anywhere.herokuapp.com/"; + const api = `https://sandbox-api.brewerydb.com/v2/beers/?key=5b3a1f0733ab1b492875ba0998e99a2a/?data=30` + fetch(proxy + api) + .then(function(response) { + return response.json() + console.log(response) + }) + .then(function(result) { + let output = + `

Breweries

` + result.data.forEach((function(brew){ + output += ` + + ` + })) + document.getElementById("demo").innerHTML = output; + }) +} + +// // This is to add the click feature on my button +// const button = document.querySelector('button'); +// const subInput = document.querySelector('input'); +// const result = document.querySelector('#result'); + +// function renderList(json) { +// const posts = json.data.children; +// return `
    +// ${posts.data( +// post => `
  1. ${post.data.title} Link
    2. ` +// ).join('')} +//
`; +// } + +// async function fetchTopFive(sub) { +// const URL = `https://sandbox-api.brewerydb.com/v2/beers/?key=5b3a1f0733ab1b492875ba0998e99a2a`; +// try { +// const fetchResult = fetch(new Request(URL, { method: 'GET', cache: 'reload' })); +// const response = await fetchResult; +// if (response.ok) { +// const jsonData = await response.json(); +// result.innerHTML = renderList(jsonData); +// } else { +// result.innerHTML = `Response.status: ${response.status}`; +// } +// } catch (e) { +// result.innerHTML = e; +// } +// } + +// button.addEventListener('click', () => { +// fetchTopFive(subInput.value); +// }); From b40eade93950bf3060255d6d9b4898d663ad403d Mon Sep 17 00:00:00 2001 From: Tomson Kan Date: Sun, 6 Oct 2019 12:33:52 -0500 Subject: [PATCH 2/2] Final API Fetch project --- 07week/brew.css | 2 +- 07week/brew.html | 30 ++--------------------- 07week/brew.js | 64 ++++++++++++++++-------------------------------- 3 files changed, 24 insertions(+), 72 deletions(-) diff --git a/07week/brew.css b/07week/brew.css index bae2a69aa..84aed0a88 100644 --- a/07week/brew.css +++ b/07week/brew.css @@ -4,7 +4,7 @@ body, } h2 { - margin: 15px 501px -100px; + margin: 15px 401px -100px; padding: 12px } diff --git a/07week/brew.html b/07week/brew.html index 545e87575..40a62b2c4 100644 --- a/07week/brew.html +++ b/07week/brew.html @@ -1,29 +1,3 @@ - @@ -33,9 +7,9 @@

Brewery

-

Breweries!

+

Beer choice!

- +
diff --git a/07week/brew.js b/07week/brew.js index 62c305c8f..6360a153f 100644 --- a/07week/brew.js +++ b/07week/brew.js @@ -1,61 +1,39 @@ -// GamepadButton.addEventListener('click', function grabVal() ) +var getSearchText; +function keyup(searchText) { + //setting your input text to the global Javascript Variable for every key press + console.log(searchText) + return getSearchText = searchText; + + //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box + // if (e.keyCode == 13) { + // window.location = "http://www.myurl.com/search/" + inputTextValue; + // } +} function getBrew() { - const proxy = "https://cors-anywhere.herokuapp.com/"; - const api = `https://sandbox-api.brewerydb.com/v2/beers/?key=5b3a1f0733ab1b492875ba0998e99a2a/?data=30` - fetch(proxy + api) + // const proxy = "https://cors-anywhere.herokuapp.com/"; + // const enterTxt = + const api = `http://api.punkapi.com/v2/beers?beer_name=${getSearchText}` + fetch(api) .then(function(response) { return response.json() console.log(response) }) .then(function(result) { + console.log('result', result) let output = - `

Breweries

` - result.data.forEach((function(brew){ + `

` + result.forEach((function(brew){ output += ` ` })) document.getElementById("demo").innerHTML = output; }) } - -// // This is to add the click feature on my button -// const button = document.querySelector('button'); -// const subInput = document.querySelector('input'); -// const result = document.querySelector('#result'); - -// function renderList(json) { -// const posts = json.data.children; -// return `
    -// ${posts.data( -// post => `
  1. ${post.data.title} Link
    2. ` -// ).join('')} -//
`; -// } - -// async function fetchTopFive(sub) { -// const URL = `https://sandbox-api.brewerydb.com/v2/beers/?key=5b3a1f0733ab1b492875ba0998e99a2a`; -// try { -// const fetchResult = fetch(new Request(URL, { method: 'GET', cache: 'reload' })); -// const response = await fetchResult; -// if (response.ok) { -// const jsonData = await response.json(); -// result.innerHTML = renderList(jsonData); -// } else { -// result.innerHTML = `Response.status: ${response.status}`; -// } -// } catch (e) { -// result.innerHTML = e; -// } -// } - -// button.addEventListener('click', () => { -// fetchTopFive(subInput.value); -// });