From 74f219fc7fe4b75ae5e5d847989fcbc46b0f31dd Mon Sep 17 00:00:00 2001 From: sprim0 Date: Tue, 7 Oct 2025 02:01:19 -0400 Subject: [PATCH 1/3] done --- css/styles.css | 0 index.html | 40 ++++++++++++++++++++++++++++++++++++++++ js/main.js | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 81 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..3d7222b --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Wine & Cheese Pairing + + + +

Find your wine preference

+ + + +
+ + + + + + + + + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..8b56bc3 --- /dev/null +++ b/js/main.js @@ -0,0 +1,41 @@ + +// make a wine page where users can the kind of wine they want +// use a drop down menu + + + +const wines = document.getElementById('wines') +let winedata; +const requestOptions = { + method: "GET", + redirect: "follow" +}; + +//create a variable to store wine data + +fetch("https://api.sampleapis.com/wines/reds", requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + winedata = data + }) + .catch((error) => console.error(error)); + + + +wines.addEventListener(("change"), () => { + // take the wine data use the find function which determines the first matching result. The match function takes the name of the wine from the data (user's selected wine choice) + const wine = winedata.find(w => w.wine.includes(wines.value)) + console.log(wine); + const dataDiv = document.getElementById("data"); + dataDiv.innerText = wine.winery + const img = document.querySelector("img"); + img.src = wine.image +}) + + + +// completed with the help of Fullstack Engineer: Taariq Elliot during DevFest and Michael Kazin + + + From 6cbcfd798bc68c46c59f4b778989054a2592941a Mon Sep 17 00:00:00 2001 From: sprim0 Date: Tue, 7 Oct 2025 14:29:39 -0400 Subject: [PATCH 2/3] css added --- css/styles.css | 35 +++++++++++++++++++++++++++++++++++ index.html | 33 +++++++++++---------------------- 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29..3915f21 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,35 @@ +*{ + box-sizing: border-box; +} + +body{ + text-align: center; +} + +html{ + background-image: url(https://t4.ftcdn.net/jpg/14/92/84/71/360_F_1492847175_hefpSJVlFxZfHDmskJ050Q1E37I0pb2C.jpg); + background-repeat: no-repeat; + background-size: cover; +} +h1{ + color: rgb(53, 47, 47); + font-size: 2.5rem; + text-align: center; + background: rgba(250, 250, 250, 0.5); + width: 50%; + margin-left: 25%; +} + +img{ + /* width: 200px; + height: 200px; */ +} +#data{ + padding-top: 20px; + font-size: 2.0rem; + color: white; +} + +#wines{ + font-size: 1.5rem; +} \ No newline at end of file diff --git a/index.html b/index.html index 3d7222b..c2a7c3a 100644 --- a/index.html +++ b/index.html @@ -7,31 +7,20 @@ -

Find your wine preference

- - +

Find Your Wine Vibe

+ + +
- - - - - - - - From cf60168c1b3c12d36276b3ae24f3478c724ce4d1 Mon Sep 17 00:00:00 2001 From: Sherrell Primo Date: Tue, 7 Oct 2025 14:31:01 -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 788ab5a..c440cb7 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... ``` +Screenshot 2025-10-07 at 2 27 47 PM