I am new to Javascript and jQuery. I made a calculator by looking at other calculators, codes. I don't know so much Javascript methods, so I stick to eval method because I have no idea to produce answer in another way. I didn't create any function. Instead I lock buttons with Booleans changed by pushing buttons.
I think that there is an order that you must follow, I mean you must type number after operator or dot button is pushed or you must type number + operator + number to type dot button two times and you must type operator button at least once to be able to push equal button v.s. but there is difficulty in designing remove buttons logic and adding new feature. So I want to hear something about my algorithm, whether use eval or don't and how I can add new features to calculator. I mean, should I continue designing calculator with this logic or turn it into normal calculator that checking every situation each time and find solution.
$(document).ready(function() {
var sayac = 0; // number of operators in screen
var lastdot = 0; // last index of dot button
var opeleman = "+-*/";
var yazi=""; // text on screen
var yedek=""; // container for returning last value after equal is pushed
var oprtknm = []; // indexes of operators
var sayi=false, // changing by number buttons to lock other buttons
noktakilit=true, // lock dot buttons if it is pushed
sonuckilit=false; // lock of equal buttons. open if operator is typed
// clicking on number buttons
$(".sayi").on("click", function() {
// open locks of other buttons
if (yazi.length < 22) {
yazi += $(this).text();
$(".ustekran").text(yazi);
sayi=true;
}
});
// clicking on operator buttons
$(".operator").on("click", function() {
// open equal and dot buttons lock if number is pushed before
if (sayi) {
// checking if equal is pushed if so get back last value
if(yazi.length < 1) {
yazi = yedek;
}
// insert its index in array to use in comparison indexes of it, dot
// to change booleans when C is pushed and open locks of dot, equal
// and make sayi false to put you in situation you must type number button
yazi += $(this).text();
$(".ustekran").text(yazi);
oprtknm.push(yazi.length);
sayi = false;
noktakilit = true;
sonuckilit = true;
sayac++;
}
});
// clicking on dot buttons
$(".nokta").on("click", function() {
// lock himself until operator button is pushed
if(yazi.length > 0) {
if (sayi && noktakilit) {
yazi += $(this).text();
$(".ustekran").text(yazi);
sayi = false;
noktakilit = false;
}
}
});
// clicking on equal buttons
$(".sonuc").on("click", function() {
// checking if you type at least 1 operator
if (sayi && sonuckilit) {
var son = eval(yazi);
yazi = "" + son;
// removing digits more than five after dot
var dotind = yazi.indexOf (".") ;
if ( dotind >-1 ) {
yazi= yazi.slice(0, dotind+5);
}
if (yazi.length > 22) {
yazi = yazi.substring(0, 22);
}
// lock itself until operator is pushed
yedek = yazi;
$(".ustekran").text(yazi);
sonuckilit = false;
noktakilit = true;
if (!isFinite(son) || isNaN(son)) {
sayi = false;
noktakilit = true;
}
oprtknm = [];
sayac = 0;
yazi = "";
}
});
// clicking on CE button
$("#tamsilme").on("click", function() {
// all booleans return their first state
yazi = "";
sayi=false;
noktakilit=true;
sonuckilit = false;
oprtknm = [];
sayac=0;
$(".ustekran").text(yazi);
});
// REMOVİNG SİNGLE CHARACTER
$("#teksilme").on("click", function() {
if(yazi.length > 0) {
var soneleman = yazi[yazi.length-1];
// removing dot
if (soneleman === ".")
{
sayi = true;
noktakilit = true;
}
// removing operators
else if (opeleman.indexOf(soneleman) >-1) {
// changing dot operators lock
// investigate that whether last dot come after last second operator
lastdot = yazi.lastIndexOf(".");
if(sayac > 1) {
if ( lastdot >
oprtknm[sayac-2]-1 ) {
noktakilit = false;
}
}
// text contain one operator and one dot
else if (lastdot > -1) {
noktakilit = false;
}
// changing equal operators lock if there is no other operator
if(sayac < 2) {
sonuckilit = false;
}
sayi = true;
sayac--;
oprtknm.pop();
}
// removing number
else {
// if number immedieatly come after operator or dot, they are locked
if(yazi.length > 2) {
if( isNaN ( yazi[yazi.length-2]) ) {
sayi = false;
}
}
}
yazi = yazi.slice(0,-1);
$(".ustekran").text(yazi);
}
});
}) ;body {
font-family: 'Comic Sans Ms', sans-serif;
background:#133;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
width:100%;
height:100%;
}
.hesapmakine {
display:block;
position:relative;
width:50%;
margin-top: 5%;
margin-right: auto;
margin-left: auto;
user-select: none;
}
.ekran {
position:relative;
background: #fa3;
padding : 20px;
height:140px;
border: 5px solid rgba(#559,0.5);
border-radius: 25px;
box-shadow: 0px 5px 20px rgba(#000, 0.5);
}
.ustekran {
padding: 10px 15px 0px 0px;
color: #121;
align-self: center;
background: #ede;
width:90%;
height:80px;
border: 5px solid rgba(#363,0.5);
box-shadow: 0px 5px 20px rgba(#000, 0.5);
border-radius: 20px;
margin: auto;
text-align:right;
font-size:40px;
}
.hesap {
display:inline-block;
background:#c68945;
position:relative;
left: 50%;
transform: translateX(-50%);
padding: 20px;
border-radius: 25px;
box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #634422;
}
button{
float: left;
background: #1f1f2e;
margin: 10px;
width:80px;
height:80px;
border-radius:25%;
font-size:35px;
color:#cfa;
outline: none;
box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
}
button:hover {
background:#6f3;
color: #313;
}
button:active {
transform: scale(1.2,1.2);
}
.silme {
background: #35d;
align-self: center;
color:#fa7;
font-size:25px;
width:160px;
height:80px;
margin-left:25px;
border-radius:10px;
}
.silme:hover {
background: #f21;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="container-fluid">
<div class="hesapmakine">
<div class="ekran">
<div class="ustekran">
</div >
</div >
<div class="hesap">
<button class="sayi"><b>1</b></button>
<button class="sayi"><b>2</b></button>
<button class="sayi"><b>3</b></button>
<button class="operator"><b>/</button>
<button class="operator"><b>*</b></button> </br>
<button class="sayi"><b>4</b></button>
<button class="sayi"><b>5</b></button>
<button class="sayi"><b>6</b></button>
<button class="operator"><b>+</b></button>
<button class="operator"><b>-</b></button>
</br>
<button class="sayi"><b>7</b></button>
<button class="sayi"><b>8</b></button>
<button class="sayi"><b>9</b></button>
<button class="nokta"><b>.</b></button>
<button class="sonuc"><b>=</b></button>
</br>
<button class="sayi"><b>0</b></button>
<div>
<button class="silme" id="tamsilme"><b>CE</b></button>
<button class="silme" id="teksilme"><b>C</b></button>
</div>
</div>
</div >
</div>
</body>
