HTML, CSS ve JavaScript ile Hesap Makinesi Yapımı (Çalışan Kod Örneği)

Meta Açıklaması: HTML, CSS ve JavaScript kullanarak çalışan bir hesap makinesi nasıl yapılır? Bu rehberde sıfırdan modern tasarımlı hesap makinesi geliştiriyor ve tüm kodları adım adım inceliyoruz.

Giriş

Web geliştirmeye başlayanların yaptığı ilk projelerden biri hesap makinesidir. Bu proje sayesinde HTML ile sayfa yapısını oluşturmayı, CSS ile tasarım yapmayı ve JavaScript ile kullanıcı etkileşimlerini yönetmeyi öğrenebilirsiniz.

Bu makalede tamamen çalışan, modern görünümlü ve mobil uyumlu bir hesap makinesi geliştireceğiz.

Projede Kullanacağımız Teknolojiler

  • HTML5
  • CSS3
  • JavaScript
  • Responsive Tasarım

Proje Klasörü

Öncelikle aşağıdaki gibi bir klasör oluşturun.

hesap-makinesi/

│── index.html
│── style.css
└── script.js

1. index.html Dosyası

<!DOCTYPE html>
<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Hesap Makinesi</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="calculator">

<input type="text" id="screen" readonly>

<div class="buttons">

<button onclick="clearScreen()">C</button>

<button onclick="deleteLast()">←</button>

<button onclick="add('%')">%</button>

<button onclick="add('/')">÷</button>

<button onclick="add('7')">7</button>

<button onclick="add('8')">8</button>

<button onclick="add('9')">9</button>

<button onclick="add('*')">×</button>

<button onclick="add('4')">4</button>

<button onclick="add('5')">5</button>

<button onclick="add('6')">6</button>

<button onclick="add('-')">-</button>

<button onclick="add('1')">1</button>

<button onclick="add('2')">2</button>

<button onclick="add('3')">3</button>

<button onclick="add('+')">+</button>

<button onclick="add('0')">0</button>

<button onclick="add('.')">.</button>

<button onclick="calculate()" class="equal">=</button>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

2. style.css Dosyası

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:#f4f6f8;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.calculator{

width:340px;

background:#ffffff;

padding:20px;

border-radius:15px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

#screen{

width:100%;

height:60px;

border:none;

background:#ececec;

font-size:28px;

text-align:right;

padding:15px;

border-radius:10px;

margin-bottom:20px;

}

.buttons{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:10px;

}

button{

height:60px;

border:none;

border-radius:10px;

font-size:22px;

cursor:pointer;

background:#3498db;

color:#fff;

transition:.3s;

}

button:hover{

background:#2176bd;

}

.equal{

grid-column:span 2;

background:#27ae60;

}

.equal:hover{

background:#1f8a4c;

}

3. script.js Dosyası

const screen = document.getElementById("screen");

function add(value){

screen.value += value;

}

function clearScreen(){

screen.value = "";

}

function deleteLast(){

screen.value = screen.value.slice(0,-1);

}

function calculate(){

try{

screen.value = eval(screen.value);

}

catch{

screen.value = "Hata";

}

}

Projeyi Çalıştırma

Üç dosyayı aynı klasör içerisine kaydedin.

Ardından sadece index.html dosyasını çift tıklayarak açmanız yeterlidir.

Herhangi bir kurulum yapmanız gerekmez.

Hesap Makinesi Nasıl Çalışıyor?

HTML yalnızca arayüzü oluşturur.

CSS butonların görünümünü ve düzenini sağlar.

JavaScript ise;

  • Tuşa basıldığında ekrana sayı yazar.
  • Silme işlemini gerçekleştirir.
  • Temizleme işlemini yapar.
  • Dört işlem sonucunu hesaplar.

Geliştirme Fikirleri

Projeyi daha profesyonel hale getirmek için aşağıdaki özellikleri ekleyebilirsiniz.

  • Karanlık Mod
  • Bilimsel Hesap Makinesi
  • Klavye Desteği
  • İşlem Geçmişi
  • Hafıza (M+, M-, MR)
  • Karekök
  • Üslü Sayılar
  • Sinüs
  • Kosinüs
  • Tanjant
  • Faktöriyel
  • Logaritma
  • Pi Sayısı
  • Parantez Desteği

Güvenlik Uyarısı

Bu örnek eğitim amacıyla hazırlanmıştır.

Kod içerisinde kullanılan eval() fonksiyonu gerçek projelerde önerilmez. Çünkü kullanıcıdan gelen ifadeleri doğrudan çalıştırır ve güvenlik riskleri oluşturabilir. Profesyonel uygulamalarda matematiksel ifadeleri ayrıştıran özel fonksiyonlar veya güvenilir kütüphaneler tercih edilmelidir.

SEO İçin İpuçları

Bu tarz eğitim içeriklerinde Google’ın dikkat ettiği önemli noktalar şunlardır:

  • Çalışan kod örnekleri paylaşın.
  • Kodların ne yaptığını açıklayın.
  • Gerçek ekran görüntüleri ekleyin.
  • Dosya yapısını gösterin.
  • Kullanıcıların karşılaşabileceği hatalara çözüm sunun.
  • Makaleyi düzenli olarak güncelleyin.

Sık Sorulan Sorular

Bu hesap makinesi telefonda çalışır mı?

Evet. CSS Grid yapısı sayesinde mobil cihazlarda da sorunsuz çalışır.

JavaScript olmadan hesap makinesi yapılabilir mi?

Hayır. HTML ve CSS yalnızca görünümü oluşturur. Hesaplama işlemleri için JavaScript gibi bir programlama dili gerekir.

Kodları istediğim gibi değiştirebilir miyim?

Evet. Buton renklerini, yazı tiplerini, boyutları ve yeni matematiksel fonksiyonları dilediğiniz gibi ekleyebilirsiniz.

Bu proje yeni başlayanlar için uygun mu?

Kesinlikle. HTML, CSS ve JavaScript’i birlikte öğrenmek isteyenler için en uygun başlangıç projelerinden biridir.

Sonuç

Bu projeyle temel web teknolojilerini kullanarak çalışan bir hesap makinesi geliştirdiniz. Aynı mantıkla döviz çevirici, yaş hesaplama aracı, kredi hesaplama sistemi veya not hesaplama uygulamaları gibi daha gelişmiş projeler oluşturabilirsiniz. Düzenli pratik yaparak hem kod yazma becerinizi geliştirebilir hem de portföyünüz için gerçek projeler hazırlayabilirsiniz.