Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
changes
  • Loading branch information
met18001 committed Mar 9, 2020
1 parent dce6c4f commit 5b6d747
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 0 deletions.
27 changes: 27 additions & 0 deletions week-7/drinks/index.html
@@ -0,0 +1,27 @@
<main id="vue-app">



<input v-model="query" type="text" placeholder="Search">
<button @click="fetchDrinks" >Search</button>


<section v-if=drinks.length v-for="drink of drinks">
<div>
<img :src="drink.strDrinkThumb" alt="">
<h2><a :href="drink.strTags">{{drink.strTags}}</a></h2>
</div>
</section>
<p>

</p>



</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/drinks.js"></script>
</body>

</html>
27 changes: 27 additions & 0 deletions week-7/drinks/js/drinks.js
@@ -0,0 +1,27 @@
var app = new Vue({
el: '#vue-app',
data: {
drinks: [

],


query: ""

},
methods: {

fetchDrinks(){
fetch("https://www.thecocktaildb.com/api/json/v1/1/search.php?s=" + this.query)
.then(response =>{
response.json().then(data => {
this.drinks = data.drinks;
});
}).catch(error => {
console.log(error);
});
}

},

});
46 changes: 46 additions & 0 deletions week-7/index.html
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Users</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<style>

section{
display: flex;
}
</style>



</head>

<body>


<main id="vue-app">

<section v-if=users.length v-for="user of users">
<div>
<img :src="user.avatar" alt="">
</div>
<div>
<h2><a :href="'mailto:' + user.email">{{user.first_name}} {{user.last_name}}</a></h2>
</div>
</section>


<footer>

<button @click.prevent="increment">Next Page &gt;&gt;</button>
</footer>

</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/users.js"></script>
</body>

</html>
30 changes: 30 additions & 0 deletions week-7/js/users.js
@@ -0,0 +1,30 @@
var app = new Vue({
el: '#vue-app',
data: {
users: [

],
page: 1

},
methods: {
increment(){
this.page = this.page+1;
this.fetchUsers();
},
fetchUsers(){
fetch('https://reqres.in/api/users?page=' + this.page)
.then(response =>{
response.json().then(data => {
this.users = data.data;
});
}).catch(error => {
console.log(error);
});
}

},
mounted(){
this.fetchUsers();
}
});

0 comments on commit 5b6d747

Please sign in to comment.