diff --git a/Calculate.js b/Calculate.js new file mode 100644 index 0000000..86f46b1 --- /dev/null +++ b/Calculate.js @@ -0,0 +1,84 @@ +/*jslint plusplus: true, browser: true, devel: true */ + +var znak = false; // false, если до этого либо ничего не записывали, либо вводили число. true, если до этого был введен знак +var operand = 0; // сохраняет текущее значение +var s = ""; // последний введенный знак0 + +function createNumber() { + "use strict"; + var n = this.value, + result = ($(".b-calculator__result")).val(); + if (znak) { + result = n; + znak = false; + } else { + if (result === "0") {// если был ноль - меняем его на число + result = n; + } else {// иначе приписываем число + result = result + n; + } + } + ($(".b-calculator__result")).val(result); +} + +function Operation() { + "use strict"; + var Op = this.value, + result = ($(".b-calculator__result")).val(); + if (znak && s !== "=") {// если ввели, например, "++" + result = operand; + } else { + znak = true; + if (s === "+") { + operand = operand + parseFloat(result); + } + if (s === "-") { + operand = operand - parseFloat(result); + } + if (s === "/") { + operand = operand / parseFloat(result); + } + if (s === "*") { + operand = operand * parseFloat(result); + } + if (s === "=" || s === "") { + operand = parseFloat(result); + } + result = operand; + s = Op; + } + ($(".b-calculator__result")).val(result); +} + +function point() { + "use strict"; + var result = ($(".b-calculator__result")).val(); + if (znak) { + result = "0."; + znak = false; + } else { + if (result.indexOf(".") === -1) { // если точки еще не было - дописываем. Иначе - игнорируемы + result = result + "."; + } + } + ($(".b-calculator__result")).val(result); +} + +$(document).ready(function () { + "use strict"; + var $button_number = $(".b-calculator__button_type_number"), + $button_znak = $(".b-calculator__button_type_znak"), + $button_point = $(".b-calculator__button_type_point"); + + $('#Form').submit(function () {"use strict"; return false;}); + + $button_number.each(function (index, element) { + $(element).click(createNumber); + }); + $button_znak.each(function (index, element) { + $(element).click(Operation); + }); + $button_point.each(function (index, element) { + $(element).click(point); + }); +}); \ No newline at end of file diff --git a/Calculator.html b/Calculator.html new file mode 100644 index 0000000..a5fe133 --- /dev/null +++ b/Calculator.html @@ -0,0 +1,32 @@ + + + + + Калькулятор + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/blocks/b-calculator/__element/_mod/b-calculator__button_type_number.css b/blocks/b-calculator/__element/_mod/b-calculator__button_type_number.css new file mode 100644 index 0000000..412ba3e --- /dev/null +++ b/blocks/b-calculator/__element/_mod/b-calculator__button_type_number.css @@ -0,0 +1,34 @@ +.b-calculator__button_type_number[name="zero"] { + bottom: 0; + width: 150px; +} + +.b-calculator__button_type_number[name="one"], +.b-calculator__button_type_number[name="two"], +.b-calculator__button_type_number[name="three"] { + bottom: 80px; +} + +.b-calculator__button_type_number[name="four"], +.b-calculator__button_type_number[name="five"], +.b-calculator__button_type_number[name="six"] { + bottom: 160px; +} + +.b-calculator__button_type_number[name="seven"], +.b-calculator__button_type_number[name="eight"], +.b-calculator__button_type_number[name="nine"] { + bottom: 240px; +} + +.b-calculator__button_type_number[name="three"], +.b-calculator__button_type_number[name="six"], +.b-calculator__button_type_number[name="nine"] { + left: 150px; +} + +.b-calculator__button_type_number[name="two"], +.b-calculator__button_type_number[name="five"], +.b-calculator__button_type_number[name="eight"] { + left: 75px; +} \ No newline at end of file diff --git a/blocks/b-calculator/__element/_mod/b-calculator__button_type_point.css b/blocks/b-calculator/__element/_mod/b-calculator__button_type_point.css new file mode 100644 index 0000000..f2558f6 --- /dev/null +++ b/blocks/b-calculator/__element/_mod/b-calculator__button_type_point.css @@ -0,0 +1,4 @@ +.b-calculator__button_type_point { + left: 150px; + bottom: 0; +} \ No newline at end of file diff --git a/blocks/b-calculator/__element/_mod/b-calculator__button_type_znak.css b/blocks/b-calculator/__element/_mod/b-calculator__button_type_znak.css new file mode 100644 index 0000000..d8c2fb7 --- /dev/null +++ b/blocks/b-calculator/__element/_mod/b-calculator__button_type_znak.css @@ -0,0 +1,24 @@ +.b-calculator__button_type_znak { + right: 0; + height: 64px; +} + +.b-calculator__button_type_znak[name="equally"] { + bottom: 0; +} + +.b-calculator__button_type_znak[name="plus"] { + bottom: 64px; +} + +.b-calculator__button_type_znak[name="minus"] { + bottom: 128px; +} + +.b-calculator__button_type_znak[name="multiply"] { + bottom: 192px; +} + +.b-calculator__button_type_znak[name="divide"] { + bottom: 256px; +} \ No newline at end of file diff --git a/blocks/b-calculator/__element/b-calculator__button.css b/blocks/b-calculator/__element/b-calculator__button.css new file mode 100644 index 0000000..9f533a8 --- /dev/null +++ b/blocks/b-calculator/__element/b-calculator__button.css @@ -0,0 +1,7 @@ +.b-calculator__button { + background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1)); + height: 80px; + position: absolute; + font-size: 150%; + width: 75px; +} \ No newline at end of file diff --git a/blocks/b-calculator/__element/b-calculator__result.css b/blocks/b-calculator/__element/b-calculator__result.css new file mode 100644 index 0000000..2252d63 --- /dev/null +++ b/blocks/b-calculator/__element/b-calculator__result.css @@ -0,0 +1,6 @@ +.b-calculator__result { + height: 90px; + width: 290px; + font-size: 150%; + text-align: right; +} \ No newline at end of file diff --git a/blocks/b-calculator/b-calculator.css b/blocks/b-calculator/b-calculator.css new file mode 100644 index 0000000..0d79a5d --- /dev/null +++ b/blocks/b-calculator/b-calculator.css @@ -0,0 +1,11 @@ +.b-calculator { + width: 300px; + height: 420px; + position: absolute; + left: 50%; + margin-left: -150px; + top: 50px; + border: 5px solid #D0ECF4; + background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1)); + +} \ No newline at end of file diff --git a/calculator.css b/calculator.css new file mode 100644 index 0000000..b182c8f --- /dev/null +++ b/calculator.css @@ -0,0 +1,6 @@ +@import url("blocks/b-calculator/b-calculator.css"); + @import url("blocks/b-calculator/__element/b-calculator__button.css"); + @import url("blocks/b-calculator/__element/b-calculator__result.css"); + @import url("blocks/b-calculator/__element/_mod/b-calculator__button_type_number.css"); + @import url("blocks/b-calculator/__element/_mod/b-calculator__button_type_point.css"); + @import url("blocks/b-calculator/__element/_mod/b-calculator__button_type_znak.css"); \ No newline at end of file