| Info | ||
|---|---|---|
| ||
|
...
Bootstrap
| Info | ||
|---|---|---|
| ||
Starter template
| Code Blockinfo | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Code Block |
| |||||||
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html> |
Forms - NavBar
| Code Blockinfo | ||||||
|---|---|---|---|---|---|---|
| ||||||
| Code Block |
| |||||
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav> |
Home.html
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<!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>
$(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="/link/'+data.shortenedLink+'" target="_blank">'+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://wiki.iisanse.com">
<button class="btn btn-success" type="submit">Make Link</button>
</form>
</nav>
<div id="content">
</div>
</div>
</body>
</html> |