pew
/
calculator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

master
Paul Walko 2014-11-13 14:12:21 -05:00
parent 072b3dc0c9
commit 5ee29e59db
4 changed files with 74 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -13,16 +13,33 @@ body{
margin-left: -8px; margin-left: -8px;
} }
#front{ #front{
position: absolute; margin-top: 100px;
top: 200px; /*left: 50%;*/
left: 50%;
text-align: center; text-align: center;
margin-left: -585px; margin-left: auto;
width: 1170px; margin-right:auto;
width: 300px;
font-family: 'Roboto Slab', serif; font-family: 'Roboto Slab', serif;
background-color: white; background-color: white;
} }
#front > h1{ .eq, #result,input,p{
margin-top: 0px; display: inline;
font-size: 122px; 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
View File

@ -7,91 +7,36 @@
<script src="js/jquery.js"></script> <script src="js/jquery.js"></script>
<script src="js/two.min.js"></script> <script src="js/two.min.js"></script>
<script src="js/randomColor.js"></script> <script src="js/randomColor.js"></script>
<script src="js/calculate.js"></script>
<style type="text/css"> <title>Sales Calculator</title>
.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>
</head> </head>
<body> <body>
<canvas id="screen"> <canvas id="screen">
</canvas> </canvas>
<div id="front"> <div id="front">
<h2>Reverse Polish Notation Calculator</h2> <h2>Sales Calculator</h2>
<p>*&nbsp;&nbsp;For Single number operations, only use first field</p>
<form id="calculator" oninput="Calculate()"> <form id="calculator" oninput="Calculate()">
<input name="a" type="number" value="0"/> <input name="computer" type="number" value="0" />
<input name="b" type="number" value="0"/> <p>Computer - $400</p>
<select name="selector" onchange="Calculate()"> <input name="monitor" type="number" value="0"/>
<option value="-1">Select an Operation</option> <p>Monitor - $150</p>
<option value="0">*</option> <input name="mouse" type="number" value="0"/>
<option value="1">/</option> <p>Mouse - $15</p><br/>
<option value="2">+</option> <input name="keyboard" type="number" value="0"/>
<option value="3">-</option> <p>Keyboard - $10</p><br/>
<option value="4">log</option> <input name="ram" type="number" value="0"/>
<option value="5">^</option> <p>Ram - $50</p><br/>
<option value="6">tan</option> <input name="processor" type="number" value="0"/>
<option value="7">cos</option> <p>Upgraded Processor - $175</p><br/>
<option value="8">sin</option> <br/>
<option value="9">abs</option> <p class="sub">Subtotal: $</p>
<option value="10">e^x</option> <output name="total" for="computer monitor mouse keyboard ram monitor">0</output><br/>
</select> <p class="sub">Tax: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$</p>
<div class="eq">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> <output name="tax" for="computer monitor mouse keyboard ram monitor">0</output><br/>
<output id="result" name="c" for="x y">0</output> <p class="sub">Sales: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$</p>
<output name="sales" for="computer monitor mouse keyboard ram monitor">0</output><br/>
</form> </form>
<h4> &copy;&nbsp;Paul Walko&nbsp;2014</h4> <h4> &copy;&nbsp;Paul Walko&nbsp;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> </div>
<script type="text/javascript" src="js/background2.js"></script> <script type="text/javascript" src="js/background2.js"></script>
</body> </body>

25
js/calculate.js Normal file
View File

@ -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);
}