Created
June 10, 2017 20:22
-
-
Save jacobandresen/8c0ec756f682bf0529be881884ef5095 to your computer and use it in GitHub Desktop.
HYF:functions+lists+strings
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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