<html>
<head>
<title>Hesapla</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cerceve">
<div style="text-align:center;">
<p>Ümit ŞEN - İzmir - 2017 - <a href="http://umitsen.wordpress.com">Bloğum</a></p>
</div>
<div class="tablo">
<div class="goster">
<div class="tabloSatir">
<div class="lblGirilen">Girilen : </div>
<div class="girilen"></div>
</div>
<div class="tabloSatir">
<div class="lblSonuc">Sonuç : </div>
<div class="sonuc"></div>
</div>
</div>
<div class="isle">
<div class="rakamlar">
<div class="tabloSatir">
<span class="hucre">1</span>
<span class="hucre">2</span>
<span class="hucre">3</span>
</div>
<div class="tabloSatir">
<span class="hucre">4</span>
<span class="hucre">5</span>
<span class="hucre">6</span>
</div>
<div class="tabloSatir">
<span class="hucre">7</span>
<span class="hucre">8</span>
<span class="hucre">9</span>
</div>
<div class="tabloSatir">
<span></span>
<span class="hucre">0</span>
<span class="hucre">.</span>
</div>
</div>
<div class="islemler">
<div class="tabloSatir">
<span class="hucre">+</span>
</div>
<div class="tabloSatir">
<span class="hucre">-</span>
</div>
<div class="tabloSatir">
<span class="hucre">x</span>
</div>
<div class="tabloSatir">
<span class="hucre">/</span>
</div>
</div>
<div class="fonksiyonlar">
<div class="tabloSatir">
<span class="hucre">C</span>
</div>
<div class="tabloSatir">
<span class="hucre">sil</span>
</div>
<div class="tabloSatir">
<span class="hucre">=</span>
</div>
</div>
<div class="bilimsel">
<div class="tabloSatir">
<span class="hucre">cos</span>
<span class="hucre">|x|</span>
</div>
<div class="tabloSatir">
<span class="hucre">sin</span>
<span class="hucre">x<sup>2</sup></span>
</div>
<div class="tabloSatir">
<span class="hucre">tan</span>
<span class="hucre">x<sup>y</sup></span>
</div>
<div class="tabloSatir">
<span class="hucre">(</span>
<span class="hucre">)</span>
</div>
</div>
</div>
</div><!-- Tablo -->
</div><!-- Çerçeve -->
<script type="text/javascript" src="fonksiyon.js"></script>
</body>
</html>
#cerceve{
margin:auto;
padding: 30px;
width:550px;
}
/* Genel Tablo Yapısı */
.tablo{
display: table;
width: auto;
border-spacing: 5px;
}
.tabloSatir {
display: table-row;
}
.hucre {
display: table-cell;
height: 60px;
width: 60px;
border-radius: 30px;
text-align: center;
line-height: 60px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
/* Alt Tablolar */
.goster{
width: 510px;
border: 2px solid purple;
}
.isle{
float:left;
margin-top:5px;
width: 510px;
border: 2px solid purple;
}
.sonuc, .girilen, .lblGirilen, .lblSonuc{
border-radius: 5px;
margin-left: 5px;
float: left;
height: 40px;
width: 238px;
border: 1px solid green;
line-height: 40px;
text-align: right;
background-color: #66cc66;
font-size: 20px;
color:white;
}
.rakamlar, .islemler, .fonksiyonlar, .bilimsel{
float: left;
}
/* Rakamlar Tablosu */
.rakamlar span.hucre{
border: 2px solid #801515;
}
.rakamlar span.hucre:hover{
background-color: #ffaaaa;
color:#a05;
border-radius: 15px;
}
/* İşlemler Tablosu*/
.islemler span.hucre{
border: 2px solid #116611;
}
.islemler span.hucre:hover{
background-color: #88cc88;
}
/* Fonksiyonlar Tablosu*/
.fonksiyonlar span.hucre{
border: 2px solid #261758;
border-radius:10px;
}
.fonksiyonlar span.hucre:hover{
background-color: #887caf;
}
/* Bilimsel Tablosu*/
.bilimsel span.hucre{
border: 2px solid #804c15;
border-radius: 10px;
}
.bilimsel span.hucre:hover{
background-color: #ffd6aa;
}
/**
* ...
* @author Ümit Şen
* 2017 izmir balçova
*/
var liste = document.querySelectorAll("#cerceve span");
for (var i = 0; i < liste.length; i++) {
liste[i].onclick = function(e) {
var deger = this.innerHTML;
var girdi = document.querySelector(".girilen");
var sonuc=document.querySelector('.sonuc');
if (deger=='C') {
girdi.innerHTML='';
sonuc.innerHTML='';
}
else if(deger=='sil'){
girdi.innerHTML=girdi.innerHTML.substring(0,girdi.innerHTML.length-1);
}
else if (deger=='=') {
var k = girdi.innerHTML.replace(/x/g,'*').replace('cos(','Math.cos(').replace('sin(','Math.sin(').replace('tan(','Math.tan(').replace('|','Math.abs(').replace('|',')').replace('<sup>','**').replace('</sup>','').replace('^','**');
sonuc.innerHTML=eval(k);
girdi.innerHTML='';
}
else{
if(deger=='cos' || deger=='sin' || deger=='tan'){
girdi.innerHTML +=this.innerHTML+'(';
}
else if (deger=='|x|') {
girdi.innerHTML +='|';
}
else if (deger=='x<sup>2</sup>') {
girdi.innerHTML +='<sup>2</sup>';
}
else if (deger=='x<sup>y</sup>') {
girdi.innerHTML +='^';
}
else{
girdi.innerHTML +=this.innerHTML;
}
}
e.preventDefault();
}
}
Also see: Tab Triggers