Embeddable Basic Calculator for Your Site

Add a clean and simple calculator to your website. Perfect for blogs, educational sites, or any website where users need to perform basic arithmetic calculations.

Calculator Preview

Installation Instructions

1.Copy the code in the text box below
2.Paste it into your HTML page
3.You may edit the CSS or HTML layout, but do not modify the JavaScript
4.Keep the attribution link "powered by Ultimate Calc Hub"

<!--BEGIN OF BASIC CALCULATOR CODE-->
<!-- Terms of Use (see below) -->
<div id="uch-embed-calc">
  <h2 style="margin-bottom: 1rem;">Basic Calculator</h2>
  
  <div id="calculator" style="max-width: 300px; margin: 0 auto; padding: 1rem; background: var(--uch-bg); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <div style="background: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 10px; text-align: right;">
      <span id="display" style="font-size: 24px; font-family: monospace;">0</span>
    </div>

    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;">
      <button onclick="clearDisplay()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #ff4444; color: white; grid-column: span 2;">AC</button>
      <button onclick="handleOperator('÷')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">÷</button>
      <button onclick="handleOperator('×')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">×</button>

      <button onclick="handleNumber('7')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">7</button>
      <button onclick="handleNumber('8')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">8</button>
      <button onclick="handleNumber('9')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">9</button>
      <button onclick="handleOperator('-')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">-</button>

      <button onclick="handleNumber('4')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">4</button>
      <button onclick="handleNumber('5')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">5</button>
      <button onclick="handleNumber('6')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">6</button>
      <button onclick="handleOperator('+')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">+</button>

      <button onclick="handleNumber('1')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">1</button>
      <button onclick="handleNumber('2')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">2</button>
      <button onclick="handleNumber('3')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">3</button>
      <button onclick="calculateResult()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: var(--uch-accent); color: white; grid-row: span 2;">=</button>

      <button onclick="handleNumber('0')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; grid-column: span 2;">0</button>
      <button onclick="handleDecimal()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">.</button>
    </div>
  </div>

  <center id="uch-credit" style="margin-top: 1rem; font-size: 0.875rem;">
    powered by <a href="https://ultimatecalchub.com" target="_blank" rel="dofollow" style="color: var(--uch-accent); text-decoration: none;">Ultimate Calc Hub</a>
  </center>
</div>

<script>
let display = '0';
let lastNumber = '';
let operator = '';
let isNewNumber = true;

function updateDisplay() {
  document.getElementById('display').textContent = display;
}

function clearDisplay() {
  display = '0';
  lastNumber = '';
  operator = '';
  isNewNumber = true;
  updateDisplay();
}

function handleNumber(num) {
  if (isNewNumber) {
    display = num;
    isNewNumber = false;
  } else {
    display += num;
  }
  updateDisplay();
}

function handleDecimal() {
  if (isNewNumber) {
    display = '0.';
    isNewNumber = false;
  } else if (!display.includes('.')) {
    display += '.';
  }
  updateDisplay();
}

function handleOperator(op) {
  if (operator && !isNewNumber) {
    calculateResult();
  }
  lastNumber = display;
  operator = op;
  isNewNumber = true;
}

function calculateResult() {
  if (!operator || !lastNumber) return;

  const num1 = parseFloat(lastNumber);
  const num2 = parseFloat(display);
  let result = 0;

  switch (operator) {
    case '+': result = num1 + num2; break;
    case '-': result = num1 - num2; break;
    case '×': result = num1 * num2; break;
    case '÷': result = num1 / num2; break;
  }

  display = result.toString();
  lastNumber = '';
  operator = '';
  isNewNumber = true;
  updateDisplay();
}
</script>

<style>
:root {
  --uch-accent: #0066ff;
  --uch-bg: #f9f9f9;
  --uch-text: #333;
}

#uch-embed-calc {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--uch-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 400px;
  margin: 0 auto;
}

#uch-embed-calc button {
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

#uch-embed-calc button:hover {
  opacity: 0.9;
  transform: scale(0.98);
}

#uch-embed-calc button:active {
  transform: scale(0.95);
}
</style>
<!--
TERMS OF USE
By embedding this calculator, you agree:
1. The materials are provided "as is" and without warranties.
2. You may customize HTML/CSS but not modify JavaScript.
3. Keep "powered by Ultimate Calc Hub" with its link.
4. Copyright belongs to Ultimate Calc Hub (https://ultimatecalchub.com).
5. Do not remove or alter these terms.
-->
<!--END OF BASIC CALCULATOR CODE-->

Terms of Use

By embedding this calculator, you agree to the following:

1.The materials are provided "as is" without warranties of any kind
2.You may customize the HTML and CSS, but not the JavaScript code
3.You must keep the "powered by Ultimate Calc Hub" text and link
4.The copyright belongs to Ultimate Calc Hub
5.You must not remove or alter these terms

About the Basic Calculator

Our Basic Calculator provides essential arithmetic operations in a clean, user-friendly interface. It's perfect for simple calculations and can be easily integrated into any website.

•Key Features

–Basic arithmetic operations (addition, subtraction, multiplication, division)
–Clear and responsive interface
–Decimal point support
–Chain calculations
–Clear entry function

•Customization Options

The calculator's appearance can be customized using CSS variables:

–--uch-accent: Main accent color
–--uch-bg: Background color
–--uch-text: Text color