diff --git a/week-7/index.html b/week-7/index.html
new file mode 100644
index 0000000..9a76261
--- /dev/null
+++ b/week-7/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Cocktails
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{cocktail.strDrink}}
+
{{cocktail.strInstructions}}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week-7/js/cocktails.js b/week-7/js/cocktails.js
new file mode 100644
index 0000000..24d4212
--- /dev/null
+++ b/week-7/js/cocktails.js
@@ -0,0 +1,29 @@
+var app = new Vue({
+ el: '#vue-app',
+ data: {
+ cocktails: [
+
+ ],
+ search: ''
+ },
+ methods: {
+ Search(){
+ this.fetchCocktails();
+ this.search = '';
+ },
+ fetchCocktails(){
+ fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' + this.search)
+ .then(response =>{
+ response.json().then(data => {
+ this.cocktails = data.drinks;
+ });
+ }).catch(error => {
+ console.log(error);
+ });
+ }
+
+ },
+ mounted(){
+ this.fetchCocktails();
+ }
+});
\ No newline at end of file