diff --git a/Existing_API_Collection/Brewery_API/README.md b/Existing_API_Collection/Brewery_API/README.md new file mode 100644 index 0000000..bd5d065 --- /dev/null +++ b/Existing_API_Collection/Brewery_API/README.md @@ -0,0 +1,31 @@ +# Brewery Finder + +Welcome to the Brewery Finder API! This API is designed to help you explore the world of breweries by providing detailed information about various breweries across different states. Just select a state, and I'll guide you to discover exciting breweries near you! + +## Features +- **Fetch Detailed Information about Breweries:** Get comprehensive data about breweries, including their name, type, city, state, country, phone, and website URL. +- **Random Brewery:** Discover a random brewery every time you click the "Random Brewery" button. +- **Error Handling:** Robust error handling to ensure meaningful error messages and smooth API usage. +- **Simple and Easy-to-Use Interface:** Designed with utmost simplicity for an easy and intuitive user experience. +- **Search Functionality:** Easily search for breweries by selecting a state from the dropdown list. +- **Sort Breweries:** Sort breweries alphabetically by name, city, or type. + +## Technologies Used +- HTML +- Vanilla CSS +- JavaScript +- API ( for fetching data ) + +# API Integration +This application uses the [Open Brewery DB API](https://www.openbrewerydb.org/documentation/01-listbreweries) to fetch brewery data. + +## Installation +To set up the Brewery Finder API locally, follow these steps: + +1. Clone the repository. +2. Switch to Existing_API_Collection folder `cd Existing_API_Collection` +3. Navigate to the `Brewery_API` directory. +4. Open the `index.html` file in your browser. + +## Screenshot +![Screenshot](brewery.png) \ No newline at end of file diff --git a/Existing_API_Collection/Brewery_API/brewery.png b/Existing_API_Collection/Brewery_API/brewery.png new file mode 100644 index 0000000..776b366 Binary files /dev/null and b/Existing_API_Collection/Brewery_API/brewery.png differ diff --git a/Existing_API_Collection/Brewery_API/index.html b/Existing_API_Collection/Brewery_API/index.html new file mode 100644 index 0000000..dab9c64 --- /dev/null +++ b/Existing_API_Collection/Brewery_API/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Brewery Finder + + + +
+

Brewery Finder

+
+ + + Name + City + Type + +
+
+ +
+ + + + diff --git a/Existing_API_Collection/Brewery_API/script.js b/Existing_API_Collection/Brewery_API/script.js new file mode 100644 index 0000000..5ac77b5 --- /dev/null +++ b/Existing_API_Collection/Brewery_API/script.js @@ -0,0 +1,99 @@ +const stateSelect = document.getElementById("state_select"); +const searchBtn = document.getElementById("search_btn"); +const randomBtn = document.getElementById("random_btn"); +const result = document.getElementById("result"); + +// Function to fetch all states +async function fetchStates() { + try { + const response = await fetch("https://api.openbrewerydb.org/breweries"); + const data = await response.json(); + const states = new Set(data.map(brewery => brewery.state).filter(state => state)); + states.forEach(state => { + const option = document.createElement("option"); + option.value = state; + option.textContent = state; + stateSelect.appendChild(option); + }); + } catch (error) { + console.error("Error fetching states:", error); + } +} + +// Function to fetch breweries by state +async function fetchBreweriesByState(stateName, sortBy = 'name') { + try { + const response = await fetch(`https://api.openbrewerydb.org/v1/breweries?by_state=${stateName}&sort=${sortBy}&per_page=10`); + const data = await response.json(); + if (data.length === 0) { + result.innerHTML = "

No breweries found in this state

"; + return; + } + result.innerHTML = ""; + data.forEach(brewery => { + result.innerHTML += ` +
+

${brewery.name}

+
+

Type: ${brewery.brewery_type}

+

City: ${brewery.city}

+

State: ${brewery.state}

+

Country: ${brewery.country}

+

Phone: ${brewery.phone}

