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...
```
+
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..3915f21
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c2a7c3a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Wine & Cheese Pairing
+
+
+
+
Find Your Wine Vibe
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+