bitwiser/html.html

## html.html
<!doctype html>
<html>
	<head>
		<title>BuzzButtons</title>
		<style>
		.error{
			color: red;
		}
		</style>
	</head>
	<body>
		<form id="mainForm" action="#">
			<h2>BuzzButtons order form</h2>
			<p>
				<input placeholder="Name" type="text" id="name">
				<span id="nameError" class="error"></span>
			</p>
			<p>
				<input type="text" id="email" placeholder="Email">
				<span id="emailError" class="error"></span>
			</p>
			<p>
				<input type="text" id="btnNumber" placeholder="Number of buttons">
				<span id="btnError" class="error"></span>
			</p>
			<input type="submit" value="Submit">
			<div id="message">
			</div>
		</form>
		<script>
			function get(id){
				return document.querySelector(id);
			}
			var frm = get("#mainForm");
			frm.addEventListener("submit",processForm);
			var em = get("#email");
			var num = get("#btnNumber");
			var nm = get("#name");
			function isValidEmail(email) {
				var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(reg.test(email))
					return true;
				return false;
			}
			function validateForm(){
				var ok = true;
				var nmError = get("#nameError");
				var numError = get("#btnError");
				var emError = get("#emailError");
				nmError.innerHTML="";
				numError.innerHTML="";
				emError.innerHTML="";
				if(nm.value==""){
					ok=false;
					nmError.innerHTML = 'Enter a valid number.';
									}
				if(typeof num.value=="number"){
					ok = false;
					numError.innerHTML = 'Enter a valid number.';
				}
				if(!isValidEmail(em.value)){
					ok = false;
					emError.innerHTML = 'Invalid email.';
				}
				return ok;
			}
			function processForm(e){
				e.preventDefault();
				var frm = get("#mainForm");
				var msg = get("#message");
				if(validateForm()){
					var tot = 0.99*num.value*(1.06)+2.00
					var ms = ""
					ms += "<p>Name: "+nm.value+"</p>";
					ms += "<p>Email: "+em.value+"</p>";
					ms += "<p>Number of buttons required: "+num.value+"</p>";
					ms += "<p>Price of buttons: $ "+num.value*(0.99)+"</p>";
					ms += "<p>Sales tax: 6%</p>";
					ms += "<p>Shipping amount: $2.00</p>";
					ms += "<p>Total amount to be paid: $"+tot+"</p>";
					msg.innerHTML = ms;

				}else{
					msg.innerHTML = '<p class="error">Invalid entry in form.</p>';
				}
				return false;
			}
		</script>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>BuzzButtons</title>
	<style>
	.error{
	color: red;
	}
	</style>
	</head>
	<body>
	<form id="mainForm" action="#">
	<h2>BuzzButtons order form</h2>
	<p>
	<input placeholder="Name" type="text" id="name">
	<span id="nameError" class="error"></span>
	</p>
	<p>
	<input type="text" id="email" placeholder="Email">
	<span id="emailError" class="error"></span>
	</p>
	<p>
	<input type="text" id="btnNumber" placeholder="Number of buttons">
	<span id="btnError" class="error"></span>
	</p>
	<input type="submit" value="Submit">
	<div id="message">
	</div>
	</form>
	<script>
	function get(id){
	return document.querySelector(id);
	}
	var frm = get("#mainForm");
	frm.addEventListener("submit",processForm);
	var em = get("#email");
	var num = get("#btnNumber");
	var nm = get("#name");
	function isValidEmail(email) {
	var reg = /^\w+([-+.']\w+)@\w+([-.]\w+)\.\w+([-.]\w+)*$/;
	if(reg.test(email))
	return true;
	return false;
	}
	function validateForm(){
	var ok = true;
	var nmError = get("#nameError");
	var numError = get("#btnError");
	var emError = get("#emailError");
	nmError.innerHTML="";
	numError.innerHTML="";
	emError.innerHTML="";
	if(nm.value==""){
	ok=false;
	nmError.innerHTML = 'Enter a valid number.';
	}
	if(typeof num.value=="number"){
	ok = false;
	numError.innerHTML = 'Enter a valid number.';
	}
	if(!isValidEmail(em.value)){
	ok = false;
	emError.innerHTML = 'Invalid email.';
	}
	return ok;
	}
	function processForm(e){
	e.preventDefault();
	var frm = get("#mainForm");
	var msg = get("#message");
	if(validateForm()){
	var tot = 0.99num.value(1.06)+2.00
	var ms = ""
	ms += "<p>Name: "+nm.value+"</p>";
	ms += "<p>Email: "+em.value+"</p>";
	ms += "<p>Number of buttons required: "+num.value+"</p>";
	ms += "<p>Price of buttons: $ "+num.value*(0.99)+"</p>";
	ms += "<p>Sales tax: 6%</p>";
	ms += "<p>Shipping amount: $2.00</p>";
	ms += "<p>Total amount to be paid: $"+tot+"</p>";
	msg.innerHTML = ms;

	}else{
	msg.innerHTML = '<p class="error">Invalid entry in form.</p>';
	}
	return false;
	}
	</script>
	</body>
	</html>