JavaScript’de Basit Hesap Makinesi Yapımı
Arkadaşlar bu yazımızda HTML, CSS3 ve JavaScript tekonolojilerini kullanarak küçük bir projeyi sizlerele paylaştık. 4 farklı JavaScript fonksiyonu kullanarak basit matematik ve hesap makinesi uygulamasını elde ettik. Aşağıda projemizin kodları paylaştık ve şimdi inceleyelim;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function insert(num) { document.form.text.value = document.form.text.value + num; } function equal() { var exp = document.form.text.value; if (exp){ document.form.text.value=eval(exp); } } function c() { document.form.text.value=""; } function back() { var exp = document.form.text.value; document.form.text.value = exp.substring(0,exp.length-1); } </script> <style> *{ margin: 0px; padding: 0px; } .button{ width: 50px; height: 50px; font-size: 25px; margin: 2px; cursor: pointer; background: #698ea0; border: none; color: white; } .text{ width: 208px; margin: 5px; font-size: 25px; padding: 5px; border: none; color: #698ea0; } .main{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); } .bg{ background: linear-gradient(to right,red,blue); height: 700px; } </style> </head> <body> <div class="bg"> <form class="main"> </form> </div> <div class="main"> <h1>TEKNOKAFE.NET CALCULATOR</h1> <form name="form" action=""> <input class="text" name="text" type="text"> </form> <table> <tr> <td><input class="button" type="button" value="C" onclick="c()"></td> <td><input class="button" type="button" value="<" onclick="back()"></td> <td><input class="button" type="button" value="/" onclick="insert('/')"></td> <td><input class="button" type="button" value="*" onclick="insert('*')"></td> </tr> <tr> <td><input class="button" type="button" value="7" onclick="insert(7)"></td> <td><input class="button" type="button" value="8" onclick="insert(8)"></td> <td><input class="button" type="button" value="9" onclick="insert(9)"></td> <td><input class="button" type="button" value="-" onclick="insert('-')"></td> </tr> <tr> <td><input class="button" type="button" value="4" onclick="insert(4)"></td> <td><input class="button" type="button" value="5" onclick="insert(5)"></td> <td><input class="button" type="button" value="6" onclick="insert(6)"></td> <td><input class="button" type="button" value="+" onclick="insert('+')"></td> </tr> <tr> <td> <input class="button" type="button" value="1" onclick="insert(1)"> </td> <td> <input class="button" type="button" value="2" onclick="insert(2)"> </td> <td> <input class="button" type="button" value="3" onclick="insert(3)"></td> <td rowspan="2"> <input class="button" style="height: 106px" type="button" value="=" onclick="equal('=')"></td> </tr> <tr> <td colspan="2"> <input class="button" style="width: 106px" type="button" value="0" onclick="insert(0)"> </td> <td> <input class="button" type="button" value="." onclick="insert('.')"> </td> </tr> </table> </div> </body> </html> |
Kodlar basit olup gerekli ekleme veya kafanıza takılan yerlerde yorum yaparak ulaşabilirsiniz. TeknoKafe.Net takip etmeye devam ediniz. Bol kodlu günler…
merhaba hesap makinesi ödevimiz için şu şekilde kod yazdım doğru mu sizce?
hesap makinesi
function topla(ne){
ne.sonuç.value=parseFloat(ne.say1.value)+parseFloat(ne.say2.value);
}
function çikar(ne){
ne.sonuç.value=parseFloat(ne.say1.value)-parseFloat(ne.say2.value);
}
function çarp(ne){
ne.sonuç.value=parseFloat(ne.say1.value)*parseFloat(ne.say2.value);
}
function böl(ne){
ne.sonuç.value=parseFloat(ne.say1.value)/parseFloat(ne.say2.value);
}
function ort(ne){
ne.sonuç.value=[parseFloat(ne.say1.value)+parseFloat(ne.say2.value)]/2;
}
SAYI ISLEMCISI v1.0
1.sayi
2.sayi
sonuç
hesap makinesi
function topla(ne){
ne.sonuç.value=parseFloat(ne.say1.value)+parseFloat(ne.say2.value);
}
function çikar(ne){
ne.sonuç.value=parseFloat(ne.say1.value)-parseFloat(ne.say2.value);
}
function çarp(ne){
ne.sonuç.value=parseFloat(ne.say1.value)*parseFloat(ne.say2.value);
}
function böl(ne){
ne.sonuç.value=parseFloat(ne.say1.value)/parseFloat(ne.say2.value);
}
function ort(ne){
ne.sonuç.value=[parseFloat(ne.say1.value)+parseFloat(ne.say2.value)]/2;
}
SAYI ISLEMCISI v1.0
1.sayi
2.sayi
sonuç
Selam Berna, soruna geç cevap yazdığım için kusura bakma umarım paylaşcağım blgiler işine yarar.
function topla(say1,say2){
return say1+say2;
}
topla(4,3);
bu şekilde tüm fonksiyonlar için yaparsan daha kullanışlı olacağını düşünüyorum.
Bol kodlu günler.
Hocam merhabalar. Kodlama çok güzel, temiz ve anlaşılır olmuş. Ben bir de +/- butonu oluşturmayı denedim fakat beceremedim. Örneğin ekranda 6 varken bu butona basınca -6 olsun ya da tam tersi -6 varsa bu botuna basınca 6 olsun. Yardımlarınızı bekliyorum. İyi günler.