Session 09 - Javascript, Part 2
Examples

• Example 9.1 - 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: none; background-color: rgb(238, 238, 238); margin-left: 1em; } "use strict"; console.log("hello from ice_cream.js"); let inputYes, inputNo, icoEl; window.addEventListener('DOMContentLoaded', function(){ /* here's where JS goes for when DOM is loaded */ /* add click listener to yes and no */ inputYes = document.getElementById('ic_yes'); inputYes.addEventListener('click', function() { iceCreamOptionsDisplay(); } ); inputNo = document.getElementById('ic_no'); inputNo.addEventListener('click', function() { iceCreamOptionsDisplay(); }); }); function iceCreamOptionsDisplay() { /* function that tests whether 'Yes' or 'No' has been selected and sets ice cream option display as needed */ console.log("in function iceCreamOptionsDisplay"); icoEl = document.getElementById('icecream_options'); console.log(icoEl); inputYes = document.getElementById('ic_yes'); if (inputYes.checked == true) { icoEl.style.display = 'block'; } else { icoEl.style.display = 'none'; } } 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: none; background-color: rgb(238, 238, 238); margin-left: 1em; } "use strict"; let inputsWant; console.log("hello from ice_cream.js"); window.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, inputYes; console.log("in iceCreamOptionsDisplay"); icoEl = document.getElementById("icecream_options"); console.log(icoEl); inputYes = document.getElementById("ic_yes"); if (inputYes.checked == true) { icoEl.style.display = "block"; } else { icoEl.style.display = "none"; } }JSFiddle - Example 9.2
• Example 9.3 - 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_options3"><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_options3 { background-color: rgb(238, 238, 238); margin-left: 1em; } "use strict"; let inputsWant; console.log("hello from ice_cream.js"); window.addEventListener("DOMContentLoaded", function () { /* here's where JS goes for when DOM is loaded */ /* select ice cream options and hide */ document.getElementById('icecream_options3').style.display = 'none'; /* 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, inputYes; console.log("in iceCreamOptionsDisplay"); icoEl = document.getElementById("icecream_options3"); console.log(icoEl); inputYes = document.getElementById("ic_yes"); if (inputYes.checked == true) { icoEl.style.display = "block"; } else { icoEl.style.display = "none"; } }JSFiddle - Example 9.3
• Example 9.4  
  <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 */ window.addEventListener('DOMContentLoaded',function(){ document.getElementById('makelist').addEventListener('click', makeSeasonsList); });JSFiddle - Example 9.4
• Example 9.5  
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist2"> </div>JSFiddle - Example 9.5
• Example 9.6  
  <p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist3"> </div>JSFiddle - Example 9.6
• Example 9.7  
  <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'] }; window.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.7