Session 09 - Javascript, Part 2
Examples

• Example 9.1 - Ice Cream Options  
  <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream? <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></div><fieldset id="icecream_options"><legend>Ice Cream Options</legend><p>Cup or a Cone?</p><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><p>Pick your toppings:</p><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><button type="submit">Submit Order</button></form>#icecream_options { background-color: rgb(238, 238, 238); padding: 1rem; margin-top: 1rem; display: block; } #icecream_options.hide { display: none; } label { display: block; }document.addEventListener("DOMContentLoaded", function() { console.log('dom is loaded!'); let icOptions = document.getElementById('icecream_options'); console.log(icOptions); icOptions.classList.add('hide'); let yesRadio = document.getElementById('ic_yes'); yesRadio.addEventListener('click', function(){ /* remove "hide" class from icecream_options */ if (yesRadio.checked == true) { icOptions.classList.remove('hide'); } }); let noRadio = document.getElementById('ic_no'); noRadio.addEventListener('click',function(){ /* add 'hide' class */ if (noRadio.checked == true) { icOptions.classList.add('hide'); } }); }); }JSFiddle - Example 9.1
• Example 9.2 - Ice Cream Options  
  <h3>Ice Cream</h3><form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream? <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></div><fieldset id="icecream_options"><legend>Ice Cream Options</legend><p>Cup or a Cone?</p><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><p>Pick your toppings:</p><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><p><input type="submit"/></p></form>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} label { display: block;} input[type=submit] {display: block; margin-top: 1rem;} #icecream_options { display: block; background-color: rgb(238, 238, 238); margin-left: 1em; } #icecream_options.hide { display: none; } "use strict"; let inputsWant; console.log("hello from ice_cream.js"); document.addEventListener("DOMContentLoaded", function () { /* here's where JS goes for when DOM is loaded */ /* add click listener to yes and no input choices use "querySelectorAll", which lets us use CSS selectors! querySelectorAll returns a list of things that we can loop through via 'for ( item of list ) { }' */ inputsWant = document.querySelectorAll("form input[name=want]"); console.log(inputsWant); for (let input of inputsWant) { console.log(input); input.addEventListener("click", iceCreamOptionsDisplay); } }); function iceCreamOptionsDisplay() { let icoEl, radioYes; console.log("in iceCreamOptionsDisplay"); icoEl = document.getElementById("icecream_options"); console.log(icoEl); radioYes = document.getElementById("ic_yes"); if (radioYes.checked == true) { icoEl.classList.remove('hide'); } else { icoEl.classList.add('hide'); } }JSFiddle - Example 9.2
• Example 9.3  
  <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.3
• Example 9.4  
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist2"> </div>JSFiddle - Example 9.4
• Example 9.5  
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist3"> </div>JSFiddle - Example 9.5
• Example 9.6  
  <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.6