boolean-uk · tzoltie · Apr 8, 2024 · Apr 9, 2024 · Apr 9, 2024 · Apr 9, 2024
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="./styles/reset.css" />
     <link rel="stylesheet" href="./styles/index.css" />
     <title>Brewery Tours</title>
+    <script defer src="index.js"></script>
   </head>
   <body>
     <header class="main-header">
@@ -27,14 +28,27 @@ <h2>Filter By:</h2>
             <label for="filter-by-type"><h3>Type of Brewery</h3></label>
             <select name="filter-by-type" id="filter-by-type">
               <option value="">Select a type...</option>
-              <option value="micro">Micro</option>
-              <option value="regional">Regional</option>
-              <option value="brewpub">Brewpub</option>
+              <option id="micro" value="micro">Micro</option>
+              <option id="regional" value="regional">Regional</option>
+              <option id="brewpub" value="brewpub">Brewpub</option>
             </select>
           </form>
+
+          <form id="filter-cities-form">
+            <div id="filter-cities-header-container">
+              <label for="filter-by-city"><h3>Cities</h3></label>
+              <label class="clear-all-btn"><button>Clear all</button></label>
+            </div>
+            <ul id="filter-by-city"></ul>
+
+          </form>
         </aside>
       </aside>
       <h1>List of Breweries</h1>
+      <form id="search-breweries-form" autocomplete="off">
+        <label for="search-breweries">Search breweries:</label>
+        <input id="search-breweries" name="search-breweries" type="text">
+      </form>
       <article>
         <ul id="breweries-list" class="breweries-list">
           <!--

