Skip to content

Instantly share code, notes, and snippets.

@jacobandresen

jacobandresen/gist:9bd1b8b6f25117d8c3b45f9947c1d364

Created June 11, 2017 10:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jacobandresen/9bd1b8b6f25117d8c3b45f9947c1d364 to your computer and use it in GitHub Desktop.
Save jacobandresen/9bd1b8b6f25117d8c3b45f9947c1d364 to your computer and use it in GitHub Desktop.
Download ZIP
hyf2
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Exploring JavaScript (Hack Your future Copenhagen)</title>
<script src="node_modules/jquery/dist/jquery.js" charset="utf-8"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>
<script src="node_modules/bootstrap-select/dist/js/bootstrap-select.js" charset="utf-8"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="node_modules/bootstrap-select/dist/css/bootstrap-select.css" />
</head>
<body>
<div class="container">
<nav class="navbar-default">
<a class="navbar-brand" href="#">
List your pets
</a>
</nav>
</div>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<span class="col-sm-2 control-label" for="name">name</span>
<div class="col-sm-10">
<input class="form-control" type="text" name="name" id="name" />
</div>
</div>
<div class="form-group">
<span class="col-sm-2 control-label">type</span>
<div class="col-sm-10">
<select class="form-control" data-live-search="true" name="type" id="type">
</select>
</div>
</div>
<div class="form-group">
<span class="col-sm-2 control-label">breed</span>
<div class="col-sm-10">
<select class="form-control" data-live-search="true" name="breed" id="breed" />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right" name="button" id="add">Add to List</button>
</div>
</form>
<hr/>
<ul id="list">
</ul>
</div>
<script type="text/javascript">
var types = ["dog", "cat", "Gold fish"],
breeds = ["Cavalier King Charles", "Labrador", "Orange cat"];
function updateList(div, list) {
var i;
for (var i = 0; i < list.length; i++ ){
var data = list[i];
div.append(`<option value="${data}">${data}</option>`);
};
div.selectpicker({ style: 'btn-default'});
}$
updateList($("#type"), types);
updateList($("#breed"), breed);
$('#add').click(function(evt) {
evt.preventDefault();
let name = $('#name').val();
let type = $('#type').find('option:selected').val();
let breed = $('#breed').find('option:selected').val();
$('#list').append("<li>" + name + ":" + type + ":" + "breed</li>");
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment