Skip to content

Instantly share code, notes, and snippets.

@alexpow

alexpow/index.html

Forked from anonymous/index.html
Created December 15, 2015 19:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexpow/68dfd648ea42d80b8585 to your computer and use it in GitHub Desktop.
Save alexpow/68dfd648ea42d80b8585 to your computer and use it in GitHub Desktop.
Download ZIP
Shopping Calculator Alex Powelson Assignment 2 Part 1 // source http://jsbin.com/qicifi
Raw
index.html
<!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>
Raw
jsbin.qicifi.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; }
*/
Raw
jsbin.qicifi.js
// 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