Create HTML, CSS, JavaScript:

Example 1 Format Example:

Example 2 Format Guideline:

Details Create a webpage with these controls: Textfield and label for country. Textfield and label for subcountry (state, province, region, etc.) Button with caption Show Cities. When clicked, it outputs the cities in the given the country and subcountry. Textarea and label to show all the cities for a given country and subcountry. You can create a textarea with scrollbars like this: Textfield and label for city. Button with caption Show Country/Subcountry. When clicked, it shows country and subcountry given the city. Textarea and label to show each country and subcountry that contains the city. Input Script: http://facweb.cdm.depaul.edu/sjost/cities.js You can access this script directly from the URL. You don't need to download it. HTML Page -- index.htm <!-- Kids TextArea Example Display kids information in three textarea controls --> <meta charset="utf-8"> <script src="kidsdata.js" x> <script src="script.js"></script> <link rel="stylesheet" href="styles.css"> <h1>KidsTextArea Example</h1> <label for="output1"> All kids from kidsdata: </label> <textarea id="output1" x for="output2"> All girls from kidsdata: <textarea id="output2" x> <label for="output3"> Gender and age of Billy from kidsdata: </label> <input type="text" id="output3"> CSS Page -- styles.htm /* KidsTextArea Example Display kids information in three textarea controls */ { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; background-color: #e0e0ff; color: black; } textarea { overflow-y: scroll; resize: none; width: 250px; height: 150px; color: maroon; } input { width: 200px; height: 25px; color: maroon; } Script File -- script.js // KidsTextArea Example // Display kids information in // three textarea controls function getAllKidsData() { var output = ""; var kidsData = JSON.parse (kids) ; for (obj of kidsData) { output += '${obj.name} ${obj.gender) ; output += "${obj.age} "; } return output; } = function getGirlsData() { var output var kids Data JSON.parse (kids) ; for (obj of kidsData) { if(obj.gender "F") { output += "${obj.name} ${obj.gender) output += '${obj.age} '; } } return output; } T! 11+ function getBillyData() { var output = ""; var kidsData = JSON.parse (kids) ; for (obj of kidsData) { if (obj.name "Billy") { output obj.gender + obj.age; break; } } return output; } function init() { var txtAreaAll = document.getElementById("output1"); txtAreaAll.value = getAllKidsData(); var txtAreaGirls = document.getElementById("output2"); txtAreaGirls.value = getGirlsData(); var txtAreaBilly document.getElementById("output3"); txtAreabilly.value = getBillyData(); } = window.addEventListener("load", init); HTML Page - index.htm <!-- Kids TextArea2 Example --> <script src="kidsdata.js" x> <script src="script.js"X</script> <style> textarea { overflow-y:scroll; resize: none; height: 100px; width: 200px; } </style> <h2>KidsTextArea2 Example</h2> <label for="kname">Enter desired name:<input type="input" id="kname"> <button id="btn1">Get Kid Info</button> <p id="output1" x> <label for="kname">Enter gender:</label> <input type="input" id="kgender"><brx id="btn2">Get by Gender<brx id="output2" x> Script File -- script.js // KidsTextArea2 Example // Display gender and age, given the name. function getByName() { var kidsArray = JSON.parse (kids) ; var requestedName = document.getElementById("kname").value; var para = document.getElementById("output1"); for (let k of kidsArray) { var n = k.name; var g = k.gender; var a = k.age; if (n requestedName) { para.innerHTML = ${n} ${g} ${a} '; } } } == // Display name and age given the gender. function getByGender() { var kidsArray = JSON.parse (kids) ; var requestedGender = document.getElementById("kgender").value; var output document.getElementById("output2"); var display = ""; for (let i of kidsArray) { var n = k.name; var g k.gender; a = k. age; if (g requestedGender) { display += ${n} ${g} ${a} "; } } output2.value = display: } = == // Attach event handlers function init() { var button1 = document.getElementById("btn1"); button1.addEventListener("click", getByName); var button2 = document.getElementById("btn2"); button2.addEventListener("click", getByGender); } // Invoke init method window.addEventListener("load", init); Details Create a webpage with these controls: Textfield and label for country. Textfield and label for subcountry (state, province, region, etc.) Button with caption Show Cities. When clicked, it outputs the cities in the given the country and subcountry. Textarea and label to show all the cities for a given country and subcountry. You can create a textarea with scrollbars like this: <textarea id="taOutput" x> Textfield and label for city. Button with caption Show Country/Subcountry. When clicked, it shows country and subcountry given the city. Textarea and label to show each country and subcountry that contains the city. Input Script: http://facweb.cdm.depaul.edu/sjost/cities.js You can access this script directly from the URL. You don't need to download it. HTML Page -- index.htm <!-- Kids TextArea Example Display kids information in three textarea controls --> <meta charset="utf-8"> <script src="kidsdata.js" x> <script src="script.js"></script> <link rel="stylesheet" href="styles.css"> <h1>KidsTextArea Example</h1> <label for="output1"> All kids from kidsdata: </label> <textarea id="output1" x for="output2"> All girls from kidsdata:

