bzdgn · January 14, 2016 10:09
diff --git a/ObjectPrototype.html b/ObjectPrototype.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<style>
 		input[type=text]{
 			width: 110px;
 		}
 		input[type=number]{
 			width: 110px;
 		}
 		.loneButton{
 			width: 201px;
 		}
 		</style>
 	</head>
 	<body>
 		<h1>Object Prototype Example #1</h1>
 		<br>
 		<h3>Creating an object with a prototype</h3>
 		<br>
 		<table>
 			<tr>
 				<td>
 					First Name : 
 				</td>
 				<td>
 					<input id="inputFirstName" type="text" required>
 				</td>
 			</tr>
 			<tr>
 				<td>
 					Last Name : 
 				</td>
 				<td>
 					<input id="inputLastName" type="text" required>
 				</td>
 			</tr>
 			<tr>
 				<td>
 					Age : 
 				</td>
 				<td>
 					<input id="inputAge" type="number" min="18" max="120" required>
 				</td>
 			</tr>
 			<tr>
 				<td>
 					Eye Color : 
 				</td>
 				<td>
 					<input id="inputEyeColor" type="text" required>
 				</td>
 			</tr>
 		</table>
 		<button type="button" class="loneButton" onclick="createObject()">Create Object</button><br>
 		<button type="button" class="loneButton" onclick="resetAll()">Reset All</button>
 		<br>
 		<p id="output">Person: </p>
 		<p id="state">State : </p>
 		
 		<script>
 		"use strict";
 		
 		var outputPre01 = document.getElementById("output").innerHTML;
 		var outputPre02 = document.getElementById("state").innerHTML;
 		
 		var inputName = document.getElementById("inputName");
 		var personTemp;
 		
 		
 		// createObject
 		function createObject() {
 			var output = document.getElementById("output");
 			var outputMsg = "Object NOT build";
 			
 			if( isValidInput() ) {
 				personTemp = new person(
 					document.getElementById("inputFirstName").value,
 					document.getElementById("inputLastName").value,
 					document.getElementById("inputAge").value,
 					document.getElementById("inputEyeColor").value
 				);
 				
 				outputMsg = JSON.stringify(personTemp);
 			}
 			
 			writeToOutput( output, outputPre01 + outputMsg );
 		}
 		
 		function isValidInput() {		
 			var state = document.getElementById("state");
 			var stateMsg = "";
 			var isValid = false;
 			
 			var inputs = [
 				document.getElementById("inputFirstName"),
 				document.getElementById("inputLastName"),
 				document.getElementById("inputAge"),
 				document.getElementById("inputEyeColor")
 			];
 			
 			var inputItemSize = inputs.length;
 			var i;
 			for(i = 0; i < inputItemSize; i++) {
 				if( inputs[i].validity.valueMissing ) {
 					stateMsg = "An input must be entered";
 					break;
 				} else if ( inputs[i].validity.rangeUnderflow ) {
 					stateMsg = "Value too small";
 					break;
 				} else if ( inputs[i].validity.rangeOverflow ) {
 					stateMsg = "Valu too big";
 					break;
 				} else {
 					if( i == (inputItemSize - 1) ) {
 						stateMsg = "All inputs are OK";
 						isValid = true;
 						break;
 					}
 				}
 			}
 			
 			writeToOutput( state, outputPre02 + stateMsg );
 			return isValid;
 		}
 		
 		// person prototype
 		function person(first, last, age, eye) {
 			this.firstName	= first;
 			this.lastName	= last;
 			this.age		= age;
 			this.eye		= eye;
 		}
 		
 		// reset Content
 		function resetAll() {
 			document.getElementById("output").innerHTML	= outputPre01;
 			document.getElementById("state").innerHTML	= outputPre02;
 			
 			document.getElementById("inputFirstName").value	= "";
 			document.getElementById("inputLastName").value	= "";
 			document.getElementById("inputAge").value		= "";
 			document.getElementById("inputEyeColor").value	= "";
 		}
 		
 		// writer
 		function writeToOutput(outId, msg) {
 			outId.innerHTML = msg;
 		}
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	input[type=text]{
	width: 110px;
	}
	input[type=number]{
	width: 110px;
	}
	.loneButton{
	width: 201px;
	}
	</style>
	</head>
	<body>
	<h1>Object Prototype Example #1</h1>
	<br>
	<h3>Creating an object with a prototype</h3>
	<br>
	<table>
	<tr>
	<td>
	First Name :
	</td>
	<td>
	<input id="inputFirstName" type="text" required>
	</td>
	</tr>
	<tr>
	<td>
	Last Name :
	</td>
	<td>
	<input id="inputLastName" type="text" required>
	</td>
	</tr>
	<tr>
	<td>
	Age :
	</td>
	<td>
	<input id="inputAge" type="number" min="18" max="120" required>
	</td>
	</tr>
	<tr>
	<td>
	Eye Color :
	</td>
	<td>
	<input id="inputEyeColor" type="text" required>
	</td>
	</tr>
	</table>
	<button type="button" class="loneButton" onclick="createObject()">Create Object</button><br>
	<button type="button" class="loneButton" onclick="resetAll()">Reset All</button>
	<br>
	<p id="output">Person: </p>
	<p id="state">State : </p>

	<script>
	"use strict";

	var outputPre01 = document.getElementById("output").innerHTML;
	var outputPre02 = document.getElementById("state").innerHTML;

	var inputName = document.getElementById("inputName");
	var personTemp;


	// createObject
	function createObject() {
	var output = document.getElementById("output");
	var outputMsg = "Object NOT build";

	if( isValidInput() ) {
	personTemp = new person(
	document.getElementById("inputFirstName").value,
	document.getElementById("inputLastName").value,
	document.getElementById("inputAge").value,
	document.getElementById("inputEyeColor").value
	);

	outputMsg = JSON.stringify(personTemp);
	}

	writeToOutput( output, outputPre01 + outputMsg );
	}

	function isValidInput() {
	var state = document.getElementById("state");
	var stateMsg = "";
	var isValid = false;

	var inputs = [
	document.getElementById("inputFirstName"),
	document.getElementById("inputLastName"),
	document.getElementById("inputAge"),
	document.getElementById("inputEyeColor")
	];

	var inputItemSize = inputs.length;
	var i;
	for(i = 0; i < inputItemSize; i++) {
	if( inputs[i].validity.valueMissing ) {
	stateMsg = "An input must be entered";
	break;
	} else if ( inputs[i].validity.rangeUnderflow ) {
	stateMsg = "Value too small";
	break;
	} else if ( inputs[i].validity.rangeOverflow ) {
	stateMsg = "Valu too big";
	break;
	} else {
	if( i == (inputItemSize - 1) ) {
	stateMsg = "All inputs are OK";
	isValid = true;
	break;
	}
	}
	}

	writeToOutput( state, outputPre02 + stateMsg );
	return isValid;
	}

	// person prototype
	function person(first, last, age, eye) {
	this.firstName = first;
	this.lastName = last;
	this.age = age;
	this.eye = eye;
	}

	// reset Content
	function resetAll() {
	document.getElementById("output").innerHTML = outputPre01;
	document.getElementById("state").innerHTML = outputPre02;

	document.getElementById("inputFirstName").value = "";
	document.getElementById("inputLastName").value = "";
	document.getElementById("inputAge").value = "";
	document.getElementById("inputEyeColor").value = "";
	}

	// writer
	function writeToOutput(outId, msg) {
	outId.innerHTML = msg;
	}
	</script>
	</body>
	</html>