Basit Bir HTML Hesaplayıcı Nasıl Yapılır

HTML ile Hesap Makinesi Nasıl Oluşturulur

Eğer toplama, çıkarma, çarpma ve bölme gibi temel işlevlerle hızlı ve basit bir hesaplayıcıya ihtiyacınız varsa, aşağıdaki kodu kullanın. Bu hesaplayıcının HTML kodunu HTML dosyanıza ekleyebilir ve her şeyin nasıl çalıştığını görebilirsiniz. Kod, her şeyin nasıl çalıştığını anlamanıza ve bu uygulamanın stilini ve düzenini değiştirmenize yardımcı olacak açıklamalar içerir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calculator</title>
  <style>
    /* Style for the entire body, centering the calculator */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    /* Style for the calculator container */
    .calculator {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Style for the display area */
    .display {
      width: 160px;
      height: 40px;
      text-align: right;
      margin-bottom: 10px;
      font-size: 1.5em;
      padding: 5px;
    }

    /* Grid layout for the calculator buttons */
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 40px);
      gap: 10px;
    }

    /* Style for the buttons */
    .buttons button {
      width: 40px;
      height: 40px;
      font-size: 1.2em;
      border: none;
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Hover effect for the buttons */
    .buttons button:hover {
      background-color: #45a049;
    }

    /* Special style for the equals button */
    .buttons .equals {
      grid-column: span 2; /* Spans over 2 columns */
      background-color: #2196F3;
    }

    /* Hover effect for the equals button */
    .buttons .equals:hover {
      background-color: #0b7dda;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <!-- Input field to display the calculator results -->
    <input type="text" class="display" id="display" disabled>
    
    <!-- Calculator buttons laid out in a grid -->
    <div class="buttons">
      <button onclick="appendNumber('1')">1</button>
      <button onclick="appendNumber('2')">2</button>
      <button onclick="appendNumber('3')">3</button>
      <button onclick="setOperator('+')">+</button>

      <button onclick="appendNumber('4')">4</button>
      <button onclick="appendNumber('5')">5</button>
      <button onclick="appendNumber('6')">6</button>
      <button onclick="setOperator('-')">-</button>

      <button onclick="appendNumber('7')">7</button>
      <button onclick="appendNumber('8')">8</button>
      <button onclick="appendNumber('9')">9</button>
      <button onclick="setOperator('*')">*</button>

      <button onclick="clearDisplay()">C</button>
      <button onclick="appendNumber('0')">0</button>
      <button onclick="calculate()" class="equals">=</button>
      <button onclick="setOperator('/')">/</button>
    </div>
  </div>

  <script>
    /* Variables to store current input, previous input, and operator */
    let currentInput = '';
    let operator = '';
    let previousInput = '';

    /* Function to append numbers to the current input */
    function appendNumber(number) {
      currentInput += number; // Append the clicked number to current input
      document.getElementById('display').value = currentInput; // Update the display
    }

    /* Function to set the operator and prepare for the next input */
    function setOperator(op) {
      operator = op; // Store the chosen operator
      previousInput = currentInput; // Store the current input as previous
      currentInput = ''; // Clear the current input for the next number
    }

    /* Function to perform the calculation based on the operator */
    function calculate() {
      let result;
      // Perform the appropriate operation based on the operator
      if (operator === '+') {
        result = parseFloat(previousInput) + parseFloat(currentInput);
      } else if (operator === '-') {
        result = parseFloat(previousInput) - parseFloat(currentInput);
      } else if (operator === '*') {
        result = parseFloat(previousInput) * parseFloat(currentInput);
      } else if (operator === '/') {
        result = parseFloat(previousInput) / parseFloat(currentInput);
      }
      document.getElementById('display').value = result; // Display the result
      currentInput = result.toString(); // Store the result as the new current input
      operator = ''; // Reset the operator
    }

    /* Function to clear the display and reset the calculator */
    function clearDisplay() {
      currentInput = '';
      previousInput = '';
      operator = '';
      document.getElementById('display').value = ''; // Clear the display
    }
  </script>
</body>
</html>

Ana bölümlerin açıklaması

Hesaplayıcıyı yönetmenize ve ayarlamanıza yardımcı olmak için işlevleriyle ilgili ek yönergeler hazırladık:

HTML Yapısı

• calculator sınıfına sahip bir div öğesi içinde bulunur.
• Hesaplayıcı için görüntülemek amacıyla bir input öğesi kullanılır ve kullanıcıların elle yazmasını engellemek için devre dışı bırakılmıştır.
• Düğmeler, buttons div’i kullanılarak ızgara biçiminde düzenlenir ve bir hesap makinesi gibi görünmesi için konumlandırılır.

CSS Stil Özelleştirme

• Sayfa gövdesi, hesaplayıcıyı dikey ve yatay olarak ortalayacak biçimde tasarlandı.
• Hesap makinesi, kart benzeri görünüm veren beyaz bir arka plana, yuvarlatılmış köşelere ve gölgeye sahip.
• Düğmeler, görsel geri bildirim için tutarlı boyut, renk ve hover etkisiyle stilize edilmiştir.

JavaScript İşlevselliği

• appendNumber() ekrana sayılar ekler, kullanıcı bir düğmeye tıkladığında.
• setOperator() seçili operatörü (+, -, *, /) saklar ve mevcut girdiyi previousInput olarak kaydeder.
• calculate() seçili operatöre göre uygun matematiksel işlemi gerçekleştirir ve sonucu gösterir.
• clearDisplay() tüm girişleri ve ekranı temizleyerek hesaplayıcıyı sıfırlar.

Bu, temel HTML, CSS ve JS kullanan sade bir hesap makinesi. Bu nedenle görünümü ve işlevleri oldukça sınırlıdır.

Karmaşık Görevler İçin Bir Hesaplayıcı Nasıl Yapılır

Yukarıdaki basit HTML hesaplayıcımız temel işlemler için yeterli ve temiz, işlevsel bir tasarıma sahip. Kod yazmayı öğrenirken biraz eğlence için ya da ilerlemenizi takip etmek için idealdir. Ancak profesyonel veya daha karmaşık görevler söz konusu olduğunda, daha gelişmiş bir çözüme ihtiyaç duyabilirsiniz. Bir aile bütçesi planlıyor ya da bir gezi organize ediyorsanız, gelişmiş hesaplama özellikleri büyük fark yaratabilir. Peki seçenekleriniz neler?

Kodlamayı Keşfedin

Daha karmaşık projelere yaklaşmanın en iyi yolu HTML, CSS ve JavaScript’e daha derinlemesine dalmaktır. İleri düzeydeki bilgiyle, çoklu alanlar, seçenekler, koşullar ve değişkenlerle hesaplamalar oluşturabileceksiniz. O noktada kodlama becerileriniz, yalnızca temel bir HTML hesaplayıcı inşa etmekten çok daha öteye gidecek. Bu, gidilecek uzun bir yol.

HTML için Kodsuz Hesaplayıcı Widget’ını Deneyin

Kodlama becerileriniz henüz bu kadar gelişmemişse ve şimdi güçlü bir çözüme ihtiyacınız varsa, sizin için güzel haberler var. Hiç kodlama bilmeden özel bir HTML’de Hesap Makinesi Aracı oluşturabilirsiniz. Kendi çok sayıda alan ekleyebilir, koşulları ayarlayabilir ve senaryonuza uygun şekilde her şeyi net bir şekilde adlandırabilirsiniz. Devam etmeden önce aşağıdaki editörde bunu test edin.

HTML Hesap Makinesi Widget’ı: Kod Gerekmez

Bu bölümde özel HTML Hesap Makinesi widget’ınızı nasıl oluşturacağınıza dair daha ayrıntılı bilgi vereceğiz. Ayrıca herhangi bir web sitesine kolayca gömülebilir ve hemen çalışır. Nasıl olduğuna bakalım.

5. Kaydedin ve kullanmaya başlayın. Sonuçtan memnun olduğunuzda, hesaplayıcınızın HTML kodunu almak için widget’inizi yayımlayın. Artık herhangi bir web sitesi platformuna ekleyebileceğiniz birkaç satır kod göreceksiniz.

Bir web sitesinde, ihtiyacınız olduğu sürece bu HTML Hesap Makinesi widget’ını kullanabilirsiniz. Maliyetlerinizi veya tasarruflarınızı planlayın, ticari hizmetlerinizi tanıtmak için kullanın veya blogunuza etkileşim katın. En popüler CMS platformlarına Hesap Makinenizi En Popüler CMS Platformlarına Eklemek veya kendi web sitesi oluşturucunuzu Platformlar Listesi içinde bulabilirsiniz.

HTML’deki Hesaplayıcı Örnekleri

Kodlama olmadan kendinizin neler yaratabileceğine dair sadece 5-10 dakika içinde birkaç örnek burada. Kullanım durumunuzu aklınızda tutun ve düzenleyiciyle çalışırken hesaplayıcı formuna tüm fikirleri dahil etmeye çalışın.

İpotek Hesaplayıcı

Konut Kredisi Hesaplayıcısı.

ROI Hesaplayıcı

İşletmeleri yatırımlarından potansiyel getirileri kolayca hesaplamaları için güçlendirin. Şablonumuz olan ROI Hesaplayıcı şablonunu inceleyin.

VKİ Hesaplayıcı

Boy ve kilonuzu girerek Vücut Kitle Endeksi’ni (BMI) hesaplayın ve değerli sağlık içgörülerine ulaşın. Oluşturmaya BMI Hesaplayıcı ile başlayın.

Son Düşünceler

Sonuç olarak, basit bir HTML hesaplayıcısının nasıl oluşturulacağını, kullanıma hazır kodlarla birlikte gösterdik. Temel görevler ve öğrenme amacıyla mükemmel olsa da, daha gelişmiş hesaplamalar ve karmaşık senaryolar için çok yönlü bir widget en iyi seçenek olacaktır.

Widget’ımız her siteyle kusursuz entegrasyon sağlar ve popüler kullanım senaryolarının geniş bir yelpazesini destekler; gelişmiş işlevsellik ve esneklik sunar. Finans yönetiminden daha karmaşık hesaplamalara kadar, çözümümüz işi halletmek için ihtiyaç duyduğunuz araçları sunar.

Düzenleyici: Ücretsiz HTML Hesap Makinesi Oluşturun

Kendi özel HTML hesap makinenizi oluşturmaya ve tüm özellikleri keşfetmeye hazır mısınız? Sayfa içi Hesap Makinesi Editörü ile widget’ın çalıştığını görün!

Bize Ulaşın

Umarız bu rehber sizin için faydalı olmuştur! Web siteniz için özel bir hesaplayıcı oluşturmaya mı düşünüyorsunuz? bize ulaşın. Elfsight olarak amacımız, kod gerektirmeyen widget’larımızla size zahmetsiz ve başarılı bir deneyim sunmaktır.

Canlı Topluluk içinde fikirler ve içgörüler her zaman paylaşılır. Geliştirme önerilerinize açığız—sadece onları İstek Listesi‘ne ekleyin!

Makale tarafından

Ivan Timofeev

Teknik İçerik Uzmanı

Ivan, Elfsight’te teknik içerik uzmanıdır. Farklı platformlar için entegrasyonlar ve manuel iş yükünü azaltan otomasyon iş akışlarını kapsayan pratik API rehberleri ve geliştirici belgeleri yazar.

X’te Takip Et

LinkedIn’de Takip Et

Web Sitesi