<!DOCTYPE html>
<html lang="en">
<head>
<title>Reactive Link Shortener Sample Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
background-color: #f1f1f1;
}
.centered {
display: table;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.form-inline .form-control {
width: 500px;
}
</style>
<script>
var hosturl = window.location.protocol + "//" + window.location.hostname + "/link/";
$(document).ready( function() {
$( "#searchForm" ).submit(function( event ) {
event.preventDefault();
var url = $(this).attr( "action" );
var senddata = $(this).find( "input[name='link']" ).val();
$.ajax({
type: 'POST',
url: url,
data: '{"link": "'+senddata+'"}',
success: function(data) {
$("#content").html('<a href="'+hosturl+data.shortenedLink+'" target="_blank">'+hosturl+data.shortenedLink+'</a>');
},
contentType: "application/json",
dataType: 'json'
});
});
});
</script>
</head>
<body>
<br><br><br>
<div class="centered">
<nav class="navbar navbar-expand-sm navbar-dark">
<form class="form-inline" action="/link" id="searchForm">
<input class="form-control mr-sm-2" name="link" type="text" placeholder="http://www.google.com">
<button class="btn btn-success" type="submit">Make Link</button>
</form>
</nav>
<div id="content">
</div>
</div>
</body>
</html> |