boolean-uk · Sabbasn · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles/reset.css" />
     <link rel="stylesheet" href="styles/index.css" />
+    <script defer src="src/index.js" type="module"></script>
+    <script defer src="src/api/breweryAPI.js" type="module"></script>
     <title>Brewery Tours</title>
   </head>
   <body>
@@ -28,14 +30,31 @@ <h2>Filter By:</h2>
             <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="contract">Contract</option>
               <option value="brewpub">Brewpub</option>
+              <option value="planning">Planning</option>
+              <option value="closed">Closed</option>
+              <option value="nano">Nano</option>
+              <option value="regional">Regional</option>
             </select>
           </form>
+          <div class="filter-by-city-heading">
+            <h3>Cities</h3>
+            <button id="filter-by-city-clear-all-btn" class="clear-all-btn">
+              clear all
+            </button>
+          </div>
+          <form id="filter-by-city-form"></form>
         </aside>
       </aside>
       <h1>List of Breweries</h1>
-      <article>
+      <header class="search-bar">
+        <form id="search-breweries-form" autocomplete="off">
+          <label for="search-breweries"><h2>Search breweries:</h2></label>
+          <input id="search-breweries" name="search-breweries" type="text" />
+        </form>
+      </header>
+      <article id="breweries-list-article">
         <ul id="breweries-list" class="breweries-list">
           <!--
           For each brewery returned in the search, 
@@ -45,6 +64,5 @@ <h1>List of Breweries</h1>
         </ul>
       </article>
     </main>
-    <script src="index.js"></script>
   </body>
 </html>
diff --git a/src/api/breweryAPI.js b/src/api/breweryAPI.js
@@ -0,0 +1,7 @@
+export const getBreweriesByState = async (state) => {
+  const response = fetch(
+    `https://api.openbrewerydb.org/breweries?by_state=${state}`
+  );
+  const json = (await response).json();
+  return json;
+};
diff --git a/src/breweries.js b/src/breweries.js
@@ -0,0 +1,59 @@
+/**
+ *
+ * @param {Array} breweries
+ */
+export default function renderBreweries(breweries, rerender = true) {
+  const breweriesListElement = document.getElementById("breweries-list");
+  breweriesListElement.innerHTML = "";
+  breweries.forEach((brewery) => {
+    const container = document.createElement("li");
+    container.innerHTML = `
+    <h2>${brewery.name}</h2>
+    <div class="type">${brewery.brewery_type}</div>
+    <section class="address">
+      <h3>Address:</h3>
+      <p>${brewery.street || "N/A"}</p>
+      <p><strong>${brewery.city}, ${brewery.postal_code}</strong></p>
+    </section>
+    <section class="phone">
+      <h3>Phone:</h3>
+      <p>${brewery.phone}</p>
+    </section>
+    <section class="link">
+      <a href="${brewery.website_url}" target="_blank">Visit Website</a>
+    </section>
+  `;
+    breweriesListElement.appendChild(container);
+  });
+  if (rerender === true) {
+    renderFilterCitiesForm(breweries);
+  }
+}
+
+/**
+ *
+ * @param {Array} breweries
+ */
+function renderFilterCitiesForm(breweries) {
+  const filterCitiesForm = document.getElementById("filter-by-city-form");
+  filterCitiesForm.innerHTML = "";
+  const filterSections = [];
+  breweries.forEach((brewery) => {
+    if (!filterSections.includes(brewery.city)) {
+      filterSections.push(brewery.city);
+    }
+  });
+  filterSections.forEach((city) => {
+    const cityInput = document.createElement("input");
+    cityInput.type = "checkbox";
+    cityInput.name = city;
+    cityInput.value = city;
+
+    const cityLabel = document.createElement("label");
+    cityLabel.htmlFor = city;
+    cityLabel.innerText = city;
+
+    filterCitiesForm.appendChild(cityInput);
+    filterCitiesForm.appendChild(cityLabel);
+  });
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,59 @@
+import { getBreweriesByState } from "./api/BreweryAPI.js";
+import renderBreweries from "./breweries.js";
+
+const selectStateFormElement = document.getElementById("select-state-form");
+const selectStateInputElement = document.getElementById("select-state");
+
+let currentBreweries = [];
+
+selectStateFormElement.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const value = selectStateInputElement.value;
+  filterByTypeElement.value = "";
+  currentBreweries = await getBreweriesByState(value);
+  renderBreweries(currentBreweries);
+});
+
+const filterByTypeElement = document.getElementById("filter-by-type");
+filterByTypeElement.addEventListener("change", () => {
+  const value = filterByTypeElement.value;
+  const filtered = currentBreweries.filter((x) => x.brewery_type === value);
+  renderBreweries(filtered);
+});
+
+const searchByNameElement = document.getElementById("search-breweries");
+searchByNameElement.addEventListener("input", () => {
+  const value = searchByNameElement.value;
+  const filtered = currentBreweries.filter((x) => x.name.includes(value));
+  renderBreweries(filtered);
+});
+
+const filterByCityFormElement = document.getElementById("filter-by-city-form");
+filterByCityFormElement.addEventListener("change", () => {
+  const cityElements = document.querySelectorAll(
+    "input[type=checkbox]:checked"
+  );
+  const cities = [];
+  cityElements.forEach((cityElement) => {
+    cities.push(cityElement.value);
+  });
+  const filtered = currentBreweries.filter((x) => cities.includes(x.city));
+  if (filtered.length === 0) {
+    renderBreweries(currentBreweries, false);
+    return;
+  }
+  renderBreweries(filtered, false);
+});
+
+const filterByCityClearAllButton = document.getElementById(
+  "filter-by-city-clear-all-btn"
+);
+filterByCityClearAllButton.addEventListener("click", () => {
+  const cityElements = document.querySelectorAll(
+    "input[type=checkbox]:checked"
+  );
+  cityElements.forEach((x) => {
+    x.checked = false;
+  });
+  renderBreweries(currentBreweries, false);
+});