5. The focus of this lab is to create a simple web page that will help parents t
ID: 3587586 • Letter: 5
Question
5. The focus of this lab is to create a simple web page that will help parents to select a name for their baby. The idea is to let the user enter several names that are being considered and then your web page will randomly choose one of the names 6. The user interface is relatively simple as you'll only need a single text box, along with a couple of buttons and a edivo for output. The prompt for the text box should be as folows: Next Name: default is "No Name 7. The way your solution should work is that when the user types a name into the text box and then clicks the "Add Name" button, you should add the entered name to the end of an array. As a result, youll need to create a global array (an aray that's initially created outside ether event handler function). 8. When the user has entered some number of names, they will click the "Pick Name" button and you'll need to generate a random number (see the notes below) that can be used to select one of the elements in the names array Sample Output: i!! Apps D Free Homad G Googie Suggested Snes dd Name Jimbo Ball Ted Fred George Mike C2017 Fanshawe College of 4 NFO3114, Fal 2017Explanation / Answer
<html>
<head>
<script>
names = [];
i = 1;
function addName() {
i = i + 1;
names.push(document.getElementById("name").value);
var table = document.getElementById("list_table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode(document.getElementById("name").value);
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
}
function pickName() {
x = Math.floor(Math.random() * names.length);
alert ("name picked is " + names[x]);
}
</script>
</head>
<body>
<div>
<form>
Next name<br/>
<input type="text" name="name" id="name"><br/>
</form>
<button>Add name</button><br/><br/>
</div>
<div>
<button type="button">Pick Name!</button>
</div>
<div>
<table name="list_table" id="list_table">
</table>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.