BuzzButtons is a novelty item company manufacturing personalized lapel buttons.
ID: 3551422 • Letter: B
Question
BuzzButtons is a novelty item company manufacturing personalized lapel buttons. The owner is promoting his buttons by offering them at 99 cents each. He wants you to design a program asking the user for his or her name for the button, an e-mail address, and the number of buttons to order. The program should then add a 6% sales tax and a flat shipping rate of $2.00. The profram displays the information the user enters as well as the button price total, sales tax amount, shipping amount, and order total. The company contacts the user by e-mail later for shipping address information.
Using psuedocode, design an algorithm that asks for the user for the number of fixed-price items to order, adds sales tax and flat-rate shipping, and displays the result.
Using JavaScript, write the button order program.
Explanation / Answer
<!-- formatted code at: https://gist.github.com/bitwiser/9309263 -->
<!doctype html>
<html>
<head>
<title>BuzzButtons</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="mainForm" action="#">
<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>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.