update
parent
072b3dc0c9
commit
5ee29e59db
|
@ -13,16 +13,33 @@ body{
|
|||
margin-left: -8px;
|
||||
}
|
||||
#front{
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
margin-top: 100px;
|
||||
/*left: 50%;*/
|
||||
text-align: center;
|
||||
margin-left: -585px;
|
||||
width: 1170px;
|
||||
margin-left: auto;
|
||||
margin-right:auto;
|
||||
width: 300px;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
background-color: white;
|
||||
}
|
||||
#front > h1{
|
||||
margin-top: 0px;
|
||||
font-size: 122px;
|
||||
.eq, #result,input,p{
|
||||
display: inline;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
#front{
|
||||
width: 250px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
margin-top: 20px;
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 10px 40px;
|
||||
background: #dddddd;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#calculator input, #calculator p{
|
||||
width: 100%;
|
||||
}
|
||||
.sub{
|
||||
font-weight: bold;
|
||||
}
|
99
index.html
99
index.html
|
@ -7,91 +7,36 @@
|
|||
<script src="js/jquery.js"></script>
|
||||
<script src="js/two.min.js"></script>
|
||||
<script src="js/randomColor.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.eq, #result, p {
|
||||
display: inline;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function Calculate(){
|
||||
var form = document.getElementById("calculator");
|
||||
var output = form.elements["c"];
|
||||
var a = parseInt(form.elements["a"].value);
|
||||
var b = parseInt(form.elements["b"].value);
|
||||
var op = parseInt(form.elements["selector"].value);
|
||||
switch(op){
|
||||
case 0:
|
||||
output.value = a * b;
|
||||
break;
|
||||
case 1:
|
||||
output.value = a / b;
|
||||
break;
|
||||
case 2:
|
||||
output.value = a + b;
|
||||
break;
|
||||
case 3:
|
||||
output.value = a - b;
|
||||
break;
|
||||
case 4:
|
||||
output.value = Math.log(a);
|
||||
break;
|
||||
case 5:
|
||||
output.value = Math.pow(a, b);
|
||||
break;
|
||||
case 6:
|
||||
output.value = Math.tan(a);
|
||||
break;
|
||||
case 7:
|
||||
output.value = Math.cos(a);
|
||||
break;
|
||||
case 8:
|
||||
output.value = Math.sin(a);
|
||||
break;
|
||||
case 9:
|
||||
output.value = Math.abs(a);
|
||||
break;
|
||||
case 10:
|
||||
output.value = Math.exp(a);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<title>RPN Calculator</title>
|
||||
<script src="js/calculate.js"></script>
|
||||
<title>Sales Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="screen">
|
||||
</canvas>
|
||||
<div id="front">
|
||||
<h2>Reverse Polish Notation Calculator</h2>
|
||||
<p>* For Single number operations, only use first field</p>
|
||||
<h2>Sales Calculator</h2>
|
||||
<form id="calculator" oninput="Calculate()">
|
||||
<input name="a" type="number" value="0"/>
|
||||
<input name="b" type="number" value="0"/>
|
||||
<select name="selector" onchange="Calculate()">
|
||||
<option value="-1">Select an Operation</option>
|
||||
<option value="0">*</option>
|
||||
<option value="1">/</option>
|
||||
<option value="2">+</option>
|
||||
<option value="3">-</option>
|
||||
<option value="4">log</option>
|
||||
<option value="5">^</option>
|
||||
<option value="6">tan</option>
|
||||
<option value="7">cos</option>
|
||||
<option value="8">sin</option>
|
||||
<option value="9">abs</option>
|
||||
<option value="10">e^x</option>
|
||||
</select>
|
||||
<div class="eq"> = </div>
|
||||
<output id="result" name="c" for="x y">0</output>
|
||||
<input name="computer" type="number" value="0" />
|
||||
<p>Computer - $400</p>
|
||||
<input name="monitor" type="number" value="0"/>
|
||||
<p>Monitor - $150</p>
|
||||
<input name="mouse" type="number" value="0"/>
|
||||
<p>Mouse - $15</p><br/>
|
||||
<input name="keyboard" type="number" value="0"/>
|
||||
<p>Keyboard - $10</p><br/>
|
||||
<input name="ram" type="number" value="0"/>
|
||||
<p>Ram - $50</p><br/>
|
||||
<input name="processor" type="number" value="0"/>
|
||||
<p>Upgraded Processor - $175</p><br/>
|
||||
<br/>
|
||||
<p class="sub">Subtotal: $</p>
|
||||
<output name="total" for="computer monitor mouse keyboard ram monitor">0</output><br/>
|
||||
<p class="sub">Tax: $</p>
|
||||
<output name="tax" for="computer monitor mouse keyboard ram monitor">0</output><br/>
|
||||
<p class="sub">Sales: $</p>
|
||||
<output name="sales" for="computer monitor mouse keyboard ram monitor">0</output><br/>
|
||||
</form>
|
||||
<h4> © Paul Walko 2014</h4>
|
||||
<a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
|
||||
</a>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/background2.js"></script>
|
||||
</body>
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
function Calculate(){
|
||||
var form = document.getElementById("calculator");
|
||||
var total = form.elements["total"];
|
||||
var computer = parseInt(form.elements["computer"].value);
|
||||
var monitor = parseInt(form.elements["monitor"].value);
|
||||
var mouse = parseInt(form.elements["mouse"].value);
|
||||
var keyboard = parseInt(form.elements["keyboard"].value);
|
||||
var ram = parseInt(form.elements["ram"].value);
|
||||
var processor = parseInt(form.elements["processor"].value);
|
||||
total.value = ((400 * computer) + (150 * monitor) + (15 * mouse) + (10 * keyboard) + (50 * ram) + (175 * processor)).toFixed(2);
|
||||
Tax();
|
||||
}
|
||||
function Tax(){
|
||||
var form = document.getElementById("calculator");
|
||||
var total = parseInt(form.elements["total"].value);
|
||||
var tax = form.elements["tax"];
|
||||
tax.value = (total * .06).toFixed(2);
|
||||
Total();
|
||||
}
|
||||
function Total(){
|
||||
var form = document.getElementById("calculator");
|
||||
var total = parseInt(form.elements["total"].value);
|
||||
var sales = form.elements["sales"];
|
||||
sales.value = (total * 1.06).toFixed(2);
|
||||
}
|
Loading…
Reference in New Issue