diff --git a/README.md b/README.md
index 788ab5a..604b06f 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,9 @@
-# 📊 Project: Simple API 2
+# Cheers!
-### Goal: Display data returned from an api
+**Cheers!** is a simple project that fetches and displays data from a public drink API.
+Displays drink names, images, ingredients and instruction on a web page.
+The core goal is to demonstrate retrieving JSON from an external endpoint and rendering it in a user-friendly web interface.
-### How to submit your code for review:
+---
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
-
-Example:
-```
-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/style.css b/css/style.css
new file mode 100644
index 0000000..f4dfe32
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,27 @@
+* {
+ margin: 1% 0;
+ padding: 0;
+ box-sizing: border-box;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ font-family: "Fredericka the Great", serif;
+}
+
+div {
+ display: flex;
+}
+
+img {
+ display: block;
+ margin: 0 auto;
+ max-width: 500px;
+ max-height: 750px;
+ border-radius: 10px;
+}
+
+input {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2bb03b9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Which Drink Takes Your Fancy Today?
+
+
+
+
+
Ingredients:
+
Instructions:
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..d1b194e
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,71 @@
+//The user will enter a cocktail. Get a cocktail name, photo, and instructions and place them in the DOM
+document.addEventListener('DOMContentLoaded', () => {
+document.querySelector('button').addEventListener('click', getDrink)
+
+function getDrink() {
+ const inputText = document.querySelector('input').value
+ console.log(inputText)
+
+ const url = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${inputText}`
+ fetch(url)
+ .then(res => res.json()) // parse response as JSON
+ .then(data => {
+ console.log(data)
+
+ document.querySelector('h2').innerText = data.drinks[0].strDrink
+ document.querySelector('img').src = data.drinks[0].strDrinkThumb
+ document.querySelector('h4').innerText = data.drinks[0].strInstructions
+
+ //Justin Joshi helped me with the if condition
+ if (data.drinks[0].strIngredient1) {
+ document.querySelector('h3').innerText += ` ${data.drinks[0].strIngredient1}`
+ }
+ if (data.drinks[0].strIngredient2) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient2}`
+ }
+ if (data.drinks[0].strIngredient3) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient3}`
+ }
+ if (data.drinks[0].strIngredient4) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient4}`
+ }
+ if (data.drinks[0].strIngredient5) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient5}`
+ }
+ if (data.drinks[0].strIngredient6) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient6}`
+ }
+ if (data.drinks[0].strIngredient7) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient7}`
+ }
+ if (data.drinks[0].strIngredient8) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient8}`
+ }
+ if (data.drinks[0].strIngredient9) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient9}`
+ }
+ if (data.drinks[0].strIngredient10) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient10}`
+ }
+ if (data.drinks[0].strIngredient11) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient11}`
+ }
+ if (data.drinks[0].strIngredient12) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient12}`
+ }
+ if (data.drinks[0].strIngredient13) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient13}`
+ }
+ if (data.drinks[0].strIngredient14) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient14}`
+ }
+ if (data.drinks[0].strIngredient15) {
+ document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient15}`
+ }
+
+ })
+ .catch(err => {
+ console.log(`error ${err}`)
+ });
+}
+})
\ No newline at end of file