cjwinchester/Name-pusher-inner

## Name-pusher-inner
<!DOCTYPE html>
<html>
<head>

<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

ul {
list-style:none;
margin:0;
padding:0;
}
</style>

<script>
// create an empty array
var nameArray = [];

// main function
function pushNames() {

    var len = nameArray.length + 1;

// check to see if the input is blank
    if (document.getElementById('namepusher').value != null && document.getElementById('namepusher').value !="") {

// if not, push in text from the input box
    nameArray.push(document.getElementById('namepusher').value);

// make our counter div grammatical
    if (len > 1) {name = " names"} else {name = " name"};

// Convert 1-9 numbers per AP style
    if (len < 10) {
    counterupper=len.toString().replace("1","one").replace("2","two").replace("3","three").replace("4","four").replace("5","five").replace("6","six").replace("7","seven").replace("8","eight").replace("9","nine")
    } else {
        counterupper=len
    };

    var counter = '<small><em>You have entered ' + counterupper + name + '</em></small><br/>'
    document.getElementById('count').innerHTML = counter;

// loop through the array, create a list
    var content=''
    for (var i=0; i<len; i++) {
    content += [
    '<li>',
    nameArray[i],
    '</li>'
    ].join('');
    }
    document.getElementById('results').innerHTML = '<ul>' + content + '</ul>'
    } else {

// if input was blank, throw an alert
    alert("Please enter a name.")};

// reset the text input
    document.getElementById('namepusher').value = '';

}

// clearing function
function clearList () {
nameArray.length = 0;
document.getElementById('results').innerHTML = ''
document.getElementById('count').innerHTML = ''
}


</script>
</head>

<body>

<div id="container">

<h4>Enter a name</h4>
<span id="count"></span>
<input id="namepusher" type="text" onkeydown="Javascript: if (event.keyCode == 13) pushNames()"><input id="namebutton" type="button" value="GO" onclick="pushNames()"><input type="button" value="CLEAR" onclick="clearList()">
<div id="results" style="padding-top:10px;"></div>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<style>
	body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	ul {
	list-style:none;
	margin:0;
	padding:0;
	}
	</style>

	<script>
	// create an empty array
	var nameArray = [];

	// main function
	function pushNames() {

	var len = nameArray.length + 1;

	// check to see if the input is blank
	if (document.getElementById('namepusher').value != null && document.getElementById('namepusher').value !="") {

	// if not, push in text from the input box
	nameArray.push(document.getElementById('namepusher').value);

	// make our counter div grammatical
	if (len > 1) {name = " names"} else {name = " name"};

	// Convert 1-9 numbers per AP style
	if (len < 10) {
	counterupper=len.toString().replace("1","one").replace("2","two").replace("3","three").replace("4","four").replace("5","five").replace("6","six").replace("7","seven").replace("8","eight").replace("9","nine")
	} else {
	counterupper=len
	};

	var counter = '<small><em>You have entered ' + counterupper + name + '</em></small><br/>'
	document.getElementById('count').innerHTML = counter;

	// loop through the array, create a list
	var content=''
	for (var i=0; i<len; i++) {
	content += [
	'<li>',
	nameArray[i],
	'</li>'
	].join('');
	}
	document.getElementById('results').innerHTML = '<ul>' + content + '</ul>'
	} else {

	// if input was blank, throw an alert
	alert("Please enter a name.")};

	// reset the text input
	document.getElementById('namepusher').value = '';

	}

	// clearing function
	function clearList () {
	nameArray.length = 0;
	document.getElementById('results').innerHTML = ''
	document.getElementById('count').innerHTML = ''
	}


	</script>
	</head>

	<body>

	<div id="container">

	<h4>Enter a name</h4>
	<span id="count"></span>
	<input id="namepusher" type="text" onkeydown="Javascript: if (event.keyCode == 13) pushNames()"><input id="namebutton" type="button" value="GO" onclick="pushNames()"><input type="button" value="CLEAR" onclick="clearList()">
	<div id="results" style="padding-top:10px;"></div>
	</div>

	</body>
	</html>