-
-
Save blake41/8ff37ea496d3064b39d9 to your computer and use it in GitHub Desktop.
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
| .hidden { | |
| visibility: hidden; | |
| } |
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
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> | |
| <script type="text/javascript" src="index.js"></script> | |
| </head> | |
| <body> | |
| <ul class="courses"></ul> | |
| </body> | |
| </html> |
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
| function liTemplate(id, input, details){ | |
| return '<li class="course" data-details="' + | |
| details + | |
| '">' + | |
| input + | |
| '<span data-id="' + id + '"> ×</span></li>'; | |
| } | |
| function detailsTemplate(details){ | |
| return'<div class="details">' + | |
| details + | |
| '</div>'; | |
| } | |
| function appendToUl(ul, item) { | |
| ul.append(liTemplate(item.id, item.name, item.details)); | |
| } | |
| $(document).ready(function() { | |
| courses = [{"name":"ruby","details":"the language of ballers","id":1}, | |
| {"name":"python","details":"a snaky language","id":2}, | |
| {"name":"javascript","details":"JUNK!","id":3}, | |
| {"name":"haskell","details":"check out my neckbeard","id":4}] | |
| var $courses = $('.courses'); | |
| courses.forEach(function(item) { | |
| appendToUl($courses, item); | |
| }) | |
| $('.courses').on('click', '.course', function(event) { | |
| if ($(this).find('.details').length === 0) { | |
| var $li = $(this); | |
| var details = $li.data('details'); | |
| $li.append(detailsTemplate(details)); | |
| } else { | |
| $(this).find('.details').remove(); | |
| } | |
| }) | |
| }); |
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
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> | |
| <script type="text/javascript" src="jqueries.js"></script> | |
| <link rel="stylesheet" type="text/css" href="myStylez.css"> | |
| </head> | |
| <body> | |
| <ul class="courses"> | |
| <li>Ruby</li> | |
| <li>Python</li> | |
| <li>Javascript</li> | |
| <li>Haskell</li> | |
| </ul> | |
| <select id="selector"> | |
| <option value="volvo">Volvo</option> | |
| <option value="saab">Saab</option> | |
| <option value="mercedes">Mercedes</option> | |
| <option value="audi">Audi</option> | |
| </select> | |
| </body> | |
| </html> |
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
| var subselect = { | |
| "Ballers" : ["Steph", "Geraldina", "Jordan"], | |
| "Programmers" : ["Geraldina", "Steph", "Andrew"], | |
| "Dancers" : ["Lezou", "Mykle", "David"], | |
| "Rappers" : ["Mykle","Earl"] | |
| } | |
| $(function() { | |
| $("#selector").change(replaceSelect); | |
| }) | |
| function replaceSelect() { | |
| $("body").append(buildSelectBox()); | |
| } | |
| function buildSelectBox() { | |
| if ($("#subselect").length > 0) { | |
| $("#subselect").remove(); | |
| return addSelectBox(); | |
| } else { | |
| return addSelectBox(); | |
| } | |
| } | |
| function addSelectBox() { | |
| return '<select id="subselect">' | |
| + buildOptions() + | |
| '</select>' | |
| } | |
| function buildOptions() { | |
| var optionString = "" | |
| var selected = $("#selector option:selected").text(); | |
| subselect[selected].forEach(function(element) { | |
| optionString += buildOption(element); | |
| }) | |
| return optionString; | |
| } | |
| function buildOption(element) { | |
| return '<option value="' + element + '">' + element + '</option>'; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment