HTML – Hesap Makinası Kodu

on Ağustos 26, 2023

Bu örnek, sanki cep telefonundaki bir hesap makinası gibi, kullanıcıların basit matematik işlemleri yapabilmesi için hoş bir arayüz sunuyor. Misal, bir arkadaşın sana “7” tuşuna bastığında, ekranda büyükçe bir “7” beliriyor. Sonra “8” ve “9” tuşlarına bastığında aynı şey oluyor. “Artı” butonuna tıklayarak toplama işlemine geçiyoruz. Bu süreç boyunca ekranda yazılar büyüyor gibi, adeta gerçek bir hesap makinası hissi veriyor.

Biraz daha arkadaşlarımızın diline uygun bir ifadeyle ifade etmek gerekirse, bu kod, adeta “Ne ara matematikçi oldum?” dediğimiz anlarda bize yardımcı oluyor. Sayı tuşlarına tıklıyor, sonra da o “Artı” veya “Eksi” tuşlarına bastığımızda, sonuç anında ekranda beliriyor. Ne harika bir hız!

Unutma ki, bu kod gerçek dünyada kullanılmadan önce biraz daha güvenlik ve hız konularına odaklanarak geliştirilmeli. Yani, sanki kahve yaparken yanlışlıkla tüm mutfağı dağıtmak yerine, daha organize bir şekilde güzel bir fincan kahve demlemek gibi düşün. 😄


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hesap Makinası</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  #calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>
<div id="calculator">
  <input type="text" id="display" disabled>
  <div>
    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button onclick="appendOperator('+')">+</button>
  </div>
  <div>
    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button onclick="appendOperator('-')">-</button>
  </div>
  <div>
    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button onclick="appendOperator('*')">*</button>
  </div>
  <div>
    <button onclick="appendNumber('0')">0</button>
    <button onclick="calculate()">=</button>
    <button onclick="clearDisplay()">Temizle</button>
    <button onclick="appendOperator('/')">/</button>
  </div>
</div>
<script>
  let currentInput = ''; // Kullanıcının girdiğini depolamak için bir değişken
  
  function appendNumber(number) {
    currentInput += number; // Kullanıcının seçtiği sayıları saklayın
    document.getElementById('display').value = currentInput; // Ekranda göster
  }
  
  function appendOperator(operator) {
    if (currentInput !== '') {
      currentInput += operator; // Kullanıcının seçtiği işlem operatörünü saklayın
      document.getElementById('display').value = currentInput; // Ekranda göster
    }
  }
  
  function clearDisplay() {
    currentInput = ''; // Girdiyi temizle
    document.getElementById('display').value = ''; // Ekranda temizle
  }
  
  function calculate() {
    if (currentInput !== '') {
      try {
        const result = eval(currentInput); // Kullanıcının girdisini hesaplayın
        document.getElementById('display').value = result; // Sonucu ekranda göster
        currentInput = result.toString(); // Sonucu sakla
      } catch (error) {
        document.getElementById('display').value = 'Hata'; // Hata durumunda ekranda göster
        currentInput = ''; // Girdiyi temizle
      }
    }
  }
</script>
</body>
</html>