Skip to content

Instantly share code, notes, and snippets.

@jacobandresen

jacobandresen/gist:8c0ec756f682bf0529be881884ef5095

Created June 10, 2017 20:22
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/8c0ec756f682bf0529be881884ef5095 to your computer and use it in GitHub Desktop.
Save jacobandresen/8c0ec756f682bf0529be881884ef5095 to your computer and use it in GitHub Desktop.
Download ZIP
HYF:functions+lists+strings
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript functions+lists+strings (Hack Your future Copenhagen)</title>
<script src="bower_components/jquery/dist/jquery.js" charset="utf-8"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>
<script src="bower_components/bootstrap-select/dist/js/bootstrap-select.js" charset="utf-8"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/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>
<form>
<div class="form-group">
<input class="form-control" type="text" name="name" id="name" placeholder="enter name">
</div>
<div class="form-group">
<select data-live-search="true" class="form-control" name="type" id="type" placeholder="type">
</select>
</div>
<div class="form-group">
<select data-live-search="true" class="form-control" name="breed" id="breed" placeholder="breed">
</select>
</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"];
var breeds = ["Cavalier King Charles", "Labrador", "Orange cat"];
function createList(list, div) {
for (var i = 0; i < types.length; i++ ){
var data = list[i];
div.append(`<option value="${data}">${data}</option>`);
};
div.selectpicker({ style: 'btn-default'});
}
createList(types, $("#type"));
createList(breeds, $("#breed"));
$('#add').click(function(evt) {
evt.preventDefault();
let name = $('#name').val();
let type = $('#type').find('option:selected').val();
$('#list').append("<li>" + name + ":" + type + "</li>");
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment