From f90fda9e2d7678014a03eff51fd41d5b591d6c23 Mon Sep 17 00:00:00 2001 From: JOANNABUUMA Date: Fri, 12 Apr 2024 18:25:34 +0100 Subject: [PATCH 1/3] Brewery-tours-challenge --- .gitignore | 2 + .vscode/settings.json | 5 ++ db.json | 22 +++++ index.html | 114 ++++++++++++++++---------- index.js | 186 ++++++++++++++++++++++++++++++++++++++++++ package.json | 22 +++++ styles/index.css | 35 +++++++- 7 files changed, 341 insertions(+), 45 deletions(-) create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 db.json create mode 100644 index.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..d5f19d89 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a55761cc --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "liveServer.settings.ignoreFiles": [ + "**/*.json" + ] +} \ No newline at end of file diff --git a/db.json b/db.json new file mode 100644 index 00000000..da8432b1 --- /dev/null +++ b/db.json @@ -0,0 +1,22 @@ +{ + "breweries": [ + { + "id": "5128df48-79fc-4f0f-8b52-d06be54d0cec", + "name": "(405) Brewing Co", + "brewery_type": "micro", + "address_1": "1716 Topeka St", + "address_2": null, + "address_3": null, + "city": "Norman", + "state_province": "Oklahoma", + "postal_code": "73069-8224", + "country": "United States", + "longitude": "-97.46818222", + "latitude": "35.25738891", + "phone": "4058160490", + "website_url": "http://www.405brewing.com", + "state": "Oklahoma", + "street": "1716 Topeka St" + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html index 08b9f3fe..483e097f 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,79 @@ - + - - - - - - - Brewery Tours - - -
-
-

Welcome to Brewery Tours

-
- - - -
-
+ + + + + + + + + Brewery Tours + + + +
+
+

Welcome to Brewery Tours

+
+ + + +
+
+
+
+ +

List of Breweries

+
+
+ + +
-
- -

List of Breweries

-
-
    - -
-
-
- - + + + + +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..fad0ae25 --- /dev/null +++ b/index.js @@ -0,0 +1,186 @@ +const BASE_URL = "https://api.openbrewerydb.org/v1/breweries/" +const LOCALHOST = "http://localhost:3000/breweries" +let store = { + currentPage: 0, + breweries: [], + cities: new Set(), + visited_breweries: [] +} + +const localhost_get = async () => { + let response = await fetch(`${LOCALHOST}/`) + if (response.status == 200) { + store.visited_breweries = await response.json() + } +} +const localhost_add = async id => { + let payload = store.breweries.find(brewery => brewery.id === id) + const options = { + method: "POST", + body: JSON.stringify(payload), + headers: { "Content-Type": "application/json" } + } + let response = await fetch(`${LOCALHOST}`, options) + if (response.status == 200) { + console.log(await response.json()) + } + await localhost_get() + render() +} +const localhost_remove = async id => { + const options = { + method: "DELETE", + headers: { "Content-Type": "application/json" } + } + const response = await fetch(`${LOCALHOST}/${id}`, options) + if (response.status == 200) { } + await localhost_get() + render() +} + +const clearStore = () => { + store.breweries = [] + store.cities.clear() +} + +const getBreweries = async (limit, page, query, state, city, type) => { + let response = await fetch(`${BASE_URL}` + + `${query != undefined ? `search?query=${query}` : ``}` + + `${limit != undefined ? `?per_page=${limit}` : ``}` + + `${page != undefined ? `&page=${page}` : ``}` + + `${state != undefined ? `&by_state=${state}` : ``}` + + `${city != undefined ? `&by_city=${city}` : ``}` + + `${type != undefined ? `&by_type=${type}` : ``}`) + + if (response.status == 200) { + store.breweries = [] + store.breweries = (await response.json()).filter(brewery => brewery.brewery_type === 'micro' || brewery.brewery_type === 'regional' || brewery.brewery_type === 'brewpub') + store.breweries.forEach(brewery => store.cities.add(brewery.city)); + store.currentPage = page + } +} + +let city_filter = [] +const handleCheckCity = (event, city) => { + if (event.checked) { + city_filter.push(city) + } else { + city_filter.splice(city_filter.indexOf(city), 1) + } + city_filter.length > 0 ? renderBreweries(store.breweries.filter(brewery => city_filter.includes(brewery.city))) : renderBreweries(store.breweries) +} + +const renderBreweries = (breweries) => { + let brewery_list = document.getElementById("breweries-list") + brewery_list.innerHTML = '' + breweries.forEach(brewery => { + let brewey_list_item = document.createElement("li") + brewey_list_item.innerHTML = ` +

${brewery.name}

+
${brewery.brewery_type}
+
+

Address:

+

${brewery.street}

+

${brewery.city}, ${brewery.postal_code}

+

+ +

+
+
+

Phone:

+

${brewery.phone}

+
+
+ Visit Website +
+ ` + brewery_list.append(brewey_list_item) + }) +} + +const renderCityFilter = (cities) => { + let city_filter_form = document.getElementById("filter-by-city-form") + city_filter_form.innerHTML = '' + cities.forEach(city => { + city_filter_form.innerHTML += ` + + + ` + }) +} + +const renderPagination = currentPage => { + document.getElementById("page-current").innerText = store.currentPage + document.getElementById("page-prev").onclick = async event => { + if (store.currentPage == 1) + return + + clearStore() + store.currentPage -= 1 + await getBreweries(10, store.currentPage) + render() + } + document.getElementById("page-next").onclick = async event => { + clearStore() + store.currentPage += 1 + await getBreweries(10, store.currentPage) + render() + } +} + +const renderVisitBreweries = breweries => { + let visit_brewery_list = document.getElementById("visit-breweries-list") + visit_brewery_list.innerHTML = '' + breweries.forEach(brewery => { + let visit_brewey_list_item = document.createElement("li") + visit_brewey_list_item.innerHTML = ` +

${brewery.name}

+ + ` + visit_brewery_list.append(visit_brewey_list_item) + }) +} + +const render = () => { + renderBreweries(store.breweries) + renderCityFilter(store.cities) + renderPagination(store.currentPage) + renderVisitBreweries(store.visited_breweries) +} + +document.addEventListener("DOMContentLoaded", async function () { + + document.getElementById("select-state-form").onsubmit = async event => { + event.preventDefault() + let state = event.target.elements["select-state"].value + clearStore() + await getBreweries(10, 1, undefined, state) + render(); + } + + document.getElementById("search-breweries").onkeyup = async event => { + event.preventDefault() + let query = event.target.value + clearStore() + await getBreweries(undefined, undefined, query) + render(); + } + + document.getElementById("filter-by-type-form").onchange = async event => { + let filter_brewery_type = event.target.value + renderBreweries(store.breweries.filter(brewery => brewery.brewery_type === filter_brewery_type)) + } + + document.getElementsByClassName("clear-all-btn")[0].onclick = event => { + let collection = document.getElementsByClassName("city_filter") + for (let i = 0; i < collection.length; i++) { + collection[i].checked = false + } + render() + } + + await getBreweries(10, 1) + await localhost_get() + render() + +}) \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..a69d32b9 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "js-dom-brewery-tours-challenge", + "version": "1.0.0", + "description": "![BreweryTours](images/brewery.jpg)", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/boolean-uk/js-dom-brewery-tours-challenge.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/boolean-uk/js-dom-brewery-tours-challenge/issues" + }, + "homepage": "https://github.com/boolean-uk/js-dom-brewery-tours-challenge#readme", + "dependencies": { + "json-server": "^1.0.0-alpha.23" + } +} diff --git a/styles/index.css b/styles/index.css index 3988f87e..ecf16296 100644 --- a/styles/index.css +++ b/styles/index.css @@ -40,13 +40,28 @@ body { main { display: grid; grid-template-areas: - "sidebar title" - "sidebar search-bar" - "sidebar article"; - grid-template-columns: 1fr 3fr; + "sidebar title right-sidebar" + "sidebar search-bar right-sidebar" + "sidebar article right-sidebar"; + grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto auto 1fr; } +.visit-section { + grid-area: right-sidebar; + + padding: 1rem 2rem 1rem 1rem; +} + +.visited-breweries-list li { + list-style-type: none; + padding: 1rem 2rem 1rem 2rem; + margin: 10px; + border-radius: 0.25rem; + border: 1px solid #000; + font-size: 14px; +} + .filters-section { grid-area: sidebar; @@ -228,3 +243,15 @@ article { text-decoration: none; font-weight: bold; } + +.pagination{ + display: block; + padding: 0.5rem 1rem; +} + +.pagination button { + border: none; + background-color: transparent; + text-decoration: underline blue; + cursor: pointer; +} \ No newline at end of file From 602958842524d430c5be16af249cb46cc9b61141 Mon Sep 17 00:00:00 2001 From: JOANNABUUMA1 Date: Tue, 7 May 2024 22:12:37 +0100 Subject: [PATCH 2/3] breweries challenge core and extensions --- db.json | 42 ++++++++++++----- index.js | 136 ++++++++++++++++++++++++++++++++++--------------------- 2 files changed, 115 insertions(+), 63 deletions(-) diff --git a/db.json b/db.json index da8432b1..bafeb863 100644 --- a/db.json +++ b/db.json @@ -1,22 +1,40 @@ { "breweries": [ { - "id": "5128df48-79fc-4f0f-8b52-d06be54d0cec", - "name": "(405) Brewing Co", + "id": "483666c9-df7b-48b6-a09e-9dc2c39ddd22", + "name": "Dialogue Brewing", "brewery_type": "micro", - "address_1": "1716 Topeka St", + "address_1": "1501 1st St NW", "address_2": null, "address_3": null, - "city": "Norman", - "state_province": "Oklahoma", - "postal_code": "73069-8224", + "city": "Albuquerque", + "state_province": "New Mexico", + "postal_code": "87102-1535", "country": "United States", - "longitude": "-97.46818222", - "latitude": "35.25738891", - "phone": "4058160490", - "website_url": "http://www.405brewing.com", - "state": "Oklahoma", - "street": "1716 Topeka St" + "longitude": "-106.6456104", + "latitude": "35.0976942", + "phone": "5055851501", + "website_url": "http://www.dialoguebrewing.com", + "state": "New Mexico", + "street": "1501 1st St NW" + }, + { + "id": "871b70be-e09e-4936-8b29-f92c0d2e2667", + "name": "Bonaventure Brewing Co", + "brewery_type": "brewpub", + "address_1": "404 S Figueroa St Ste 418A", + "address_2": null, + "address_3": null, + "city": "Los Angeles", + "state_province": "California", + "postal_code": "90071-1797", + "country": "United States", + "longitude": "-118.2562113", + "latitude": "34.05314634", + "phone": "2132360802", + "website_url": "http://www.bonaventurebrewing.com", + "state": "California", + "street": "404 S Figueroa St Ste 418A" } ] } \ No newline at end of file diff --git a/index.js b/index.js index fad0ae25..f195dac3 100644 --- a/index.js +++ b/index.js @@ -3,65 +3,100 @@ const LOCALHOST = "http://localhost:3000/breweries" let store = { currentPage: 0, breweries: [], - cities: new Set(), + cities: [], visited_breweries: [] } -const localhost_get = async () => { - let response = await fetch(`${LOCALHOST}/`) - if (response.status == 200) { - store.visited_breweries = await response.json() - } + +function localhost_get() { + fetch(`${LOCALHOST}`) + .then(response => response.json()) + .then(data => { + renderVisitBreweries(data) + }) } -const localhost_add = async id => { + +function localhost_add(id) { let payload = store.breweries.find(brewery => brewery.id === id) const options = { method: "POST", body: JSON.stringify(payload), headers: { "Content-Type": "application/json" } } - let response = await fetch(`${LOCALHOST}`, options) - if (response.status == 200) { - console.log(await response.json()) - } - await localhost_get() - render() -} -const localhost_remove = async id => { + + fetch(`${LOCALHOST}`, options) + .then(response => { + localhost_get() + }) +} + +function localhost_remove(id) { const options = { method: "DELETE", headers: { "Content-Type": "application/json" } } - const response = await fetch(`${LOCALHOST}/${id}`, options) - if (response.status == 200) { } - await localhost_get() - render() + + fetch(`${LOCALHOST}/${id}`, options) + .then(response => { + localhost_get() + }) } -const clearStore = () => { +function clearStore() { store.breweries = [] - store.cities.clear() -} - -const getBreweries = async (limit, page, query, state, city, type) => { - let response = await fetch(`${BASE_URL}` + - `${query != undefined ? `search?query=${query}` : ``}` + - `${limit != undefined ? `?per_page=${limit}` : ``}` + - `${page != undefined ? `&page=${page}` : ``}` + - `${state != undefined ? `&by_state=${state}` : ``}` + - `${city != undefined ? `&by_city=${city}` : ``}` + - `${type != undefined ? `&by_type=${type}` : ``}`) - - if (response.status == 200) { - store.breweries = [] - store.breweries = (await response.json()).filter(brewery => brewery.brewery_type === 'micro' || brewery.brewery_type === 'regional' || brewery.brewery_type === 'brewpub') - store.breweries.forEach(brewery => store.cities.add(brewery.city)); - store.currentPage = page - } + store.cities = [] + store.visited_breweries = [] +} + +function getBreweries(limit, page) { + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}`) + .then(response => response.json()) + .then(data => { + loadBreweries(data) + }) +} + +function getBreweriesByState(limit, page, state) { + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_state=${state}`) + .then(response => response.json()) + .then(data => { + loadBreweries(data) + }) +} + +function getBreweriesByCity(limit, page, city) { + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_city=${city}`) + .then(response => response.json()) + .then(data => { + loadBreweries(data) + }) +} + +function getBreweriesByType(limit, page, type) { + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_type=${type}`) + .then(response => response.json()) + .then(data => { + loadBreweries(data) + }) +} + +function searchBreweries(query) { + fetch(`${BASE_URL}` + `search?query=${query}`) + .then(response => response.json()) + .then(data => { + loadBreweries(data) + }) +} + +function loadBreweries(data) { + clearStore() + store.breweries = data.filter(brewery => brewery.brewery_type === 'micro' || brewery.brewery_type === 'regional' || brewery.brewery_type === 'brewpub') + store.breweries.forEach(brewery => store.cities.push(brewery.city)); + render() } let city_filter = [] -const handleCheckCity = (event, city) => { +function handleCheckCity(event, city) { if (event.checked) { city_filter.push(city) } else { @@ -70,7 +105,7 @@ const handleCheckCity = (event, city) => { city_filter.length > 0 ? renderBreweries(store.breweries.filter(brewery => city_filter.includes(brewery.city))) : renderBreweries(store.breweries) } -const renderBreweries = (breweries) => { +function renderBreweries(breweries) { let brewery_list = document.getElementById("breweries-list") brewery_list.innerHTML = '' breweries.forEach(brewery => { @@ -98,7 +133,7 @@ const renderBreweries = (breweries) => { }) } -const renderCityFilter = (cities) => { +function renderCityFilter(cities) { let city_filter_form = document.getElementById("filter-by-city-form") city_filter_form.innerHTML = '' cities.forEach(city => { @@ -109,7 +144,7 @@ const renderCityFilter = (cities) => { }) } -const renderPagination = currentPage => { +function renderPagination(currentPage) { document.getElementById("page-current").innerText = store.currentPage document.getElementById("page-prev").onclick = async event => { if (store.currentPage == 1) @@ -128,7 +163,8 @@ const renderPagination = currentPage => { } } -const renderVisitBreweries = breweries => { +function renderVisitBreweries(breweries) { + console.log(breweries) let visit_brewery_list = document.getElementById("visit-breweries-list") visit_brewery_list.innerHTML = '' breweries.forEach(brewery => { @@ -141,11 +177,10 @@ const renderVisitBreweries = breweries => { }) } -const render = () => { +function render() { renderBreweries(store.breweries) renderCityFilter(store.cities) renderPagination(store.currentPage) - renderVisitBreweries(store.visited_breweries) } document.addEventListener("DOMContentLoaded", async function () { @@ -154,7 +189,7 @@ document.addEventListener("DOMContentLoaded", async function () { event.preventDefault() let state = event.target.elements["select-state"].value clearStore() - await getBreweries(10, 1, undefined, state) + getBreweriesByState(10, 1, state) render(); } @@ -162,7 +197,7 @@ document.addEventListener("DOMContentLoaded", async function () { event.preventDefault() let query = event.target.value clearStore() - await getBreweries(undefined, undefined, query) + searchBreweries(query) render(); } @@ -179,8 +214,7 @@ document.addEventListener("DOMContentLoaded", async function () { render() } - await getBreweries(10, 1) - await localhost_get() - render() - + getBreweries(10, 1) + localhost_get() + }) \ No newline at end of file From 6e2b133720f5e413675feaf5fa30b80b0945a61f Mon Sep 17 00:00:00 2001 From: JOANNABUUMA1 Date: Thu, 9 May 2024 09:23:44 +0100 Subject: [PATCH 3/3] brewery tours challenge new version --- db.json | 36 +++---- index.js | 323 +++++++++++++++++++++++++++++-------------------------- 2 files changed, 186 insertions(+), 173 deletions(-) diff --git a/db.json b/db.json index bafeb863..6b470f7a 100644 --- a/db.json +++ b/db.json @@ -1,23 +1,5 @@ { "breweries": [ - { - "id": "483666c9-df7b-48b6-a09e-9dc2c39ddd22", - "name": "Dialogue Brewing", - "brewery_type": "micro", - "address_1": "1501 1st St NW", - "address_2": null, - "address_3": null, - "city": "Albuquerque", - "state_province": "New Mexico", - "postal_code": "87102-1535", - "country": "United States", - "longitude": "-106.6456104", - "latitude": "35.0976942", - "phone": "5055851501", - "website_url": "http://www.dialoguebrewing.com", - "state": "New Mexico", - "street": "1501 1st St NW" - }, { "id": "871b70be-e09e-4936-8b29-f92c0d2e2667", "name": "Bonaventure Brewing Co", @@ -35,6 +17,24 @@ "website_url": "http://www.bonaventurebrewing.com", "state": "California", "street": "404 S Figueroa St Ste 418A" + }, + { + "id": "950180bd-29c9-46b3-ad0c-e6f09799ec7f", + "name": "13 Below Brewery", + "brewery_type": "micro", + "address_1": "7391 Forbes Rd", + "address_2": null, + "address_3": null, + "city": "Cincinnati", + "state_province": "Ohio", + "postal_code": "45233-1013", + "country": "United States", + "longitude": "-84.70634815", + "latitude": "39.12639764", + "phone": "5139750613", + "website_url": "http://www.13belowbrewery.com", + "state": "Ohio", + "street": "7391 Forbes Rd" } ] } \ No newline at end of file diff --git a/index.js b/index.js index f195dac3..e3d2155f 100644 --- a/index.js +++ b/index.js @@ -1,116 +1,128 @@ -const BASE_URL = "https://api.openbrewerydb.org/v1/breweries/" -const LOCALHOST = "http://localhost:3000/breweries" +const BASE_URL = "https://api.openbrewerydb.org/v1/breweries/"; +const LOCALHOST = "http://localhost:3000/breweries"; let store = { - currentPage: 0, - breweries: [], - cities: [], - visited_breweries: [] -} - + currentPage: 0, + breweries: [], + cities: [], + visited_breweries: [], +}; function localhost_get() { - fetch(`${LOCALHOST}`) - .then(response => response.json()) - .then(data => { - renderVisitBreweries(data) - }) + fetch(`${LOCALHOST}`).then(async (response) => { + let data = await response.json(); + renderVisitBreweries(data); + }); } -function localhost_add(id) { - let payload = store.breweries.find(brewery => brewery.id === id) - const options = { - method: "POST", - body: JSON.stringify(payload), - headers: { "Content-Type": "application/json" } - } +function localhost_add(event, id) { + event.preventDefault(); + let payload = store.breweries.find((brewery) => brewery.id === id); + const options = { + method: "POST", + body: JSON.stringify(payload), + headers: { "Content-Type": "application/json" }, + }; - fetch(`${LOCALHOST}`, options) - .then(response => { - localhost_get() - }) + fetch(`${LOCALHOST}`, options).then((response) => { + localhost_get(); + }); } -function localhost_remove(id) { - const options = { - method: "DELETE", - headers: { "Content-Type": "application/json" } - } +function localhost_remove(event, id) { + event.preventDefault(); + const options = { + method: "DELETE", + headers: { "Content-Type": "application/json" }, + }; - fetch(`${LOCALHOST}/${id}`, options) - .then(response => { - localhost_get() - }) + fetch(`${LOCALHOST}/${id}`, options).then((response) => { + localhost_get(); + }); } function clearStore() { - store.breweries = [] - store.cities = [] - store.visited_breweries = [] + store.breweries = []; + store.cities = []; + store.visited_breweries = []; } function getBreweries(limit, page) { - fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}`) - .then(response => response.json()) - .then(data => { - loadBreweries(data) - }) + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}`).then( + async (response) => { + let data = await response.json(); + loadBreweries(data); + } + ); } function getBreweriesByState(limit, page, state) { - fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_state=${state}`) - .then(response => response.json()) - .then(data => { - loadBreweries(data) - }) -} - -function getBreweriesByCity(limit, page, city) { - fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_city=${city}`) - .then(response => response.json()) - .then(data => { - loadBreweries(data) - }) -} - -function getBreweriesByType(limit, page, type) { - fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}` + `&by_type=${type}`) - .then(response => response.json()) - .then(data => { - loadBreweries(data) - }) + fetch( + `${BASE_URL}` + + `?per_page=${limit}` + + `&page=${page}` + + `&by_state=${state}` + ).then(async (response) => { + let data = await response.json(); + loadBreweries(data); + }); } function searchBreweries(query) { - fetch(`${BASE_URL}` + `search?query=${query}`) - .then(response => response.json()) - .then(data => { - loadBreweries(data) - }) + fetch(`${BASE_URL}` + `search?query=${query}`).then(async (response) => { + let data = await response.json(); + loadBreweries(data); + }); } function loadBreweries(data) { - clearStore() - store.breweries = data.filter(brewery => brewery.brewery_type === 'micro' || brewery.brewery_type === 'regional' || brewery.brewery_type === 'brewpub') - store.breweries.forEach(brewery => store.cities.push(brewery.city)); - render() -} + clearStore(); + for (let i = 0; i < data.length; i++) { + if ( + data[i].brewery_type === "micro" || + data[i].brewery_type === "regional" || + data[i].brewery_type === "brewpub" + ) { + store.breweries.push(data[i]); + } + } -let city_filter = [] -function handleCheckCity(event, city) { - if (event.checked) { - city_filter.push(city) - } else { - city_filter.splice(city_filter.indexOf(city), 1) + for (let i = 0; i < store.breweries.length; i++) { + if (!store.cities.includes(store.breweries[i].city)) { + store.cities.push(store.breweries[i].city); + } + } + render(); +} + +let city_filter = []; +function handleCheckCity(event) { + let city = event.target.value; + if (event.target.checked) { + city_filter.push(city); + } else { + city_filter.splice(city_filter.indexOf(city), 1); + } + + console.log(city_filter); + if (city_filter.length > 0) { + let filtered_breweries = []; + for (let i = 0; i < store.breweries.length; i++) { + if (city_filter.includes(store.breweries[i].city)) { + filtered_breweries.push(store.breweries[i]); + } } - city_filter.length > 0 ? renderBreweries(store.breweries.filter(brewery => city_filter.includes(brewery.city))) : renderBreweries(store.breweries) + renderBreweries(filtered_breweries); + } else { + renderBreweries(store.breweries); + } } function renderBreweries(breweries) { - let brewery_list = document.getElementById("breweries-list") - brewery_list.innerHTML = '' - breweries.forEach(brewery => { - let brewey_list_item = document.createElement("li") - brewey_list_item.innerHTML = ` + let brewery_list = document.getElementById("breweries-list"); + brewery_list.innerHTML = ""; + breweries.forEach((brewery) => { + let brewey_list_item = document.createElement("li"); + brewey_list_item.innerHTML = `

${brewery.name}

${brewery.brewery_type}
@@ -118,7 +130,7 @@ function renderBreweries(breweries) {

${brewery.street}

${brewery.city}, ${brewery.postal_code}

- +

@@ -128,93 +140,94 @@ function renderBreweries(breweries) {
Visit Website
- ` - brewery_list.append(brewey_list_item) - }) + `; + brewery_list.append(brewey_list_item); + }); } function renderCityFilter(cities) { - let city_filter_form = document.getElementById("filter-by-city-form") - city_filter_form.innerHTML = '' - cities.forEach(city => { - city_filter_form.innerHTML += ` - - - ` - }) + let city_filter_form = document.getElementById("filter-by-city-form"); + city_filter_form.innerHTML = ""; + cities.forEach((city) => { + city_filter_form.innerHTML += ` + + `; + }); } function renderPagination(currentPage) { - document.getElementById("page-current").innerText = store.currentPage - document.getElementById("page-prev").onclick = async event => { - if (store.currentPage == 1) - return - - clearStore() - store.currentPage -= 1 - await getBreweries(10, store.currentPage) - render() - } - document.getElementById("page-next").onclick = async event => { - clearStore() - store.currentPage += 1 - await getBreweries(10, store.currentPage) - render() - } + document.getElementById("page-current").innerText = store.currentPage; + document.getElementById("page-prev").onclick = async (event) => { + if (store.currentPage <= 1) return; + + clearStore(); + store.currentPage -= 1; + await getBreweries(10, store.currentPage); + render(); + }; + document.getElementById("page-next").onclick = async (event) => { + clearStore(); + store.currentPage += 1; + await getBreweries(10, store.currentPage); + render(); + }; } function renderVisitBreweries(breweries) { - console.log(breweries) - let visit_brewery_list = document.getElementById("visit-breweries-list") - visit_brewery_list.innerHTML = '' - breweries.forEach(brewery => { - let visit_brewey_list_item = document.createElement("li") - visit_brewey_list_item.innerHTML = ` + let visit_brewery_list = document.getElementById("visit-breweries-list"); + visit_brewery_list.innerHTML = ""; + breweries.forEach((brewery) => { + let visit_brewey_list_item = document.createElement("li"); + visit_brewey_list_item.innerHTML = `

${brewery.name}

- - ` - visit_brewery_list.append(visit_brewey_list_item) - }) + + `; + visit_brewery_list.append(visit_brewey_list_item); + }); } function render() { - renderBreweries(store.breweries) - renderCityFilter(store.cities) - renderPagination(store.currentPage) + renderBreweries(store.breweries); + renderCityFilter(store.cities); + renderPagination(store.currentPage); } document.addEventListener("DOMContentLoaded", async function () { - - document.getElementById("select-state-form").onsubmit = async event => { - event.preventDefault() - let state = event.target.elements["select-state"].value - clearStore() - getBreweriesByState(10, 1, state) - render(); - } - - document.getElementById("search-breweries").onkeyup = async event => { - event.preventDefault() - let query = event.target.value - clearStore() - searchBreweries(query) - render(); - } - - document.getElementById("filter-by-type-form").onchange = async event => { - let filter_brewery_type = event.target.value - renderBreweries(store.breweries.filter(brewery => brewery.brewery_type === filter_brewery_type)) + document.getElementById("select-state-form").onsubmit = async (event) => { + event.preventDefault(); + let state = event.target.elements["select-state"].value; + clearStore(); + getBreweriesByState(10, 1, state); + render(); + }; + + document.getElementById("search-breweries").onkeyup = async (event) => { + event.preventDefault(); + let query = event.target.value; + clearStore(); + searchBreweries(query); + render(); + }; + + document.getElementById("filter-by-type-form").onchange = async (event) => { + let filter_brewery_type = event.target.value; + let filtered_by_type_breweries = []; + for (let i = 0; i < store.breweries.length; i++) { + if (store.breweries[i].brewery_type === filter_brewery_type) { + filtered_by_type_breweries.push(store.breweries[i]); + } } + renderBreweries(filtered_by_type_breweries); + }; - document.getElementsByClassName("clear-all-btn")[0].onclick = event => { - let collection = document.getElementsByClassName("city_filter") - for (let i = 0; i < collection.length; i++) { - collection[i].checked = false - } - render() + document.getElementsByClassName("clear-all-btn")[0].onclick = (event) => { + let collection = document.getElementsByClassName("city_filter"); + for (let i = 0; i < collection.length; i++) { + collection[i].checked = false; } + render(); + }; - getBreweries(10, 1) - localhost_get() - -}) \ No newline at end of file + localhost_get(); + render(); +});