From 818948f5e1237bdcbef8cb1f02b1182a629a77e2 Mon Sep 17 00:00:00 2001 From: sprim0 Date: Tue, 7 Oct 2025 02:11:04 -0400 Subject: [PATCH 1/3] done --- css/styles.css | 0 index.html | 33 +++++++++++++++++++++++++++++++++ js/main.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..3e49c9c --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Beer + + + +

Choose Your Beer

+ + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..bef769b --- /dev/null +++ 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. From 98efeed9daf98ee0a14aa5eada3dcd44dd712566 Mon Sep 17 00:00:00 2001 From: sprim0 Date: Tue, 7 Oct 2025 12:22:44 -0400 Subject: [PATCH 2/3] css added --- css/styles.css | 42 ++++++++++++++++++++++++++++++++++++++++++ index.html | 26 ++++++++++++++------------ 2 files changed, 56 insertions(+), 12 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29..e0cc692 100644 --- 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 index 3e49c9c..0fcc32e 100644 --- a/index.html +++ b/index.html @@ -7,18 +7,20 @@ -

Choose Your Beer

- - - - +

Virtual Oktoberfest: Choose Your Beer

+ + +
+ +
+
From d99b14ec4414c66b5009cce619e013dd0f45d567 Mon Sep 17 00:00:00 2001 From: Sherrell Primo Date: Tue, 7 Oct 2025 13:52:46 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a9a4cc6..7c199aa 100644 --- 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... ``` +simple-api img beer