+

Website: ${brewery.website_url}

+
+
+ `; + }); + } catch (error) { + result.innerHTML = "

Error fetching data. Please try again later.

"; + console.error("Error fetching breweries by state:", error); + } +} + +// Function to fetch a random brewery +async function fetchRandomBrewery() { + try { + const response = await fetch('https://api.openbrewerydb.org/breweries'); + const data = await response.json(); + const randomIndex = Math.floor(Math.random() * data.length); + const brewery = data[randomIndex]; + result.innerHTML = ` +
+

${brewery.name}

+
+

Type: ${brewery.brewery_type}

+

City: ${brewery.city}

+

State: ${brewery.state}

+

Country: ${brewery.country}

+

Phone: ${brewery.phone}

+

Website: ${brewery.website_url}

+
+
+ `; + } catch (error) { + result.innerHTML = "

Error fetching data. Please try again later.

"; + console.error("Error fetching random brewery:", error); + } +} + +// Event listener for search button +searchBtn.addEventListener("click", () => { + const selectedState = stateSelect.value; + if (!selectedState) { + result.innerHTML = "

Please select a state

"; + return; + } + const sortBy = document.querySelector('input[name="sort"]:checked').value; + fetchBreweriesByState(selectedState, sortBy); +}); + +// Event listener for random button +randomBtn.addEventListener("click", () => { + fetchRandomBrewery(); +}); + +// Populate state select dropdown when the page loads +document.addEventListener("DOMContentLoaded", () => { + fetchStates(); +}); diff --git a/Existing_API_Collection/Brewery_API/style.css b/Existing_API_Collection/Brewery_API/style.css new file mode 100644 index 0000000..ac6addf --- /dev/null +++ b/Existing_API_Collection/Brewery_API/style.css @@ -0,0 +1,95 @@ +body { + font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + background-color: rgb(254, 251, 237); +} + +.container { + max-width: 600px; + margin: 50px auto; + padding: 20px; + background-color: #ffffff; + /* background-color: #f8e7c2; */ + border-radius: 8px; + box-shadow: 10px 10px 40px rgba(0.3, 0.3, 0.3, 0.3); +} + +h1 { + text-align: center; + color: #572d00; + font-size: 36px; + margin-top: 0; +} + +.search_wrapper { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +#state_select { + flex: 1; + padding: 10px; + font-size: 16px; + margin-right: 10px; +} + +#search_btn, +#random_btn { + padding: 10px 20px; + background-color: #9a6200; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; + margin-left: 10px; +} + +#search_btn:hover, +#random_btn:hover { + background-color: #634000; +} + +#result { + margin-top: 20px; +} + +.brewery_card { + background-color: #fff7e5; + padding: 20px; + margin-bottom: 10px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.brewery_card h2 { + margin-top: 0; + margin-bottom: 10px; +} + +.brewery_details p { + margin: 5px 0; +} + +#random_btn { + display: block; + width: 100%; + margin-top: 20px; + background-color: #9a6200; + font-size: 18px; + text-align: center; + padding: 15px; + border-radius: 10px; + border: none; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + /* box-shadow: 10px 10px 40px rgba(0.3, 0.3, 0.3, 0.3); */ +} + +#random_btn:hover { + background-color: #634000; +} diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md index c6c3921..f2f1f48 100644 --- a/Existing_API_Collection/README.md +++ b/Existing_API_Collection/README.md @@ -23,4 +23,5 @@ |[Gold Silver Price](./Gold,silver_price_API/)|This API helps you check realtime price of gold and silver for each categories | |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.| |[Books API](./Books_API/)| The Google Books API allows developers to access a wealth of information about books, including their titles, authors, publishers, publication dates, and descriptions. | -|[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency| \ No newline at end of file +|[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency| +|[Brewery_API](./Brewery_API/)| Brewery Finder API is designed to help you explore the world of breweries by providing detailed information about various breweries across different states.| \ No newline at end of file