cripi-interface-development · IrinaGr · Dec 2, 2012
diff --git a/Calculate.js 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);
+    });
+});
diff --git a/Calculator.html b/Calculator.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title> Калькулятор </title>
+	<link rel="stylesheet" href="calculator.css"/>
+    <script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
+    <script type="text/javascript" src="Calculate.js"></script>
+</head>
+
+<body>
+<form class="b-calculator" name = "calculator" id="Form">
+    <button class="b-calculator__button b-calculator__button_type_number" name = "zero"     value = "0"> 0 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "one"      value = "1"> 1 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "two"      value = "2"> 2 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "three"    value = "3"> 3 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "four"     value = "4"> 4 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "five"     value = "5"> 5 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "six"      value = "6"> 6 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "seven"    value = "7"> 7 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "eight"    value = "8"> 8 </button>
+    <button class="b-calculator__button b-calculator__button_type_number" name = "nine"     value = "9"> 9 </button>
+    <button class="b-calculator__button b-calculator__button_type_znak"   name = "equally"  value = "="> = </button>
+    <button class="b-calculator__button b-calculator__button_type_znak"   name = "plus"     value = "+"> + </button>
+    <button class="b-calculator__button b-calculator__button_type_znak"   name = "minus"    value = "-"> - </button>
+    <button class="b-calculator__button b-calculator__button_type_znak"   name = "multiply" value = "*"> * </button>
+    <button class="b-calculator__button b-calculator__button_type_znak"   name = "divide"   value = "/"> / </button>
+    <button class="b-calculator__button b-calculator__button_type_point"  name = "point"    value = "."> . </button>
+    <input class="b-calculator__result" name = "res" type = "text" value = "0"/>
+</form>
+</body>
+</html>
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
@@ -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;
+}
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
@@ -0,0 +1,4 @@
+.b-calculator__button_type_point {
+    left: 150px;
+	bottom: 0;
+}
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
@@ -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;
+}
diff --git a/blocks/b-calculator/__element/b-calculator__button.css 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;
+}
diff --git a/blocks/b-calculator/__element/b-calculator__result.css 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;
+}
diff --git a/blocks/b-calculator/b-calculator.css 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));
+
+}
diff --git a/calculator.css 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");