diff --git a/index.js b/index.js
@@ -0,0 +1,191 @@
+const selectStateForm = document.querySelector('#select-state-form')
+const selectStateSearch = document.querySelector('#select-state')
+const filterByTypeForm = document.querySelector('#filter-by-type-form')
+const filterByBreweryElement = document.querySelector('#filter-by-type')
+const breweriesList = document.querySelector('#breweries-list')
+const brewerySearchForm = document.querySelector('#search-breweries-form')
+const brewerySearchElement = document.querySelector('#search-breweries')
+const filterByCityForm = document.querySelector('#filter-cities-form')
+const filterByCitySection = document.querySelector('#filter-by-city')
+
+const url = 'https://api.openbrewerydb.org/v1/breweries'
+
+let breweries = []
+const cities = []
+
+fetch(url)
+    .then(response => response.json())
+    .then(json => {loadBreweries(json)})
+
+
+function loadBreweries(json) {
+    const filterBreweries = json.filter(brewery =>
+        brewery.brewery_type === "micro" ||
+        brewery.brewery_type === "brewpub" ||
+        brewery.brewery_type === "regional"
+    )
+    breweries = structuredClone(filterBreweries)
+
+    createEachListItem()
+}
+
+function createEachListItem() {
+    breweries.forEach(brewery => renderBrewery(brewery))
+}
+
+
+function renderBrewery(brewery) {
+
+    const listItem = document.createElement('li')
+
+    const breweryName = document.createElement('h2')
+    breweryName.innerText = brewery.name
+    listItem.append(breweryName)
+
+    const breweryType = document.createElement('div')
+    breweryType.classList.add('type')
+    breweryType.innerText = brewery.brewery_type
+    listItem.append(breweryType)
+
+    const addressSection = document.createElement('section')
+    addressSection.classList.add('address')
+    const h3Address = document.createElement('h3')
+    h3Address.innerText = 'Address:'
+    addressSection.append(h3Address)
+    const streetAddress = document.createElement('p')
+    streetAddress.innerText = brewery.street
+    addressSection.append(streetAddress)
+    const cityPostcode = document.createElement('p')
+    const boldText = document.createElement('strong')
+    boldText.innerText = `${brewery.city}, ${brewery.postal_code}`
+    cityPostcode.append(boldText)
+    addressSection.append(cityPostcode)
+    listItem.append(addressSection)
+
+    const phoneSection = document.createElement('section')
+    phoneSection.classList.add('phone')
+    const h3Phone = document.createElement('h3')
+    h3Phone.innerText = 'Phone:'
+    phoneSection.append(h3Phone)
+    const phoneNumber = document.createElement('p')
+    phoneNumber.innerText = brewery.phone
+    phoneSection.append(phoneNumber)
+    listItem.append(phoneSection)
+
+    const linkSection = document.createElement('section')
+    linkSection.classList.add('link')
+    const websiteLink = document.createElement('a')
+    websiteLink.href = brewery.website_url
+    websiteLink.target = '_blank'
+    websiteLink.innerText = 'Visit Website'
+    linkSection.append(websiteLink)
+    listItem.append(linkSection)
+
+    breweriesList.append(listItem)
+}
+
+
+filterByBreweryElement.addEventListener('change', (event) => {filterSelection(event)})
+
+function filterSelection(event) {
+    event.preventDefault()
+    const userSelection = event.target.value
+
+    const filterBreweries = breweries.filter(brewery => brewery.brewery_type === userSelection)
+    breweriesList.innerHTML = ''
+    filterBreweries.forEach(brewery => renderBrewery(brewery))
+}
+
+
+selectStateForm.addEventListener('submit', (event) => {filterStates(event)})
+
+function filterStates(event) {
+    event.preventDefault()
+    const userSearch = selectStateSearch.value
+
+    fetch(`https://api.openbrewerydb.org/breweries?by_state=${userSearch}`)
+        .then(response => response.json())
+        .then(json => {breweriesList.innerHTML = '', json.forEach(brewery => renderBrewery(brewery))})
+}
+
+brewerySearchElement.addEventListener('input', (event) => searchBrewery(event))
+
+
+function searchBrewery(event) {
+    event.preventDefault()
+    const userSearch = brewerySearchElement.value
+    fetch(`https://api.openbrewerydb.org/breweries?by_name=${userSearch}`)
+        .then(response => response.json())
+        .then(json => {breweriesList.innerHTML = '', json.forEach(brewery => renderBrewery(brewery))})
+}
+
+
+function listCities() {
+    fetch(url)
+        .then(response => response.json())
+        .then(brewery => {filterCities(brewery)})
+}
+listCities()
+
+
+function filterCities(brewery) {
+    const filterCitiesFromAPI = brewery.map(brewery => brewery.city)
+    removeDuplicates(filterCitiesFromAPI)
+    function removeDuplicates(filterCitiesFromAPI) {
+        return filterCitiesFromAPI.filter((city, index) => filterCitiesFromAPI.indexOf(city) === index)
+    }
+    removeDuplicates(filterCitiesFromAPI).forEach(brewery => createCitiesForFilter(brewery))
+}
+
+
+
+function createCitiesForFilter(brewery) {
+    const listItem = document.createElement('li')
+    const label = document.createElement('label')
+    label.innerText = brewery
+    const input = document.createElement('input')
+    input.type = 'checkbox'
+    input.classList.add('city-option')
+
+    label.append(input)
+    listItem.append(label)
+    filterByCitySection.append(listItem)
+    filterByCityForm.append(filterByCitySection)
+
+    label.addEventListener('change', () => {label.checked = !label.checked, citiesCheckedByUser()})
+
+    function citiesCheckedByUser() {
+        breweriesList.innerHTML = ''
+        const cityChecked = label.innerText
+        cities.push(cityChecked)
+        console.log(cities)
+        for(let i = 0; i < cities.length; i++) {
+            fetch(`https://api.openbrewerydb.org/breweries?by_city=${cities[i]}`)
+            .then(response => response.json())
+            .then(brewery => {brewery.forEach(brewery => renderBrewery(brewery))})
+        }
+
+    }
+}
+
+const clearAllBtn = document.querySelector('.clear-all-btn')
+clearAllBtn.addEventListener('click', (event) => {clearAll(event)})
+
+function clearAll(event) {
+    event.preventDefault()
+    cities.splice(cities)
+    filterByCitySection.innerHTML = ''
+    listCities()
+    breweriesList.innerHTML = ''
+    createEachListItem()
+}
+
+
+function errorMessage() {
+    const listItem = document.createElement('li')
+    const breweryName = document.createElement('h2')
+    breweryName.innerText = 'Oops, sorry, no brewery matching your search request'
+    listItem.append(breweryName)
+    breweriesList.innerHTML = ''
+    breweriesList.append(listItem)
+}
diff --git a/styles/index.css b/styles/index.css
@@ -25,15 +25,20 @@ body {
   text-align: center;
 }
 
-#select-state-form label {
+#search-breweries-form {
+  margin-left: 1rem;
+
+}
+
+#select-state-form label, #search-breweries-form label {
   display: block;
   margin-bottom: 0.25rem;
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
 }
 
-#select-state-form input {
+#select-state-form input, #search-breweries-form input {
   border-radius: 0.25rem;
 }
 
@@ -83,9 +88,10 @@ main {
 
   text-decoration: underline;
   font-size: 0.725rem;
+  justify-self: end;
 }
 
-#filter-by-type-form {
+#filter-by-type-form, #filter-cities-form {
   padding: 1rem;
 
   display: grid;
@@ -100,18 +106,24 @@ main {
   font-weight: bold;
 }
 
-#filter-by-city-form {
-  padding: 1rem;
+#filter-cities-header-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+}
+
+
+#filter-by-city {
 
   display: grid;
-  grid-template-columns: 24px auto;
+  grid-template-rows: 24px auto;
   align-items: center;
-
+  list-style: none;
   border-radius: 0 0 0.25rem 0.25rem;
-  border: 1px solid #000;
   border-top: none;
 }
 
+
 h1 {
   grid-area: title;