diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..cda3d23
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,15 @@
+body{
+ font-family: 'Roboto', sans-serif;
+ background: #9966ff;
+ color: #66ffff;
+ text-align: center;
+}
+img{
+ margin: 0 auto;
+}
+
+button{
+ background: #66ffff;
+ height: 23px;
+ width: 10%;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f0953e3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+ Enter a meal
+
+
+
+
+ ![]()
+
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..5f71614
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,19 @@
+//Example fetch using pokemonapi.co
+document.querySelector('button').addEventListener('click', getFetch)
+
+function getFetch(){
+ const choice = document.querySelector('input').value
+ const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${choice}`
+
+ fetch(url)
+ .then(res => res.json()) // parse response as JSON
+ .then(data => {
+ console.log(data)
+ document.querySelector('h2').innerText = data.meals[0].strMeal
+ document.querySelector('img').src = data.meals[0].strMealThumb
+ document.querySelector('p').innerText = data.meals[0].strInstructions
+ })
+ .catch(err => {
+ console.log(`error ${err}`)
+ });
+}