johnotu/addressbook.html

## addressbook.html
<!DOCTYPE html>
<html>
	<head>
		<title>Address Book</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<style type="text/css">
			button{margin: 0 20px;}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<h2>A simple Address Book</h2>
					<br>
					<form>
						<div class="form-group">
							<label for="firstName">First Name</label>
							<input type="text" class="form-control" id="firstName">
						</div>
						<div class="form-group">
							<label for="lastName">Last Name</label>
							<input type="text" class="form-control" id="lastName">
						</div>
						<div class="form-group">
							<label for="email">Email</label>
							<input type="email" class="form-control" id="email">
						</div>
						<div class="form-group">
							<label for="phoneNumber">Phone Number</label>
							<input type="tel" class="form-control" id="phoneNumber">
						</div>
						<button type="button" class="btn btn-primary" id="submit">Add contact</button>
					</form>
					<p id="response"></p>
					<br>
					<div class="table-responsive">
						<table class="table table-condensed table-bordered" id="address-table">
							<thead class="active">
								<tr>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Email</th>
									<th>Phone Number</th>
									<th></th>
									<th></th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- DevLess SDK -->
		<script src="https://library.devless.io/cdn/1.0/dv_sdk.js"></script>
		<script>
			var constants = { "token":"7f0449c4d77ade309aa26ef0a9de6bbe", "domain":"http://localhost:3000" }; Devless = new Devless(constants);

			getAddresses();

			$('button#submit').click(function(){
				var firstName = $('#firstName').val(),
						lastName = $('#lastName').val(),
						email = $('#email').val(),
						phoneNumber = $('#phoneNumber').val();
				var data = {
					"firstName": firstName,
					"lastName": lastName,
					"email": email,
					"phoneNumber": phoneNumber
				};
				Devless.addData("addressbook", "addresses", data, function(response){
					console.log(response);
					$('p#response').text(response.message);
					$('input').val('');
					if(response.status_code === 609){
						$('tbody').empty();
						getAddresses();
					}
				});
			});

			function deleteAddress(id){
				Devless.deleteData('addressbook', 'addresses', 'id', id, function(response){
					console.log(response);
					$('p#response').text(response.message);
				});
				$('tbody').empty();
				getAddresses();
			}

			function updateAddress(id){
				Devless.queryData('addressbook', 'addresses', {where:["id," + id]}, function(response){
					console.log(response);
					var data = response.payload.results[0];
					$('input#firstName').val(data.firstname);
					$('input#lastName').val(data.lastname);
					$('input#email').val(data.email);
					$('input#phoneNumber').val(data.phonenumber);
					$('form').append("<button type='button' class='btn btn-info' id='update-address' onclick='update(" + data.id + ")'>Update</button>")
				})
			}

			function update(id){
				var firstName = $('#firstName').val(),
						lastName = $('#lastName').val(),
						email = $('#email').val(),
						phoneNumber = $('#phoneNumber').val();
				var data = {
					"firstName": firstName,
					"lastName": lastName,
					"email": email,
					"phoneNumber": phoneNumber
				};
				Devless.updateData("addressbook", "addresses", "id", id, data, function(response){
					console.log(response);
					$('input').val('');
					$('tbody').empty();
					getAddresses();
					$('#update-address').remove();
				});
			}

			function getAddresses(){
				var params = {};
				Devless.queryData('addressbook', 'addresses', params, function(response){
					console.log(response);
					var tableContent = '',
								updateButton = "<button type='button' class='btn btn-info update'>Update</button>", data = response.payload.results, dataLength = data.length;
					for(var i=0; i<dataLength; i++){
						tableContent += '<tr>';
						tableContent += '<td>' + data[i].firstname + '</td>';
						tableContent += '<td>' + data[i].lastname + '</td>';
						tableContent += '<td>' + data[i].email + '</td>';
						tableContent += '<td ' + "id='" + data[i].id + "'>" + data[i].phonenumber + '</td>';
						tableContent += '<td>' + "<button type='button' class='btn btn-info' " + "onclick='" + "updateAddress(" + data[i].id + ")'" + ">Update</button>" + '</td>';
						tableContent += '<td>' + "<button type='button' class='btn btn-danger' " + "onclick='" + "deleteAddress(" + data[i].id + ")'" + ">Delete</button>" + '</td>';
						tableContent += '</tr>';
						$('tbody').append(tableContent);
						tableContent = '';
					};
				});
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Address Book</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
	button{margin: 0 20px;}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-8 col-md-offset-2">
	<h2>A simple Address Book</h2>
	<br>
	<form>
	<div class="form-group">
	<label for="firstName">First Name</label>
	<input type="text" class="form-control" id="firstName">
	</div>
	<div class="form-group">
	<label for="lastName">Last Name</label>
	<input type="text" class="form-control" id="lastName">
	</div>
	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" class="form-control" id="email">
	</div>
	<div class="form-group">
	<label for="phoneNumber">Phone Number</label>
	<input type="tel" class="form-control" id="phoneNumber">
	</div>
	<button type="button" class="btn btn-primary" id="submit">Add contact</button>
	</form>
	<p id="response"></p>
	<br>
	<div class="table-responsive">
	<table class="table table-condensed table-bordered" id="address-table">
	<thead class="active">
	<tr>
	<th>First Name</th>
	<th>Last Name</th>
	<th>Email</th>
	<th>Phone Number</th>
	<th></th>
	<th></th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<!-- DevLess SDK -->
	<script src="https://library.devless.io/cdn/1.0/dv_sdk.js"></script>
	<script>
	var constants = { "token":"7f0449c4d77ade309aa26ef0a9de6bbe", "domain":"http://localhost:3000" }; Devless = new Devless(constants);

	getAddresses();

	$('button#submit').click(function(){
	var firstName = $('#firstName').val(),
	lastName = $('#lastName').val(),
	email = $('#email').val(),
	phoneNumber = $('#phoneNumber').val();
	var data = {
	"firstName": firstName,
	"lastName": lastName,
	"email": email,
	"phoneNumber": phoneNumber
	};
	Devless.addData("addressbook", "addresses", data, function(response){
	console.log(response);
	$('p#response').text(response.message);
	$('input').val('');
	if(response.status_code === 609){
	$('tbody').empty();
	getAddresses();
	}
	});
	});

	function deleteAddress(id){
	Devless.deleteData('addressbook', 'addresses', 'id', id, function(response){
	console.log(response);
	$('p#response').text(response.message);
	});
	$('tbody').empty();
	getAddresses();
	}

	function updateAddress(id){
	Devless.queryData('addressbook', 'addresses', {where:["id," + id]}, function(response){
	console.log(response);
	var data = response.payload.results[0];
	$('input#firstName').val(data.firstname);
	$('input#lastName').val(data.lastname);
	$('input#email').val(data.email);
	$('input#phoneNumber').val(data.phonenumber);
	$('form').append("<button type='button' class='btn btn-info' id='update-address' onclick='update(" + data.id + ")'>Update</button>")
	})
	}

	function update(id){
	var firstName = $('#firstName').val(),
	lastName = $('#lastName').val(),
	email = $('#email').val(),
	phoneNumber = $('#phoneNumber').val();
	var data = {
	"firstName": firstName,
	"lastName": lastName,
	"email": email,
	"phoneNumber": phoneNumber
	};
	Devless.updateData("addressbook", "addresses", "id", id, data, function(response){
	console.log(response);
	$('input').val('');
	$('tbody').empty();
	getAddresses();
	$('#update-address').remove();
	});
	}

	function getAddresses(){
	var params = {};
	Devless.queryData('addressbook', 'addresses', params, function(response){
	console.log(response);
	var tableContent = '',
	updateButton = "<button type='button' class='btn btn-info update'>Update</button>", data = response.payload.results, dataLength = data.length;
	for(var i=0; i<dataLength; i++){
	tableContent += '<tr>';
	tableContent += '<td>' + data[i].firstname + '</td>';
	tableContent += '<td>' + data[i].lastname + '</td>';
	tableContent += '<td>' + data[i].email + '</td>';
	tableContent += '<td ' + "id='" + data[i].id + "'>" + data[i].phonenumber + '</td>';
	tableContent += '<td>' + "<button type='button' class='btn btn-info' " + "onclick='" + "updateAddress(" + data[i].id + ")'" + ">Update</button>" + '</td>';
	tableContent += '<td>' + "<button type='button' class='btn btn-danger' " + "onclick='" + "deleteAddress(" + data[i].id + ")'" + ">Delete</button>" + '</td>';
	tableContent += '</tr>';
	$('tbody').append(tableContent);
	tableContent = '';
	};
	});
	}
	</script>
	</body>
	</html>