jQuery ve CSS ile Hazırlanmış Hesap Makinesi

jQuery ve CSS ile Hazırlanmış Hesap Makinesi
50

Merhaba arkadaşlar bu yazımda siz takipçilerime jQuery ve css yardımıyla hazırlanmış hesap makinesini paylaşacağım. Oldukça şık hazırlanmış bu hesap makinesini dilediğiniz nerede nasıl kullanacağınız size kalmış.

[bilgi] Bu çalışmanın yapımcısı TheRealAlan‘dir. [/bilgi]

Hesap makinesinin html kodları;

<div id="calculator">
<div class="top">
	<span class="key clear">C</span><div class="screen"></div>
</div>
<div class="keys">
	<span class="key">7</span><span class="key">8</span><span class="key">9</span><span class="key operator">+</span>
	<span class="key">4</span><span class="key">5</span><span class="key">6</span><span class="key operator">-</span>
	<span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key operator">÷</span>
	<span class="key">0</span><span class="key">.</span><span class="key evaluate">=</span><span class="key operator">x</span>
</div>
</div>

CSS kodları

#calculator {
 max-width: 325px;
 padding: 20px 20px 9px;
 border-radius: 3px;
 background-color: #333;
 position: relative;
 box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}
.screen {
 display: inline-block;
 padding: 0 10px;
 width: calc(69% - 6px);
 margin-left: 3px;
 height: 40px;
 background-color: #222;
 border-radius: 3px;
 font-size: 17px;
 line-height: 40px;
 letter-spacing: 1px;
 text-align: right;
 box-shadow: inset 0 4px 0 rgba(0,0,0,.1);
 vertical-align: top;
}

.key {
 display: inline-block;
 position: relative;
 top: 0;
 cursor: pointer;
 width: calc(25% - 6px);
 height: 36px;
 background-color: #777;
 border-radius: 3px;
 text-align: center;
 margin: 0 3px 11px;
 line-height: 36px;
 box-shadow: 0 4px 0 rgba(0,0,0,.2);
 transition: all .2s ease;

 &:active {
 box-shadow: 0 0 #333;
 top: 4px;
 }

 &.operator {
 background-color: #555;

 &:active {
 box-shadow: 0 0 #555;
 }
 }

 &.evaluate {
 background-color: #94c54e;
 box-shadow: 0 4px 0 darken(#94c54e, 25%);

 &:active {
 box-shadow: 0 0 #94c54e;
 }
 }

 &.clear {
 background-color: #f26060;
 box-shadow: 0 4px 0 darken(#f26060, 25%);

 &:active {
 box-shadow: 0 0 #f26060;
 }
 }
}

.key.clear {
 background-color: #f26060;
 box-shadow: 0 4px 0 #c31010;
}
.key.evaluate {
 background-color: #94c54e;
 box-shadow: 0 4px 0 #506f24;
}

Javascript kodları;

[js]
(function() {
window.Calculator = (function() {
function Calculator() {
var key, _i, _len, _ref;
this.input = document.querySelector(".screen");
this.keys = document.querySelectorAll(".key");
this.operators = ["+", "-", "x", "÷"];
this.decimal_added = false;
_ref = this.keys;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
key.onclick = (function(_this) {
return function(ev) {
var btn_val, decimal_added, equation, input_val, last_char;
input_val = _this.input.innerHTML;
btn_val = ev.currentTarget.innerHTML;
if (btn_val === "C") {
_this.input.innerHTML = "";
_this.decimal_added = false;
} else if (btn_val === "=") {
equation = input_val;
last_char = equation[equation.length – 1];
equation = equation.replace(/x/g, "*").replace(/÷/g, "/");
if (_this.operators.indexOf(last_char) > -1 || last_char === ".") {
equation = equation.replace(/.$/, "");
}
if (equation) {
_this.input.innerHTML = eval(equation);
}
decimal_added = false;
} else if (_this.operators.indexOf(btn_val) > -1) {
last_char = input_val[input_val.length – 1];
if (input_val !== "" && _this.operators.indexOf(last_char) === -1) {
_this.input.innerHTML += btn_val;
} else if (input_val === "" && btn_val === "-") {
_this.input.innerHTML += btn_val;
}
if (_this.operators.indexOf(last_char) > -1 && input_val.length > 1) {
_this.input.innerHTML = input_val.replace(/.$/, btn_val);
}
decimal_added = false;
} else if (btn_val === ".") {
if (!decimal_added) {
_this.input.innerHTML += btn_val;
decimal_added = true;
}
} else {
_this.input.innerHTML += btn_val;
}
ev.preventDefault();
};
})(this);
}
}

$(function() {
var calculator;
return calculator = new Calculator;
});

return Calculator;

})();

}).call(this);
//@ sourceURL=pen.js
[/js]

Son olarakta javascript kütüphanesini çağırarak çalışmamızı tamamlayalım..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

[indir]Demo[/indir]

Yorum Yap