<label for="output3"> Gender and age of Billy from kidsdata: </label> <input type="text" id="output3"> CSS Page -- styles.htm /* KidsTextArea Example Display kids information in three textarea controls */ { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; background-color: #e0e0ff; color: black; } textarea { overflow-y: scroll; resize: none; width: 250px; height: 150px; color: maroon; } input { width: 200px; height: 25px; color: maroon; } Script File -- script.js // KidsTextArea Example // Display kids information in // three textarea controls function getAllKidsData() { var output = ""; var kidsData = JSON.parse (kids) ; for (obj of kidsData) { output += '${obj.name} ${obj.gender) ; output += "${obj.age} "; } return output; } = function getGirlsData() { var output var kids Data JSON.parse (kids) ; for (obj of kidsData) { if(obj.gender "F") { output += "${obj.name} ${obj.gender) output += '${obj.age} '; } } return output; } T! 11+ function getBillyData() { var output = ""; var kidsData = JSON.parse (kids) ; for (obj of kidsData) { if (obj.name "Billy") { output obj.gender + obj.age; break; } } return output; } function init() { var txtAreaAll = document.getElementById("output1"); txtAreaAll.value = getAllKidsData(); var txtAreaGirls = document.getElementById("output2"); txtAreaGirls.value = getGirlsData(); var txtAreaBilly document.getElementById("output3"); txtAreabilly.value = getBillyData(); } = window.addEventListener("load", init); HTML Page - index.htm <!-- Kids TextArea2 Example --> <script src="kidsdata.js" x> <script src="script.js"X</script> <style> textarea { overflow-y:scroll; resize: none; height: 100px; width: 200px; } </style> <h2>KidsTextArea2 Example</h2> <label for="kname">Enter desired name:<input type="input" id="kname"> <button id="btn1">Get Kid Info</button> <p id="output1" x> <label for="kname">Enter gender:</label> <input type="input" id="kgender"><brx id="btn2">Get by Gender<brx id="output2" x> Script File -- script.js // KidsTextArea2 Example // Display gender and age, given the name. function getByName() { var kidsArray = JSON.parse (kids) ; var requestedName = document.getElementById("kname").value; var para = document.getElementById("output1"); for (let k of kidsArray) { var n = k.name; var g = k.gender; var a = k.age; if (n requestedName) { para.innerHTML = ${n} ${g} ${a} '; } } } == // Display name and age given the gender. function getByGender() { var kidsArray = JSON.parse (kids) ; var requestedGender = document.getElementById("kgender").value; var output document.getElementById("output2"); var display = ""; for (let i of kidsArray) { var n = k.name; var g k.gender; a = k. age; if (g requestedGender) { display += ${n} ${g} ${a} "; } } output2.value = display: } = == // Attach event handlers function init() { var button1 = document.getElementById("btn1"); button1.addEventListener("click", getByName); var button2 = document.getElementById("btn2"); button2.addEventListener("click", getByGender); } // Invoke init method window.addEventListener("load", init)</brx></brx></p></label>