Created
December 15, 2015 19:25
-
-
Save anonymous/9fc96052b9a574719d88 to your computer and use it in GitHub Desktop.
Shopping Calculator Alex Powelson Assignment 2 Part 1 // source http://jsbin.com/qicifi
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 2 Part 1" /> | |
<meta charset="utf-8"> | |
<title>Shopping Calculator</title> | |
<!--[if lt IE 9]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<link rel="stylesheet" href="css/styles.css"> | |
<style id="jsbin-css"> | |
// From: http://www.assemblesoft.com/examples/form/simpleform.html | |
* {margin:0; padding:0;} | |
html { | |
font: 90%/1.3 arial,sans-serif; | |
padding:1em; | |
background:#B9C2CC; | |
} | |
form { | |
background:#fff; | |
padding:1em; | |
border:1px solid #eee; | |
} | |
fieldset div { | |
margin:0.3em 0; | |
clear:both; | |
} | |
form { | |
margin:1em; | |
width:15em; | |
} | |
label { | |
float:none; | |
width:12em; | |
display:block; | |
clear:both; | |
} | |
legend { | |
color:#0b77b7; | |
font-size:1.4em; | |
} | |
legend span { | |
width:10em; | |
text-align:right; | |
} | |
input { | |
padding:0.15em; | |
width:10em; | |
border:1px solid #ddd; | |
background:#fafafa; | |
font:bold 1em arial, sans-serif; | |
-moz-border-radius:0.4em; | |
-khtml-border-radius:0.4em; | |
display:block; | |
float:left; | |
} | |
input:hover, input:focus { | |
border-color:#c5c5c5; | |
background:#f6f6f6; | |
} | |
fieldset { | |
border:1px solid #ddd; | |
padding:0 0.5em 0.5em; | |
} | |
.date input { | |
background-image:url(../gfx/calendar-small.gif); | |
background-repeat:no-repeat; | |
background-position:100% 50%; | |
} | |
.date fieldset label { | |
float:none; | |
display:block; | |
text-align:left; | |
width:auto; | |
} | |
.date fieldset div { | |
float:left; | |
clear:none; | |
margin-right:0.2em; | |
} | |
.radio, .date { | |
position:relative; | |
} | |
.radio fieldset, .date fieldset { | |
border:none; | |
width:auto; | |
padding:1px 0 0 11em; | |
} | |
.radio legend, .date legend { | |
font-size:1em; | |
color:#000; | |
} | |
.radio legend span, .date legend span { | |
position:absolute; | |
left:0; | |
top:0.3em; | |
width:10em; | |
display:block; | |
} | |
.radio label, .radio input { | |
vertical-align:middle; | |
display:inline; | |
float:none; | |
width:auto; | |
background:none; | |
border:none; | |
} | |
.radio div { | |
float:left; | |
white-space:nowrap; | |
clear:none; | |
} | |
.email { | |
width:14em; | |
} | |
input.default { | |
color:#bbb; | |
} | |
#submit { | |
margin:1em; | |
width:69px; | |
height:26px; | |
overflow:hidden; | |
border:0; | |
display:block; | |
cursor:pointer !important; cursor:hand; | |
} | |
#submit:hover { | |
background-position:0 -26px; | |
} | |
textarea { | |
padding:0.15em; | |
width: 200px; | |
height: 50px; | |
display: block; | |
} | |
.error { | |
color: ##FF1400; | |
} | |
/* | |
:invalid { | |
color:red; | |
} | |
*/ | |
/* | |
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; } | |
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; } | |
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; } | |
input[type=checkbox]:focus + label{ background-position: 0 -16px; } | |
input[type=checkbox] + label:hover{ background-position: 0 -32px; } | |
input[type=checkbox]:checked + label{ background-position: 0 -48px; } | |
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; } | |
input[type=radio]:focus + label{ background-position: 0 -80px; } | |
input[type=radio] + label:hover{ background-position: 0 -96px; } | |
input[type=radio]:checked + label{ background-position: 0 -112px; } | |
*/ | |
</style> | |
</head> | |
<body> | |
<!-- shopping.html --> | |
<form action="" method="post" id="theForm"> | |
<fieldset> | |
<p>Use this form to calculate the order total.</p> | |
<div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div> | |
<div><label for="price">Price Per Unit</label><input type="text" name="price" id="price" value="1.00" required></div> | |
<div><label for="tax">Tax Rate (%)</label><input type="text" name="tax" id="tax" value="0.0" required></div> | |
<div><label for="discount">Discount</label><input type="text" name="discount" id="discount" value="0.00" required></div> | |
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div> | |
<div><input type="submit" value="Calculate" id="submit"></div> | |
</fieldset> | |
</form> | |
<script src="js/shopping.js"></script> | |
<script id="jsbin-javascript"> | |
// Script 4.3 - shopping.js - version 2 | |
// This script calculates an order total. | |
// Function called when the form is submitted. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
'use strict'; | |
// declare a variable below named "total" | |
var total; | |
var quantity = document.getElementById('quantity').value; | |
var price = document.getElementById('price').value; | |
// declare a variable below named "tax" | |
// on the same line, set the value of the tax variable | |
// to the value of the HTML element with the 'tax' id | |
var tax = document.getElementById('tax').value; | |
var discount = document.getElementById('discount').value; | |
// assign the value of the total variable to be the | |
// result of multiplying the quantity times price | |
total = quantity * price; | |
tax /= 100; | |
tax++; | |
total *= tax; | |
total -= discount; | |
// Format the total to show 2 decimal places by using | |
// the toFixed() method. Assign the result to the | |
// total variable. | |
total = total.toFixed(2); | |
document.getElementById('total').value = total; | |
return false; | |
} // End of calculate() function. | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = calculate; | |
} // End of init() function. | |
window.onload = init; | |
</script> | |
<script id="jsbin-source-css" type="text/css">// From: http://www.assemblesoft.com/examples/form/simpleform.html | |
* {margin:0; padding:0;} | |
html { | |
font: 90%/1.3 arial,sans-serif; | |
padding:1em; | |
background:#B9C2CC; | |
} | |
form { | |
background:#fff; | |
padding:1em; | |
border:1px solid #eee; | |
} | |
fieldset div { | |
margin:0.3em 0; | |
clear:both; | |
} | |
form { | |
margin:1em; | |
width:15em; | |
} | |
label { | |
float:none; | |
width:12em; | |
display:block; | |
clear:both; | |
} | |
legend { | |
color:#0b77b7; | |
font-size:1.4em; | |
} | |
legend span { | |
width:10em; | |
text-align:right; | |
} | |
input { | |
padding:0.15em; | |
width:10em; | |
border:1px solid #ddd; | |
background:#fafafa; | |
font:bold 1em arial, sans-serif; | |
-moz-border-radius:0.4em; | |
-khtml-border-radius:0.4em; | |
display:block; | |
float:left; | |
} | |
input:hover, input:focus { | |
border-color:#c5c5c5; | |
background:#f6f6f6; | |
} | |
fieldset { | |
border:1px solid #ddd; | |
padding:0 0.5em 0.5em; | |
} | |
.date input { | |
background-image:url(../gfx/calendar-small.gif); | |
background-repeat:no-repeat; | |
background-position:100% 50%; | |
} | |
.date fieldset label { | |
float:none; | |
display:block; | |
text-align:left; | |
width:auto; | |
} | |
.date fieldset div { | |
float:left; | |
clear:none; | |
margin-right:0.2em; | |
} | |
.radio, .date { | |
position:relative; | |
} | |
.radio fieldset, .date fieldset { | |
border:none; | |
width:auto; | |
padding:1px 0 0 11em; | |
} | |
.radio legend, .date legend { | |
font-size:1em; | |
color:#000; | |
} | |
.radio legend span, .date legend span { | |
position:absolute; | |
left:0; | |
top:0.3em; | |
width:10em; | |
display:block; | |
} | |
.radio label, .radio input { | |
vertical-align:middle; | |
display:inline; | |
float:none; | |
width:auto; | |
background:none; | |
border:none; | |
} | |
.radio div { | |
float:left; | |
white-space:nowrap; | |
clear:none; | |
} | |
.email { | |
width:14em; | |
} | |
input.default { | |
color:#bbb; | |
} | |
#submit { | |
margin:1em; | |
width:69px; | |
height:26px; | |
overflow:hidden; | |
border:0; | |
display:block; | |
cursor:pointer !important; cursor:hand; | |
} | |
#submit:hover { | |
background-position:0 -26px; | |
} | |
textarea { | |
padding:0.15em; | |
width: 200px; | |
height: 50px; | |
display: block; | |
} | |
.error { | |
color: ##FF1400; | |
} | |
/* | |
:invalid { | |
color:red; | |
} | |
*/ | |
/* | |
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; } | |
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; } | |
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; } | |
input[type=checkbox]:focus + label{ background-position: 0 -16px; } | |
input[type=checkbox] + label:hover{ background-position: 0 -32px; } | |
input[type=checkbox]:checked + label{ background-position: 0 -48px; } | |
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; } | |
input[type=radio]:focus + label{ background-position: 0 -80px; } | |
input[type=radio] + label:hover{ background-position: 0 -96px; } | |
input[type=radio]:checked + label{ background-position: 0 -112px; } | |
*/</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Script 4.3 - shopping.js - version 2 | |
// This script calculates an order total. | |
// Function called when the form is submitted. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
'use strict'; | |
// declare a variable below named "total" | |
var total; | |
var quantity = document.getElementById('quantity').value; | |
var price = document.getElementById('price').value; | |
// declare a variable below named "tax" | |
// on the same line, set the value of the tax variable | |
// to the value of the HTML element with the 'tax' id | |
var tax = document.getElementById('tax').value; | |
var discount = document.getElementById('discount').value; | |
// assign the value of the total variable to be the | |
// result of multiplying the quantity times price | |
total = quantity * price; | |
tax /= 100; | |
tax++; | |
total *= tax; | |
total -= discount; | |
// Format the total to show 2 decimal places by using | |
// the toFixed() method. Assign the result to the | |
// total variable. | |
total = total.toFixed(2); | |
document.getElementById('total').value = total; | |
return false; | |
} // End of calculate() function. | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = calculate; | |
} // 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
// From: http://www.assemblesoft.com/examples/form/simpleform.html | |
* {margin:0; padding:0;} | |
html { | |
font: 90%/1.3 arial,sans-serif; | |
padding:1em; | |
background:#B9C2CC; | |
} | |
form { | |
background:#fff; | |
padding:1em; | |
border:1px solid #eee; | |
} | |
fieldset div { | |
margin:0.3em 0; | |
clear:both; | |
} | |
form { | |
margin:1em; | |
width:15em; | |
} | |
label { | |
float:none; | |
width:12em; | |
display:block; | |
clear:both; | |
} | |
legend { | |
color:#0b77b7; | |
font-size:1.4em; | |
} | |
legend span { | |
width:10em; | |
text-align:right; | |
} | |
input { | |
padding:0.15em; | |
width:10em; | |
border:1px solid #ddd; | |
background:#fafafa; | |
font:bold 1em arial, sans-serif; | |
-moz-border-radius:0.4em; | |
-khtml-border-radius:0.4em; | |
display:block; | |
float:left; | |
} | |
input:hover, input:focus { | |
border-color:#c5c5c5; | |
background:#f6f6f6; | |
} | |
fieldset { | |
border:1px solid #ddd; | |
padding:0 0.5em 0.5em; | |
} | |
.date input { | |
background-image:url(../gfx/calendar-small.gif); | |
background-repeat:no-repeat; | |
background-position:100% 50%; | |
} | |
.date fieldset label { | |
float:none; | |
display:block; | |
text-align:left; | |
width:auto; | |
} | |
.date fieldset div { | |
float:left; | |
clear:none; | |
margin-right:0.2em; | |
} | |
.radio, .date { | |
position:relative; | |
} | |
.radio fieldset, .date fieldset { | |
border:none; | |
width:auto; | |
padding:1px 0 0 11em; | |
} | |
.radio legend, .date legend { | |
font-size:1em; | |
color:#000; | |
} | |
.radio legend span, .date legend span { | |
position:absolute; | |
left:0; | |
top:0.3em; | |
width:10em; | |
display:block; | |
} | |
.radio label, .radio input { | |
vertical-align:middle; | |
display:inline; | |
float:none; | |
width:auto; | |
background:none; | |
border:none; | |
} | |
.radio div { | |
float:left; | |
white-space:nowrap; | |
clear:none; | |
} | |
.email { | |
width:14em; | |
} | |
input.default { | |
color:#bbb; | |
} | |
#submit { | |
margin:1em; | |
width:69px; | |
height:26px; | |
overflow:hidden; | |
border:0; | |
display:block; | |
cursor:pointer !important; cursor:hand; | |
} | |
#submit:hover { | |
background-position:0 -26px; | |
} | |
textarea { | |
padding:0.15em; | |
width: 200px; | |
height: 50px; | |
display: block; | |
} | |
.error { | |
color: ##FF1400; | |
} | |
/* | |
:invalid { | |
color:red; | |
} | |
*/ | |
/* | |
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; } | |
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; } | |
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; } | |
input[type=checkbox]:focus + label{ background-position: 0 -16px; } | |
input[type=checkbox] + label:hover{ background-position: 0 -32px; } | |
input[type=checkbox]:checked + label{ background-position: 0 -48px; } | |
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; } | |
input[type=radio]:focus + label{ background-position: 0 -80px; } | |
input[type=radio] + label:hover{ background-position: 0 -96px; } | |
input[type=radio]:checked + label{ background-position: 0 -112px; } | |
*/ |
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
// Script 4.3 - shopping.js - version 2 | |
// This script calculates an order total. | |
// Function called when the form is submitted. | |
// Function performs the calculation and returns false. | |
function calculate() { | |
'use strict'; | |
// declare a variable below named "total" | |
var total; | |
var quantity = document.getElementById('quantity').value; | |
var price = document.getElementById('price').value; | |
// declare a variable below named "tax" | |
// on the same line, set the value of the tax variable | |
// to the value of the HTML element with the 'tax' id | |
var tax = document.getElementById('tax').value; | |
var discount = document.getElementById('discount').value; | |
// assign the value of the total variable to be the | |
// result of multiplying the quantity times price | |
total = quantity * price; | |
tax /= 100; | |
tax++; | |
total *= tax; | |
total -= discount; | |
// Format the total to show 2 decimal places by using | |
// the toFixed() method. Assign the result to the | |
// total variable. | |
total = total.toFixed(2); | |
document.getElementById('total').value = total; | |
return false; | |
} // End of calculate() function. | |
function init() { | |
'use strict'; | |
document.getElementById('theForm').onsubmit = calculate; | |
} // 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