JavaScript İle Hesap Makinesi Yapımı -Tutarlios

JavaScript ile Hesap Makinesi Yapımı !

JavaScript Bilindiği gibi Web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir... Javascript'de web uygulaması , web oyunları vb. gibi birçok proje yapılabilir...

Bizde Javascript Gelişmiş Hesap Makinesi yapımını bu yazımızda detaylı şekilde sizlerle paylaşacağız... Yalnız Gelişmis dememiz size zor bir iş gibi gelmesin bu hesap makinesini html , css ve javascript hesap makinesi ' ni hiçbir kütüphane olmadan basit hesap makinesini yapalım.

Önce mantığı anlatalım ilk olarak form etiketi ile kullanıcıdan input almamız lazım bu yüzden input etiketi kullanarak kullanıcıdan sayıları alacağız sonra hemen alt kısmına table etiketi ile sayıları , işaretler , geri al ve sil işlemlerinini yazıyoruz.

Şimdi HTML kodlarını veriyorum :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
      <meta charset="utf-8">
      <title>JavaScript Hesap Makinesi</title>
  </head>
  <body>
      
<div id="box">
 <form name="form" >
    <input class="text" placeholder="TuTarlios" name="text">
 </form>

<table>

 <tr>
 <td><input class="button" type="button" value="C" onclick="clean()"></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="5" ><input style="height:105px; " class="button" type="button" value="="  onclick="result()"></td>
 </tr>
 
 <tr>
 <td colspan="2" ><input style="width:104px;" class="button" type="button" value="0"  onclick="insert(0)"></td>
 <td><input class="button" type="button" value="."  onclick="insert('.')"></td>
 </tr>
</table>
  </body>
</html>

Ardından gelişmiş hesap makinesi ve göze hitap etmesi için CSS kodlarını yazalım. CSS Tasarım açısından önemli , tasarım bilindiği gibi CSS ile gerçekleştiriyoruz...Tasarımda ise button , arkaplan , kenarlıklar vb. yerlerde göze hitap etmesi yönunden apayrı bir yer barındırıyor...

Hemen ardından CSS kodlarını veriyorum :

<style type="text/css">

  body {
  margin:0;
  padding:0;
  background:#1e1e1e;

  }
  .button {
  height:50px;
  width:50px;
  font-size:25px;
  cursor:pointer;
  background:#000;
  color:white;
  box-shadow:1px 1px 15px 1px #f00 inset;
  }

  .button:hover{
   transform: scale(0.9,0.9);
   border:2.5px solid #000;
  }


  .text {
  position:relative;
  width:203px;
  left:-4px;
  margin:5px;
  font-size:25px;
  padding:5px;
  background:#101010;
  box-shadow:1px 1px 5px 1px #fff inset ;
  color:#fff;
  }

  #box {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  }

  table {
  background:#f00;
  box-shadow:10px 20px 20px 40px #fff inset;
  }


</style>

Evet CSS kodlarını gerekli tüm işlemleri yapıyoruz. Ardından hemen Javascript kodlarını yazalım...

Javascript kodları daha kısa olacak hemen altta javascript kodlarını veriyorum...

<script type="text/javascript">
 function insert(number){
 document.form.text.value=document.form.text.value+number;
 }

 function result(){
 var exp = document.form.text.value;
 if(exp){
 document.form.text.value = eval(exp);
 }
 }

 function clean(){
 document.form.text.value="";
 }
 function back(){
 var exp=document.form.text.value;
 document.form.text.value = exp.substring(0,exp.length-1);
 }

</script>

Şimdi işe JavaScript İle Hesap Makinesi ' nin ekran kaydını veriyorum...

javascript Hesap Makinesi Yapımı - Tutarlios

Evet Yapmaya Çalıştımız Hesap makinesi karşımızda...

Bu hesap makinesi ile bilindik tüm işlemler yapılabilir...Bu kodu altta önizlenebilir kodlar üzerinde değişiklik yapılabilir...

CODEOPEN ile ÖNİZLE

ANLAMADINIZ YERLER İÇİN YORUM YAPABİLİRSINIZ YADA BENİMLE İLETİŞİME GEÇİN...

Termux Dersleri buradan ulaşabilirşiniz