jQuery ile Hesap Makinesi Yapımı

Merhabalar..

Bu konuda jQuery ile hesap makinesi yapımından bahsedeceğiz.

Birazdan oluşturacağımız Hesap makinesinin arayüzünde 1′den 9′ a kadar sayı butonları ve birkaç işlem butonu ve son olarakta eşittir butonumuz yer almakta.. Aslında olay tamamen markup üzerinden geçmekte, jQuery ise sadece stillendirmemize ve fonksiyon oluşturmamıza olanak sağlıyor.

Fazla vakit kaybetmeden markup’a bir göz atalım isterseniz;

Markup

<div id="hesapla">

	<input type="text" id="goruntu" />

	<a href="#">7</a>
	<a href="#">8</a>
	<a href="#">9</a>

	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>

	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>

	<a href="#">0</a>
	<a href="#">.</a>
	<a href="#">C</a>

	<a href="#"> </a>
	<a href="#">&ndash;</a>
	<a href="#">x</a>
	<a href="#">/</a>

	<a href="#">=</a>

</div>

Yukarıda da dediğim gibi, 1′den 9′a kadar sayılarımız ve işlem fonksiyonlarımız markupa input şeklinde yerleştirilmiş.

Pekala bunlara birer stil kazandırmak hiç de fena olmaz.. İlk olarak resimlerimizi çizebilmek için Photoshop programını kullanabilirsiniz, ya da zaten download linkinde bulunan resimleri de kullanabilirsiniz. Bizim kullanacağımız resim şu şekilde;

Fazla uzatmak  istemiyorum,yukarıda hesap makinesinin arka planı, tuşlar için yuvarlak butonlar ve bunların hover efektli hali,bir eşittir butonu ve LightBox için kapama görselimiz hazır.

Şimdi Css ile stillendirelim;

*				{ margin: 0; padding: 0; }
body				{ font: 25px "Arial Black", Arial, Sans-Serif; }

#page-wrap		    	{ width: 500px; margin: 25px auto; }

h1				{ font-size: 22px; }
p				{ font: 14px Arial, Sans-Serif; }
a				{ color: black; text-decoration: none; outline: none; }

#calculator			{ width: 266px; height: 400px; background: url(../images/calc-bg.png) no-repeat;
	 			  position: relative; display: none; }

#display 			{ background: none; border: none; position: absolute;
				  top: 15px; left: 15px; width: 197px; text-align: right;
			  	  font: 35px "Arial Black", Arial, Sans-Serif; }

.num-button			{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;
	 		      	  background: url(../images/button-bg.png) no-repeat;
				  position: absolute; display: block; }
.clear-button			{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;
	 		          background: url(../images/button-bg.png) no-repeat;
				  position: absolute; display: block; }
.function-button    		{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;
	 		          background: url(../images/function-button-bg.png) no-repeat;
				  position: absolute; display: block; }
.function-button:active,
.pendingFunction    		{ background-position: bottom left; }

.seven				{ top: 86px; left: 15px; }
.eight				{ top: 86px; left: 66px; }
.nine				{ top: 86px; left: 118px; }

/* ... the rest of the buttons ... */

.multiply			{ top: 188px; left: 169px; }
.divide				{ top: 237px; left: 169px; }

.equals-button			{ width: 206px; height: 42px; text-align: center; top: 293px; left: 15px;
	 			  background: url(../images/equals-bg.png) no-repeat; position: absolute;
				  display: block; }

Bu stil çalışmalarımızın çooğunluğu farkettiyseniz position: değerinden geçmektedir. Position değeri ile resimlerin yerlerini ayarlayabiliyoruz.

Gerekli jQuery Scriptleri;

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">     google.load("jquery", "1.3.1"); </script>

<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script>

<script type="text/javascript" src="js/example.js"></script>

jQuery Fonksiyonları;

Asıl konumuz olan jQuery ile bu hesap makinesine fonksiyon atamak diye düşünebilirsiniz, oysa yukarıda da dediğim gibi amaç aslında şekillendirmek ve HTML ile klas bir görüntü kazandırmaktı.. Hesap işlemlerimizi Javascriptler ile halledeceğiz. Burada önemli olan şey, hesap işlem görüntüsünün jQuery sayesinde ekrana yazdırılmasıdır;

$(function(){

	$(".num-button").click(function(){
		// do stuff
	});

	$(".clear-button").click(function(){
		// do stuff
	});

	$(".function-button").click(function(){
		// do stuff
	});

	$(".equals-button").click(function(){
	     // do stuff
	});

	$("#calculator").draggable();

	$("#opener, #closer").click(function(){
		$("#opener").toggle();
		$("#calculator").toggle();
	});

Nihayi kodumuzdan sonra da Download linkinde bulabileceğiniz hesaplama scriptleriyle de karşılaşacaksınız.

Görüşmek üzere.