-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #300 from atul2727/Brewery_API
Brewery_API
- Loading branch information
Showing
6 changed files
with
258 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'> | ||
<link rel="stylesheet" href="style.css"> | ||
<title>Brewery Finder</title> | ||
</head> | ||
|
||
<body> | ||
<div class="container"> | ||
<h1>Brewery Finder</h1> | ||
<div class="search_wrapper"> | ||
<select id="state_select"> | ||
<option value="" disabled selected>Select a state</option> | ||
</select> | ||
<label>Sort By:</label> | ||
<input type="radio" name="sort" value="name" checked> Name | ||
<input type="radio" name="sort" value="city"> City | ||
<input type="radio" name="sort" value="type"> Type | ||
<button id="search_btn">Search</button> | ||
</div> | ||
<div id="result"></div> | ||
<button id="random_btn">🍺 Feeling Lucky? Find a Random Brewery!</button> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 = "<h3>No breweries found in this state</h3>"; | ||
return; | ||
} | ||
result.innerHTML = ""; | ||
data.forEach(brewery => { | ||
result.innerHTML += ` | ||
<div class="brewery_card"> | ||
<h2>${brewery.name}</h2> | ||
<div class="brewery_details"> | ||
<p><strong>Type:</strong> ${brewery.brewery_type}</p> | ||
<p><strong>City:</strong> ${brewery.city}</p> | ||
<p><strong>State:</strong> ${brewery.state}</p> | ||
<p><strong>Country:</strong> ${brewery.country}</p> | ||
<p><strong>Phone:</strong> ${brewery.phone}</p> | ||
<p><strong>Website:</strong> <a href="${brewery.website_url}" target="_blank">${brewery.website_url}</a></p> | ||
</div> | ||
</div> | ||
`; | ||
}); | ||
} catch (error) { | ||
result.innerHTML = "<h3>Error fetching data. Please try again later.</h3>"; | ||
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 = ` | ||
<div class="brewery_card"> | ||
<h2>${brewery.name}</h2> | ||
<div class="brewery_details"> | ||
<p><strong>Type:</strong> ${brewery.brewery_type}</p> | ||
<p><strong>City:</strong> ${brewery.city}</p> | ||
<p><strong>State:</strong> ${brewery.state}</p> | ||
<p><strong>Country:</strong> ${brewery.country}</p> | ||
<p><strong>Phone:</strong> ${brewery.phone}</p> | ||
<p><strong>Website:</strong> <a href="${brewery.website_url}" target="_blank">${brewery.website_url}</a></p> | ||
</div> | ||
</div> | ||
`; | ||
} catch (error) { | ||
result.innerHTML = "<h3>Error fetching data. Please try again later.</h3>"; | ||
console.error("Error fetching random brewery:", error); | ||
} | ||
} | ||
|
||
// Event listener for search button | ||
searchBtn.addEventListener("click", () => { | ||
const selectedState = stateSelect.value; | ||
if (!selectedState) { | ||
result.innerHTML = "<h3>Please select a state</h3>"; | ||
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(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters