Session 10 - Javascript, Part 3
Code Examples

• Example 10.1
  Example 10.1
  Codepen - Example 10.1
  <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 10.1
• Example 10.2
  Example 10.2
  Codepen - Example 10.2
  <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 10.2
• Example 10.3
  Example 10.3
  Codepen - Example 10.3
  <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 10.3
• Example 10.4
  Example 10.4
  Codepen - Example 10.4
  <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 10.4