Embeddable Scientific Calculator for Your Site

Add a professional Scientific Calculator to your website. Perfect for educational sites, math resources, or any website needing advanced calculation capabilities.

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 SCIENTIFIC CALCULATOR CODE-->
<!-- Terms of Use (see below) -->
<div id="uch-embed-calc">
  <h2 style="margin-bottom: 1rem;">Scientific Calculator</h2>
  
  <div id="calculator" style="max-width: 400px; 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(5, 1fr); gap: 5px;">
      <button onclick="handleMemory('MC')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">MC</button>
      <button onclick="handleMemory('MR')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">MR</button>
      <button onclick="handleMemory('M+')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">M+</button>
      <button onclick="handleMemory('M-')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">M-</button>
      <button onclick="clearDisplay()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #ff4444; color: white;">C</button>
      
      <button onclick="handleFunction('sin')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">sin</button>
      <button onclick="handleFunction('cos')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">cos</button>
      <button onclick="handleFunction('tan')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">tan</button>
      <button onclick="handleFunction('sqrt')" 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="handleFunction('ln')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">ln</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="handleFunction('log')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">log</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="handleOperator('-')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">-</button>
      <button onclick="handleFunction('exp')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">exp</button>

      <button onclick="handleNumber('0')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">0</button>
      <button onclick="handleDecimal()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">.</button>
      <button onclick="handleFunction('π')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">π</button>
      <button onclick="handleOperator('+')" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f0f0f0;">+</button>
      <button onclick="calculateResult()" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: var(--uch-accent); color: white;">=</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 memory = 0;
let lastNumber = '';
let operator = '';
let isNewNumber = true;
let isDegrees = 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;
    case '^': result = Math.pow(num1, num2); break;
  }

  display = result.toString();
  lastNumber = '';
  operator = '';
  isNewNumber = true;
  updateDisplay();
}

function handleFunction(func) {
  const num = parseFloat(display);
  let result = 0;

  switch (func) {
    case 'sin':
      result = isDegrees ? Math.sin(num * Math.PI / 180) : Math.sin(num);
      break;
    case 'cos':
      result = isDegrees ? Math.cos(num * Math.PI / 180) : Math.cos(num);
      break;
    case 'tan':
      result = isDegrees ? Math.tan(num * Math.PI / 180) : Math.tan(num);
      break;
    case 'sqrt':
      result = Math.sqrt(num);
      break;
    case 'ln':
      result = Math.log(num);
      break;
    case 'log':
      result = Math.log10(num);
      break;
    case 'exp':
      result = Math.exp(num);
      break;
    case 'π':
      result = Math.PI;
      break;
  }

  display = result.toString();
  isNewNumber = true;
  updateDisplay();
}

function handleMemory(action) {
  switch (action) {
    case 'MC':
      memory = 0;
      break;
    case 'MR':
      display = memory.toString();
      isNewNumber = true;
      break;
    case 'M+':
      memory += parseFloat(display);
      isNewNumber = true;
      break;
    case 'M-':
      memory -= parseFloat(display);
      isNewNumber = true;
      break;
  }
  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: 500px;
  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 SCIENTIFIC 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 Scientific Calculator

Our Scientific Calculator is a comprehensive tool designed for advanced mathematical calculations. It includes trigonometric functions, logarithms, exponentials, and memory functions, making it perfect for students, teachers, and professionals.

•Key Features

–Trigonometric functions (sin, cos, tan) with degree/radian mode
–Logarithmic functions (ln, log) and exponentials
–Memory operations (MC, MR, M+, M-)
–Basic arithmetic with power functions
–Constants (π) and square root functions

•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