Skip to content

Commit

Permalink
Merge pull request #25 from danvitoriano/loginjs
Browse files Browse the repository at this point in the history 
add bootstrap 4 and jsonplaceholder api
  • Loading branch information
@danvitoriano
danvitoriano authored Nov 4, 2016
2 parents d344a4c + 9118aa2 commit 2a4ed40
Show file tree
Hide file tree
Showing 21 changed files with 19,053 additions and 61 deletions.
119 changes: 65 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,77 @@
<meta charset="UTF-8">
<title>REST API by danvitoriano</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-4/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-4/css/bootstrap-reboot.min.css" media="screen">
</head>

<body>

<section id="add-user-jquery-ajax-post" class="container">
<div class="page-header">
<h1>Add User <small>(using jQuery Ajax POST)</small></h1>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<form id="form1">
<div class="form-group">
<label for="name1">User name</label>
<input type="text" class="form-control" id="name1" placeholder="Name" tabindex="1">
</div>
<div class="form-group">
<label for="age1">Age</label>
<input type="text" class="form-control" id="age1" placeholder="Age" tabindex="2">
</div>
<button id="btn-submit1" type="button" class="btn btn-default" tabindex="3">Submit</button>
<br>
<br>
<div id="res1" class="alert" role="alert">
</div>
</form>
<div class="col-xs-12 offset-sm-1 col-sm-10 offset-md-2 col-md-8 offset-lg-2 col-lg-8">
<div class="jumbotron mt-2 text-xs-center">
<h1 class="display-4">REST API</h1>
<p class="lead">Examples</p>
<hr class="my-2">
<p>It uses <a href="https://jsonplaceholder.typicode.com">JSONPlaceholder</a> Fake Online REST API for Testing and Prototyping</p>
</div>
</div>
</div>
</section>

<section id="add-user-js-ajax-post" class="container">
<div class="page-header">
<h1>Add User <small>(using JS Ajax POST)</small></h1>
</div>
<div class="row">
<div class="col-xs-12 ">
<form id="form2">
<div class="form-group">
<label for="name2">User name</label>
<input type="text" class="form-control" id="name2" placeholder="Name" tabindex="4">
</div>
<div class="form-group">
<label for="age2">Age</label>
<input type="text" class="form-control" id="age2" placeholder="Age" tabindex="5">
</div>
<button id="btn-submit2" type="button" class="btn btn-default" tabindex="6">Submit</button>
<br>
<br>
<div id="res2" class="alert" role="alert">
</div>
</form>
<div class="row">
<div class="offset-xs-1 col-xs-10 offset-sm-2 col-sm-8 offset-md-3 col-md-6 offset-lg-4 col-lg-4">
<section id="add-user-jquery-ajax-post">
<div class="page-header">
<h2>Add User <small>POST, jQuery, Ajax</small></h2>
</div>
<div class="row">
<div class="col-xs-12 ">
<form id="form1">
<div class="form-group">
<label for="name1">User name</label>
<input type="text" class="form-control" id="name1" placeholder="Name" tabindex="1">
</div>
<div class="form-group">
<label for="age1">Age</label>
<input type="text" class="form-control" id="age1" placeholder="Age" tabindex="2">
</div>
<button id="btn-submit1" type="button" class="btn btn-default" tabindex="3">Submit</button>
<br>
<br>
<div id="res1" class="alert" role="alert">
</div>
</form>
</div>
</div>
</section>
<section id="add-user-js-ajax-post">
<div class="page-header">
<h2>Add User <small>POST, Vanilla JavaScript, XMLHttpRequest</small></h2>
</div>
<div class="row">
<div class="col-xs-12 ">
<form id="form2">
<div class="form-group">
<label for="name2">User name</label>
<input type="text" class="form-control" id="name2" placeholder="Name" tabindex="4">
</div>
<div class="form-group">
<label for="age2">Age</label>
<input type="text" class="form-control" id="age2" placeholder="Age" tabindex="5">
</div>
<button id="btn-submit2" type="button" class="btn btn-default" tabindex="6">Submit</button>
<br>
<br>
<div id="res2" class="alert" role="alert">
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
</section>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/login.js" type="text/javascript"></script>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap-4/js/bootstrap.min.js"></script>
<script src="js/login.js" type="text/javascript"></script>
</body>

</html>
</html>
14 changes: 8 additions & 6 deletions js/login.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
;
(function(){

var api = "https://jsonplaceholder.typicode.com";

$("#btn-submit1").click(function(){
var name1 = $("#name1").val();
var age1 = $("#age1").val();
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
url: api + '/posts',
data: { title: name1,
body: age1,
userId: 1},
success: function(data) {
console.log("Friend added!", data); //the new item is returned with an ID
console.log("User added!", data); //the new item is returned with an ID
$("#res1").addClass("alert-success");
$("#res1").html("Name: <b>" + name1 + "</b> | Age: <b>" + age1 + "</b> | ID: <b>" + data.id + "</b>");
$("#form1")[0].reset();
Expand All @@ -23,16 +25,16 @@
var name2 = document.getElementById("name2").value;
var age2 = document.getElementById("age2").value;
var http = new XMLHttpRequest();
var params = "name=" + name2 + "&age=" + age2;
var url = "https://rest.learncode.academy/api/johnbob/friends";
var params = "title=" + name2 + "&body=" + age2 + "&userId=1";
var url = api + "/posts";

http.open("POST", url, true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log("Friend added!", http.responseText);
if(http.readyState == 4 && http.status >= 200 && http.status <= 299){
console.log("User added!", http.responseText);
document.getElementById("res2").className += " alert-success";
var jsonResponse = JSON.parse(http.responseText);
document.getElementById("res2").innerHTML = "Name: <b>" + name2 + "</b> | Age: <b>" + age2 + "</b> | ID: <b>" + jsonResponse["id"] + "</b>";
Expand Down
Loading

0 comments on commit 2a4ed40

Please sign in to comment.