-
-
Save alexpow/80cafb4b4d24d39cb0e4 to your computer and use it in GitHub Desktop.
Membership Form Alex Powelson Assignment 3 // source http://jsbin.com/vehezo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="description" content="Alex Powelson Assignment 3" /> | |
<meta charset="utf-8"> | |
<title>Membership Form</title> | |
<!--[if lt IE 9]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<link rel="stylesheet" href="css/form.css"> | |
<style id="jsbin-css"> | |
/* | |
dark blue: 212B40 | |
gray-blue: 547B97 | |
gray-green-blue: BADCDD | |
light-green: C2E078 | |
*/ | |
/* | |
dark blue: 1B1D26 | |
dark green: 425955 | |
gray-green: 778C7A | |
off-white: F1F2D8 | |
tan: BFBD9F | |
*/ | |
body{ | |
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; | |
font-size:12px; | |
color: #1b1d26; | |
background-color: #f1f2d8; | |
} | |
p, h1, form, button{border:0; margin:0; padding:0;} | |
.spacer{clear:both; height:1px;} | |
/* ----------- My Form ----------- */ | |
form{ | |
margin:0 auto; | |
width:400px; | |
padding:14px; | |
background-color: #ffffff; | |
border:solid 2px #425955; | |
} | |
/* ----------- stylized ----------- */ | |
h1 { | |
font-size:14px; | |
font-weight:bold; | |
margin-bottom:8px; | |
} | |
p{ | |
font-size:11px; | |
color:#666666; | |
margin-bottom:20px; | |
border-bottom:solid 1px #BFBD9F; | |
padding-bottom:10px; | |
} | |
label{ | |
display:block; | |
font-weight:bold; | |
text-align:right; | |
width:140px; | |
float:left; | |
} | |
.small{ | |
color:#666666; | |
display:block; | |
font-size:11px; | |
font-weight:normal; | |
text-align:right; | |
width:140px; | |
} | |
select{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
input{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
#submit{ | |
clear:both; | |
margin-left:150px; | |
width:125px; | |
height:31px; | |
background:#F1F2D8; | |
text-align:center; | |
line-height:20px; | |
color:#000000; | |
font-size:12px; | |
font-weight:bold; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- contact.html --> | |
<form action="" method="post" id="theForm"> | |
<fieldset><legend>Contact</legend> | |
<div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div> | |
<div><label for="comments">Comments</label><textarea name="comments" id="comments" required></textarea></div> | |
</fieldset> | |
<fieldset><legend>Create Your Membership</legend> | |
<p>Complete this form to calculate your membership. There's a 20% discount if you enroll for more than one year!</p> | |
<div><label for="type">Type</label> <select name="type" id="type" required> | |
<option value="basic">Basic - $10.00</option> | |
<option value="premium">Premium - $15.00</option> | |
<option value="gold">Gold - $20.00</option> | |
<option value="platinum">Platinum - $25.00</option> | |
<option value="titanium">Titanium - $30.00</option> | |
</select></div> | |
<div><label for="years">Years</label><input type="number" name="years" id="years" min="1" required></div> | |
<div><label for="cost">Cost</label><input type="text" name="cost" id="cost" disabled></div> | |
<input type="submit" value="Calculate" id="submit"> | |
</fieldset> | |
<fieldset><legend>Here are your winning lotto numbers!</legend> | |
<p>Winning Numbers: <span id="output"></span></p> | |
</fieldset> | |
</form> | |
<script src="js/contact.js"></script> | |
<script id="jsbin-javascript"> | |
// contact.js | |
// This script checks a contact form submission for HTML and a valid email address. | |
// Function called when the form is submitted. | |
// Function validates the data and returns a Boolean. | |
function process() { | |
'use strict'; | |
// Variable to represent validity: | |
var okay = true; | |
// Get form references: | |
var email = document.getElementById('email'); | |
// referenced comments | |
var comments = document.getElementById('comments'); | |
// Validate the email address: | |
if (!email || !email.value || (email.value.length < 8) || (email.value.indexOf('@') == -1 )) { | |
okay = false; | |
alert('Please enter a valid email address!'); | |
} | |
// Validate the comments: | |
//---- begin the if statement here to check for existence of comments and comments.value | |
if ( !comments || (comments.value.indexOf('<') != -1) ) { | |
okay = false; | |
alert('Please enter your comments, without any HTML!'); | |
} | |
// Call the showNumbers() function | |
showNumbers(); | |
// Call the calculate() function | |
calculate(); | |
// Return false to prevent submission: | |
return false; | |
} // End of process() function. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
// Be strict: | |
'use strict'; | |
// Variable to store the total cost: | |
var cost; | |
// Get a reference to the form elements: | |
var type = document.getElementById('type'); | |
var years = document.getElementById('years'); | |
// Convert the year to a number: KEEP WORKING ON THIS | |
if (years > 0 && years.value < 10) { | |
okay = true; | |
years = parseInt(years.value, 10); | |
} | |
// Check for valid data: | |
if (type && type.value && years && (years > 0) ) { | |
// Determine the base cost: | |
// used the switch conditional here and make type.value the condition for it page 148 | |
switch(type.value){ | |
case 'basic': | |
cost = 10.00; | |
break; | |
case 'premium': | |
cost = 15.00; | |
break; | |
case 'gold': | |
cost = 20.00; | |
break; | |
case 'platinum': | |
cost = 25.00; | |
break; | |
case 'titanium': | |
cost = 30.00; | |
break; | |
default: | |
console.log("does not exist"); | |
break; | |
// added titanium level here | |
} // End of switch. | |
// Factor in the number of years: | |
cost *= years; | |
// Discount multiple years: | |
if (years > 1) { | |
cost *= 0.80; // 80% | |
} | |
// Show the total amount: | |
document.getElementById('cost').value = '$' + cost.toFixed(2); | |
} else { // Show an error: | |
document.getElementById('cost').value = 'Please enter valid values.'; | |
} | |
// Return false to prevent submission: | |
return false; | |
} // End of calculate() function. | |
// This function is called by the process() function. | |
// Function finds six random numbers and displays them in a paragraph. | |
function showNumbers() { | |
'use strict'; | |
// Variable to store the lucky numbers: | |
var numbers = ''; | |
// Get the numbers: I AM HERE | |
// set up a for loop that will start and 0 and loop 6 times | |
numbers += parseInt((Math.random() * 100), 10) + ' '; | |
} | |
// Show the numbers: | |
var output = document.getElementById('output'); | |
if (output.textContent !== undefined) { | |
output.textContent = numbers; | |
} else { | |
output.innerText = numbers; | |
} | |
} // End of showNumbers() function. | |
// Initial setup: | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} // End of init() function. | |
window.onload = init; | |
</script> | |
<script id="jsbin-source-css" type="text/css">/* | |
dark blue: 212B40 | |
gray-blue: 547B97 | |
gray-green-blue: BADCDD | |
light-green: C2E078 | |
*/ | |
/* | |
dark blue: 1B1D26 | |
dark green: 425955 | |
gray-green: 778C7A | |
off-white: F1F2D8 | |
tan: BFBD9F | |
*/ | |
body{ | |
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; | |
font-size:12px; | |
color: #1b1d26; | |
background-color: #f1f2d8; | |
} | |
p, h1, form, button{border:0; margin:0; padding:0;} | |
.spacer{clear:both; height:1px;} | |
/* ----------- My Form ----------- */ | |
form{ | |
margin:0 auto; | |
width:400px; | |
padding:14px; | |
background-color: #ffffff; | |
border:solid 2px #425955; | |
} | |
/* ----------- stylized ----------- */ | |
h1 { | |
font-size:14px; | |
font-weight:bold; | |
margin-bottom:8px; | |
} | |
p{ | |
font-size:11px; | |
color:#666666; | |
margin-bottom:20px; | |
border-bottom:solid 1px #BFBD9F; | |
padding-bottom:10px; | |
} | |
label{ | |
display:block; | |
font-weight:bold; | |
text-align:right; | |
width:140px; | |
float:left; | |
} | |
.small{ | |
color:#666666; | |
display:block; | |
font-size:11px; | |
font-weight:normal; | |
text-align:right; | |
width:140px; | |
} | |
select{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
input{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
#submit{ | |
clear:both; | |
margin-left:150px; | |
width:125px; | |
height:31px; | |
background:#F1F2D8; | |
text-align:center; | |
line-height:20px; | |
color:#000000; | |
font-size:12px; | |
font-weight:bold; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// contact.js | |
// This script checks a contact form submission for HTML and a valid email address. | |
// Function called when the form is submitted. | |
// Function validates the data and returns a Boolean. | |
function process() { | |
'use strict'; | |
// Variable to represent validity: | |
var okay = true; | |
// Get form references: | |
var email = document.getElementById('email'); | |
// referenced comments | |
var comments = document.getElementById('comments'); | |
// Validate the email address: | |
if (!email || !email.value || (email.value.length < 8) || (email.value.indexOf('@') == -1 )) { | |
okay = false; | |
alert('Please enter a valid email address!'); | |
} | |
// Validate the comments: | |
//---- begin the if statement here to check for existence of comments and comments.value | |
if ( !comments || (comments.value.indexOf('<') != -1) ) { | |
okay = false; | |
alert('Please enter your comments, without any HTML!'); | |
} | |
// Call the showNumbers() function | |
showNumbers(); | |
// Call the calculate() function | |
calculate(); | |
// Return false to prevent submission: | |
return false; | |
} // End of process() function. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
// Be strict: | |
'use strict'; | |
// Variable to store the total cost: | |
var cost; | |
// Get a reference to the form elements: | |
var type = document.getElementById('type'); | |
var years = document.getElementById('years'); | |
// Convert the year to a number: KEEP WORKING ON THIS | |
if (years > 0 && years.value < 10) { | |
okay = true; | |
years = parseInt(years.value, 10); | |
} | |
// Check for valid data: | |
if (type && type.value && years && (years > 0) ) { | |
// Determine the base cost: | |
// used the switch conditional here and make type.value the condition for it page 148 | |
switch(type.value){ | |
case 'basic': | |
cost = 10.00; | |
break; | |
case 'premium': | |
cost = 15.00; | |
break; | |
case 'gold': | |
cost = 20.00; | |
break; | |
case 'platinum': | |
cost = 25.00; | |
break; | |
case 'titanium': | |
cost = 30.00; | |
break; | |
default: | |
console.log("does not exist"); | |
break; | |
// added titanium level here | |
} // End of switch. | |
// Factor in the number of years: | |
cost *= years; | |
// Discount multiple years: | |
if (years > 1) { | |
cost *= 0.80; // 80% | |
} | |
// Show the total amount: | |
document.getElementById('cost').value = '$' + cost.toFixed(2); | |
} else { // Show an error: | |
document.getElementById('cost').value = 'Please enter valid values.'; | |
} | |
// Return false to prevent submission: | |
return false; | |
} // End of calculate() function. | |
// This function is called by the process() function. | |
// Function finds six random numbers and displays them in a paragraph. | |
function showNumbers() { | |
'use strict'; | |
// Variable to store the lucky numbers: | |
var numbers = ''; | |
// Get the numbers: I AM HERE | |
// set up a for loop that will start and 0 and loop 6 times | |
numbers += parseInt((Math.random() * 100), 10) + ' '; | |
} | |
// Show the numbers: | |
var output = document.getElementById('output'); | |
if (output.textContent !== undefined) { | |
output.textContent = numbers; | |
} else { | |
output.innerText = numbers; | |
} | |
} // End of showNumbers() function. | |
// Initial setup: | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} // End of init() function. | |
window.onload = init;</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
dark blue: 212B40 | |
gray-blue: 547B97 | |
gray-green-blue: BADCDD | |
light-green: C2E078 | |
*/ | |
/* | |
dark blue: 1B1D26 | |
dark green: 425955 | |
gray-green: 778C7A | |
off-white: F1F2D8 | |
tan: BFBD9F | |
*/ | |
body{ | |
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; | |
font-size:12px; | |
color: #1b1d26; | |
background-color: #f1f2d8; | |
} | |
p, h1, form, button{border:0; margin:0; padding:0;} | |
.spacer{clear:both; height:1px;} | |
/* ----------- My Form ----------- */ | |
form{ | |
margin:0 auto; | |
width:400px; | |
padding:14px; | |
background-color: #ffffff; | |
border:solid 2px #425955; | |
} | |
/* ----------- stylized ----------- */ | |
h1 { | |
font-size:14px; | |
font-weight:bold; | |
margin-bottom:8px; | |
} | |
p{ | |
font-size:11px; | |
color:#666666; | |
margin-bottom:20px; | |
border-bottom:solid 1px #BFBD9F; | |
padding-bottom:10px; | |
} | |
label{ | |
display:block; | |
font-weight:bold; | |
text-align:right; | |
width:140px; | |
float:left; | |
} | |
.small{ | |
color:#666666; | |
display:block; | |
font-size:11px; | |
font-weight:normal; | |
text-align:right; | |
width:140px; | |
} | |
select{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
input{ | |
float:left; | |
font-size:12px; | |
padding:4px 2px; | |
border:solid 1px #BFBD9F; | |
width:200px; | |
margin:2px 0 20px 10px; | |
} | |
#submit{ | |
clear:both; | |
margin-left:150px; | |
width:125px; | |
height:31px; | |
background:#F1F2D8; | |
text-align:center; | |
line-height:20px; | |
color:#000000; | |
font-size:12px; | |
font-weight:bold; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// contact.js | |
// This script checks a contact form submission for HTML and a valid email address. | |
// Function called when the form is submitted. | |
// Function validates the data and returns a Boolean. | |
function process() { | |
'use strict'; | |
// Variable to represent validity: | |
var okay = true; | |
// Get form references: | |
var email = document.getElementById('email'); | |
// referenced comments | |
var comments = document.getElementById('comments'); | |
// Validate the email address: | |
if (!email || !email.value || (email.value.length < 8) || (email.value.indexOf('@') == -1 )) { | |
okay = false; | |
alert('Please enter a valid email address!'); | |
} | |
// Validate the comments: | |
//---- begin the if statement here to check for existence of comments and comments.value | |
if ( !comments || (comments.value.indexOf('<') != -1) ) { | |
okay = false; | |
alert('Please enter your comments, without any HTML!'); | |
} | |
// Call the showNumbers() function | |
showNumbers(); | |
// Call the calculate() function | |
calculate(); | |
// Return false to prevent submission: | |
return false; | |
} // End of process() function. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
// Be strict: | |
'use strict'; | |
// Variable to store the total cost: | |
var cost; | |
// Get a reference to the form elements: | |
var type = document.getElementById('type'); | |
var years = document.getElementById('years'); | |
// Convert the year to a number: KEEP WORKING ON THIS | |
if (years > 0 && years.value < 10) { | |
okay = true; | |
years = parseInt(years.value, 10); | |
} | |
// Check for valid data: | |
if (type && type.value && years && (years > 0) ) { | |
// Determine the base cost: | |
// used the switch conditional here and make type.value the condition for it page 148 | |
switch(type.value){ | |
case 'basic': | |
cost = 10.00; | |
break; | |
case 'premium': | |
cost = 15.00; | |
break; | |
case 'gold': | |
cost = 20.00; | |
break; | |
case 'platinum': | |
cost = 25.00; | |
break; | |
case 'titanium': | |
cost = 30.00; | |
break; | |
default: | |
console.log("does not exist"); | |
break; | |
// added titanium level here | |
} // End of switch. | |
// Factor in the number of years: | |
cost *= years; | |
// Discount multiple years: | |
if (years > 1) { | |
cost *= 0.80; // 80% | |
} | |
// Show the total amount: | |
document.getElementById('cost').value = '$' + cost.toFixed(2); | |
} else { // Show an error: | |
document.getElementById('cost').value = 'Please enter valid values.'; | |
} | |
// Return false to prevent submission: | |
return false; | |
} // End of calculate() function. | |
// This function is called by the process() function. | |
// Function finds six random numbers and displays them in a paragraph. | |
function showNumbers() { | |
'use strict'; | |
// Variable to store the lucky numbers: | |
var numbers = ''; | |
// Get the numbers: I AM HERE | |
// set up a for loop that will start and 0 and loop 6 times | |
numbers += parseInt((Math.random() * 100), 10) + ' '; | |
} | |
// Show the numbers: | |
var output = document.getElementById('output'); | |
if (output.textContent !== undefined) { | |
output.textContent = numbers; | |
} else { | |
output.innerText = numbers; | |
} | |
} // End of showNumbers() function. | |
// Initial setup: | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = process; | |
} // End of init() function. | |
window.onload = init; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment