Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 15, 2015 19:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/bce2a84e6c763b0769b9 to your computer and use it in GitHub Desktop.
Save anonymous/bce2a84e6c763b0769b9 to your computer and use it in GitHub Desktop.
Download ZIP
Membership Form Alex Powelson Assignment 3 // source http://jsbin.com/vehezo
Raw
index.html
<!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>
Raw
jsbin.vehezo.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;
}
Raw
jsbin.vehezo.js
// 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