Resilient-Labs · sprim0 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/README.md b/README.md
@@ -20,3 +20,4 @@ I completed the challenge: 5
 I feel good about my code: 4
 I'm not sure if my constructors are setup cleanly...
 ```
+<img width="383" height="407" alt="simple-api img beer" src="https://github.com/user-attachments/assets/58cfd4ac-75d4-4635-b4cf-eece3752f494" />
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,42 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    text-align: center;
+}
+
+html{
+    background-image: url(https://www.angryotterliquor.crs/wcm/connect/sites/e51bd1e2-842b-4d42-80ff-ad13697a89f8/smartphone/Oktoberfest+Hero?MOD=AJPERES&CACHEID=ROOTWORKSPACE.Z18_2IKA1G82M08S50ANCIK0482G01-e51bd1e2-842b-4d42-80ff-ad13697a89f8-smartphone-p8g-GVW);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+h1{
+    color: rgb(53, 47, 47);
+    font-size: 5.5rem;
+    text-align: center;
+    background: rgba(250, 250, 250, 0.5);
+}
+
+#container{
+    text-align: center;
+}
+
+#data{
+    text-align: center;
+    font-size: 1.5rem;
+    color: white;
+    /* color: rgb(53, 47, 47); */
+    padding-top: 3%;
+    /* background: rgba(250, 250, 250, 0.5); */
+}
+
+#beer{
+    font-size: 2.5rem;
+}
+
+img{
+    width: 200px;
+    height: auto;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beer</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <h1>Virtual Oktoberfest: Choose Your Beer</h1>
+    <!-- <img src="https://www.angryotterliquor.crs/wcm/connect/sites/e51bd1e2-842b-4d42-80ff-ad13697a89f8/smartphone/Oktoberfest+Hero?MOD=AJPERES&CACHEID=ROOTWORKSPACE.Z18_2IKA1G82M08S50ANCIK0482G01-e51bd1e2-842b-4d42-80ff-ad13697a89f8-smartphone-p8g-GVW"> -->
+
+    <div id="container">   
+        <select id="beer" name="beer">
+            <option value="Weizen">Weizen</option>
+            <option value="Porter">Porter</option>
+            <option value="Draught">Draught</option>
+            <option value="White Ale"> White Ale</option>
+            <option value="Stout">Stout</option>
+            <option value="IPA">IPA</option>
+        </select>
+    </div> 
+
+    <div id="data"></div>
+    <img src="">
+
+
+
+
+
+
+
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,42 @@
+
+// Goal: Enable user to enter a futurama character and return the character's info.
+
+// get text info by user
+// listen for click
+// grab information (beer name)
+// setup the url from the beer api
+// perform the fetch request
+// extract character description from the response
+// display it in the DOM
+
+const beer = document.getElementById('beer')
+let beerdata;
+
+const requestOptions = {
+  method: "GET",
+  redirect: "follow"
+};
+
+fetch("https://api.sampleapis.com/beers/ale", requestOptions)
+  .then((response) => response.json())
+  .then((data) => {
+    console.log(data);
+    beerdata = data
+  })
+  .catch((error) => console.error(error));
+
+beer.addEventListener(("change"), () => {
+  // take the beer data use the filter function to get all matching results. The match function takes the name of the beer from the data (user's selected beer choice)
+    const beers = beerdata.filter(w => w.name.includes(beer.value))
+    // solve the image issue by getting a random beer image 
+    const randomBeer = beers[Math.floor (Math.random ()*beers.length)]
+  console.log(randomBeer);
+  const dataDiv = document.querySelector('#data')
+  dataDiv.innerText = randomBeer.price
+  const img = document.querySelector("img");
+  img.src = randomBeer.image
+})
+
+// make a note that not all of the images exist in the API
+
+// completed with the help of Mentor, Michael Kazin.