Skip to content

Instantly share code, notes, and snippets.

@khalidsheet

khalidsheet/codelab.js

Created February 5, 2018 11:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khalidsheet/579278ea232dda83a7f4378bc95b3f35 to your computer and use it in GitHub Desktop.
Save khalidsheet/579278ea232dda83a7f4378bc95b3f35 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
codelab.js
// this file is for jQuery and Ajax Request.
var btn = $('#submit');
btn.click(function(event){
event.preventDefault();
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
method: 'GET',
data: {},
success: function(posts) {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/users',
method: 'GET',
success: function(users) {
fullData(posts, users)
}
})
},
error: function() {
}
});
})
function fullData(posts, users) {
for(var i = 0; i < posts.length; i++) {
var card = `
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">${ posts[i].title }</h5>
<h6 class="card-subtitle mb-2 text-muted">${users[posts[i].userId].username}</h6>
<p class="card-text">${ posts[i].body }</p>
</div>
</div>
`;
$('#posts').append(card);
}
}
Raw
index.html
<!DOCTYPE html>
<html class="h-100" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodeLabUot</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body class="h-100">
<div class="container">
<div id="vue">
<a :href="url">Google</a>
<button @click="getFullName">Click Me</button>
<p v-text="full_name"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="vue.codelab.js"></script>
</body>
</html>
Raw
vue.codelab.js
// this file is for vue.
var vueMessage = new Vue({
el: '#vue',
data: {
url: 'http://google.com',
fname: "Nael",
lname: "sadiq",
full_name: ""
},
methods: {
getFullName: function() {
this.full_name = this.fname + " " + this.lname;
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment