Session 09 - Javascript, Part 2
Code Examples

• Example 9.1 - Ice Cream Options
  Example 9.1
  Codepen - Example 9.1
  <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><fieldset><legend>Would you like ice cream?</legend><label><input type="radio" name="want" id="ic_yes" value="yes"/>Yes</label><label><input type="radio" name="want" id="ic_no" value="no"/>No</label></fieldset><fieldset id="icecream_options"><legend>Ice Cream Options</legend><fieldset><legend>Would you like a cup or a cone?</legend><label><input type="radio" id="container_cup" name="container" value="cup"/>Cup</label><label><input type="radio" id="container_cone" name="container" value="cone"/>Cone</label></fieldset><fieldset><legend>What topping do you want?</legend><label><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/>Whipped cream</label><label><input type="checkbox" name="toppings" id="toppings_jimmies" value="jimmies"/>Jimmies</label><label><input type="checkbox" name="toppings" id="toppings_sprinkles" value="sprinkles"/>Sprinkles</label><label><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/>Nuts</label><label><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/>Cherry</label></fieldset></fieldset><button type="submit">Submit Order</button></form>body { font-family: helvetica, sans-serif; margin: 1rem 5%; line-height: 1.5; } form fieldset { margin-bottom: 1rem; } label { display: block; } input[type=submit], button[type=submit] { display: block; } #icecream_options { border-style: none; } .hidden { display: none; }console.log("hello!"); document.addEventListener("DOMContentLoaded", function(){ /* do stuff here */ console.log("dom is loaded!"); /* x hide options when page is loaded x click events for to yes and no radio x display or hide the options as appropriate (hide for 'no', show for 'yes') */ let iceCreamOptions = document.querySelector("#icecream_options"); console.log(iceCreamOptions); iceCreamOptions.classList.add("hidden"); /* get the "want" input radio */ let wantRadioInputs = document.querySelectorAll("form input[name=want]"); console.log(wantRadioInputs); wantRadioInputs.forEach( function(wantRadio){ wantRadio.addEventListener("click",function(){ console.log("want radio is clicked!"); let yesRadio = document.querySelector("#ic_yes"); console.log(yesRadio); console.log(yesRadio.checked); if ( yesRadio.checked == true ) { iceCreamOptions.classList.remove("hidden"); } else { iceCreamOptions.classList.add("hidden"); } }) } ); })JSFiddle - Example 9.1
• Example 9.2
  Example 9.2
  Codepen - Example 9.2
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist1"> </div>function makeSeasonsList() { let ul_node = document.createElement("ul"); /* Autumn */ let li_node1 = document.createElement("li"); let li_text1 = document.createTextNode("Autumn"); li_node1.appendChild(li_text1); /* Winter */ let li_node2 = document.createElement("li"); let li_text2 = document.createTextNode("Winter"); li_node2.appendChild(li_text2); /* Spring */ let li_node3 = document.createElement("li"); let li_text3 = document.createTextNode("Spring"); li_node3.appendChild(li_text3); /* Summer */ let li_node4 = document.createElement("li"); let li_text4 = document.createTextNode("Summer"); li_node4.appendChild(li_text4); /* Append the list items to the ul */ ul_node.appendChild(li_node1); ul_node.appendChild(li_node2); ul_node.appendChild(li_node3); ul_node.appendChild(li_node4); /* Place on page */ let container = document.getElementById("seasonslist1"); container.appendChild(ul_node); } /* Wait for DOM to be loaded, then add the click listener to the button */ document.addEventListener('DOMContentLoaded',function(){ document.getElementById('makelist').addEventListener('click', makeSeasonsList); });JSFiddle - Example 9.2
• Example 9.3
  Example 9.3
  Codepen - Example 9.3
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist2"> </div>function makeSeasonsList() { ul_node = document.createElement("ul"); let seasons = ['Spring', 'Summer', 'Autumn', 'Winter']; for (let i = 0 ; i < seasons.length ; i++ ) { let mytext = i + " " + seasons[i]; let text_node = document.createTextNode(mytext); let li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; let container = document.getElementById("seasonslist2"); container.appendChild(ul_node); } /* Wait for DOM to be loaded, then add the click listener to the button */ document.addEventListener('DOMContentLoaded',function(){ document.getElementById('makelist').addEventListener('click', makeSeasonsList); });JSFiddle - Example 9.3
• Example 9.4
  Example 9.4
  Codepen - Example 9.4
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist3"> </div>function makeSeasonsList() { ul_node = document.createElement("ul"); let seasons = ['Spring', 'Summer', 'Autumn', 'Winter']; seasons.forEach(function(s){ let text_node = document.createTextNode(s); let li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }); let container = document.getElementById("seasonslist3"); container.appendChild(ul_node); } /* Wait for DOM to be loaded, then add the click listener to the button */ document.addEventListener('DOMContentLoaded',function(){ document.getElementById('makelist').addEventListener('click', makeSeasonsList); });JSFiddle - Example 9.4
• Example 9.5
  Example 9.5
  Codepen - Example 9.5
  <h1>List of Fruits from Data</h1><div id="fruits"><!-- list goes here --></div>"use strict"; let fruits = { "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin'], "oranges": ['Naval Orange', 'Tangelo', 'Clementine', 'Valencia Orange'] }; document.addEventListener('DOMContentLoaded',function(){ buildFruitList(); }); function buildFruitList(){ let fruitList = document.createElement('ul'); for (const f in fruits) { console.log(f); let li = document.createElement('li'); li.appendChild(document.createTextNode(f)); if (Array.isArray(fruits[f])) { console.log(fruits[f]); let itemList = document.createElement('ul'); for (const item of fruits[f]) { let li = document.createElement('li'); li.appendChild(document.createTextNode(item)); itemList.appendChild(li); } li.appendChild(itemList); } fruitList.appendChild(li); } document.getElementById('fruits').appendChild(fruitList); }JSFiddle - Example 9.5