Week-7

tsb15104 · Mar 4, 2020 · 9d2e88d · 9d2e88d
1 parent 5bcecd9
commit 9d2e88d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/week-7/index.html b/week-7/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cocktails</title>
+    <!-- <link rel="stylesheet" href="css/style.css"> -->
+    <style>
+        section{
+            display: flex;
+        }
+        #SearchBar{
+            margin: 5px;
+        }
+    </style>
+
+</head>
+
+<body>
+
+    <main id="vue-app">
+        <div id="SearchBar">
+            <input v-model="search" type="text" placeholder="Enter cocktail name" @keyup.enter="Search()">
+            <button class="btn btn-primary" @click="Search()">Search</button>
+            <hr>
+        </div>
+        <section v-if=cocktails.length v-for="cocktail of cocktails">
+            <div class="drink">
+                <img :src="cocktail.strDrinkThumb" alt="">
+                <h2>{{cocktail.strDrink}}</h2>
+                <p>{{cocktail.strInstructions}}</p>
+            </div>
+        </section>
+
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="js/cocktails.js"></script>
+</body>
+
+</html>
diff --git a/week-7/js/cocktails.js 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();
+  }
+});