khalidsheet/codelab.js

## codelab.js
var btn      = $('#submit');

var user = "khalid";
var pass = "1998";

var posts = null;

btn.click(function(event){
	event.preventDefault();

		$.ajax({
			method: 'GET',
			url: 'https://jsonplaceholder.typicode.com/posts',
			success: function(res) {
				posts = res;
			},
			error: function(err) {
				console.log('err', err)
			}
		})

	// use this if you want help or something else.

	// $.ajax({
	// 	url: 'https://jsonplaceholder.typicode.com/posts',
	// 	method: 'GET',
	// 	data: {},
	// 	success: function(results) {
	// 		console.log(results)
	// 		for(var i = 0; i < results.length; i++) {
	// 			var card = `
	// 				<div class="card" style="width: 18rem; margin-bottom: 10px;">
	// 				  <div class="card-body">
	// 				    <h5 class="card-title">${results[i].title}</h5>
	// 				    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
	// 				    <p class="card-text">${results[i].body}</p>
	// 				    <a href="#" class="card-link">Card link</a>
	// 				    <a href="#" class="card-link">Another link</a>
	// 				  </div>
	// 				</div>
	// 			`;

	// 			$('#posts').append(card);
	// 		}
	// 	},
	// 	error: function(data) {

	// 	}
	//})
})


## 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 class="row justify-content-center">
			<div class="col-6">
				<div class="message"></div>

				<form class="login-form" action="http://someurl" method="GET">
					<!-- Click to get all posts -->
				  <button id="submit" type="submit" class="btn btn-primary">Get All Posts</button>
				</form>

				<!-- Posts goes here -->
				<div id="posts"></div>
			</div>
		</div>
	</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.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" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="codelab.js"></script>
</body>
</html>

## style.css
.login-form {
	margin-top: 20px;
	background: #ccc;
	padding: 10px;
	border-radius: 10px;
}
	var btn = $('#submit');

	var user = "khalid";
	var pass = "1998";

	var posts = null;

	btn.click(function(event){
	event.preventDefault();

	$.ajax({
	method: 'GET',
	url: 'https://jsonplaceholder.typicode.com/posts',
	success: function(res) {
	posts = res;
	},
	error: function(err) {
	console.log('err', err)
	}
	})

	// use this if you want help or something else.

	// $.ajax({
	// url: 'https://jsonplaceholder.typicode.com/posts',
	// method: 'GET',
	// data: {},
	// success: function(results) {
	// console.log(results)
	// for(var i = 0; i < results.length; i++) {
	// var card = `
	// <div class="card" style="width: 18rem; margin-bottom: 10px;">
	// <div class="card-body">
	// <h5 class="card-title">${results[i].title}</h5>
	// <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
	// <p class="card-text">${results[i].body}</p>
	// <a href="#" class="card-link">Card link</a>
	// <a href="#" class="card-link">Another link</a>
	// </div>
	// </div>
	// `;

	// $('#posts').append(card);
	// }
	// },
	// error: function(data) {

	// }
	//})
	})
	<!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 class="row justify-content-center">
	<div class="col-6">
	<div class="message"></div>

	<form class="login-form" action="http://someurl" method="GET">
	<!-- Click to get all posts -->
	<button id="submit" type="submit" class="btn btn-primary">Get All Posts</button>
	</form>

	<!-- Posts goes here -->
	<div id="posts"></div>
	</div>
	</div>
	</div>



	<script src="https://code.jquery.com/jquery-3.3.1.min.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" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

	<script src="codelab.js"></script>
	</body>
	</html>
	.login-form {
	margin-top: 20px;
	background: #ccc;
	padding: 10px;
	border-radius: 10px;
	}