diff --git a/index.html b/index.html new file mode 100644 index 0000000..65b38d9 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + Калькулятор + + + + + + + +
+
+ +
+ +
1
+
2
+
3
+
/
+ +
4
+
5
+
6
+
*
+ +
7
+
8
+
9
+
-
+ +
.
+
0
+
=
+
+
+
C
+
+
+ + diff --git a/irongrip.png b/irongrip.png new file mode 100644 index 0000000..b4df134 Binary files /dev/null and b/irongrip.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..df1f9b1 --- /dev/null +++ b/script.js @@ -0,0 +1,73 @@ +$(document).ready(function() +{ + var Operands = new Array(); + Operands[0] = "0"; + Operands[1] = "0"; + var i = 0; + var Operation = ""; + + $('.btnNum').click(function(event) + { + Operands[i] += $(this).html(); + $('.display').text(parseFloat(Operands[ i ])); + }); + + $('.btnOp').click(function(event) + { + if( i > 0 ) + { + var temp = Operands[0]; + + switch(Operation) + { + case '+': + Operands[0] = parseFloat(temp) + parseFloat(Operands[1]); + break; + case '-': + Operands[0] = parseFloat(temp) - parseFloat(Operands[1]); + break; + case '/': + if(parseFloat(Operands[1]) === 0) + { + alert("Error!"); + Operands[0] = 0; + } + else + Operands[0] = parseFloat(temp) / parseFloat(Operands[1]); + break; + case '*': + Operands[0] = parseFloat(temp) * parseFloat(Operands[1]); + break; + default: + Operands[0] = temp; + break; + } + + Operands[1] = "0"; + i = 1; + Operation = $(this).html(); + + $('.display').text(Operands[0]); + } + + else + { + Operation = $(this).html(); + i++; + } + + if( Operation === '=' ) + { + $('.display').text(Operands[0]); + } + }); + + $('.btnClear').click(function(event) + { + $('.display').text(null); + Operands[0] = "0"; + Operands[1] = "0"; + Operation = ""; + i = 0; + }); +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6794622 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +* { + margin:0; + padding:0; +} +body { + background: url(irongrip.png); +} +.container { + position:absolute; + top:50%; + left:50%; + margin:-200px auto auto -150px; + padding:10px; + width: 325px; + height: 425px; + border: 3px #d6a437 solid; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + background: #cfcfcf; +} +.display { + overflow: hidden; + margin-bottom:10px; + padding:10px; + height:60px; + -webkit-border-top-right-radius:5px; + -moz-border-top-right-radius: 5px; + border-top-right-radius: 5px; + -webkit-border-top-left-radius:5px; + -moz-border-top-left-radius: 5px; + border-top-left-radius: 5px; + background: #efefef; + color:#444; + text-align: right; + font-weight: bolder; + font-size: 2em; + line-height: 200%; +} +.buttons-block { + padding: 10px 0; + width:100%; + height:300px; + -webkit-border-bottom-right-radius:5px; + -moz-border-bottom-right-radius: 5px; + border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius:5px; + -moz-border-bottom-left-radius: 5px; + border-bottom-left-radius: 5px; + background: #efefef; +} +.buttons-block > * { + float:left; + margin-bottom:10px; + margin-left:15px; + width:60px; + height:50px; + border: 1px solid #d6a437; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + background: #febd4b; + background: -webkit-gradient(linear, 0 0, 0 100%, from(#fed970) to(#febd4b)); + background: -webkit-linear-gradient(#fed970, #febd4b); + background: -moz-linear-gradient(#fed970, #febd4b); + background: -ms-linear-gradient(#fed970, #febd4b); + background: -o-linear-gradient(#fed970, #febd4b); + background: linear-gradient(#fed970, #febd4b); + -webkit-box-shadow: + 0px 1px 1px rgba(000,000,000,0.1), + inset 0px 1px 1px rgba(255,255,255,0.7); + -moz-box-shadow: + 0px 1px 1px rgba(000,000,000,0.1), + inset 0px 1px 1px rgba(255,255,255,0.7); + box-shadow: #e3e3e3 0 1px 1px; + color: #7c5d1b; + text-align:center; + text-shadow: 1px 1px 0px #ffe8b2; + font-weight:bold; + font-size: 1em; + line-height:50px; + cursor:pointer; +} +.buttons-block > *:hover { + background: #febd4b; + background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b) to(#fed970)); + background: -webkit-linear-gradient(#febd4b, #fed970); + background: -moz-linear-gradient(#febd4b, #fed970); + background: -ms-linear-gradient(#febd4b, #fed970); + background: -o-linear-gradient(#febd4b, #fed970); + background: linear-gradient(#febd4b, #fed970); + -pie-background: linear-gradient(#febd4b, #fed970); +} \ No newline at end of file