Embeddable Percentage Calculator for Your Site

Add a professional Percentage Calculator to your website. Calculate percentages, increases, and decreases with this versatile calculator tool.

Calculator Preview

Enter Value

Enter Percentage

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 PERCENTAGE CALCULATOR CODE-->
<!-- Terms of Use (see below) -->
<div id="uch-embed-calc">
  <h2 style="margin-bottom: 1rem;">Percentage 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="margin-bottom: 1rem;">
      <label for="value" style="display: block; margin-bottom: 0.5rem;">Enter Value:</label>
      <input type="number" id="value" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="percentage" style="display: block; margin-bottom: 0.5rem;">Enter Percentage:</label>
      <input type="number" id="percentage" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
    </div>

    <button onclick="calculate()" style="width: 100%; padding: 8px 16px; background: var(--uch-accent); color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 1rem;">
      Calculate
    </button>

    <div id="results" style="background: rgba(0,0,0,0.03); padding: 1rem; border-radius: 4px; display: none;">
      <div style="margin-bottom: 0.5rem;">
        <strong>Basic Result:</strong>
        <p id="basic-result"></p>
      </div>
      <div style="margin-bottom: 0.5rem;">
        <strong>Increase By Result:</strong>
        <p id="increase-result"></p>
      </div>
      <div>
        <strong>Decrease By Result:</strong>
        <p id="decrease-result"></p>
      </div>
    </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>
function calculate() {
  const value = parseFloat(document.getElementById('value').value);
  const percentage = parseFloat(document.getElementById('percentage').value);

  if (isNaN(value) || isNaN(percentage)) {
    alert('Please enter valid numbers');
    return;
  }

  const result = (value * percentage) / 100;
  const increaseResult = value + result;
  const decreaseResult = value - result;

  document.getElementById('basic-result').textContent = `${percentage}% of ${value} = ${result.toFixed(2)}`;
  document.getElementById('increase-result').textContent = `${value} increased by ${percentage}% = ${increaseResult.toFixed(2)}`;
  document.getElementById('decrease-result').textContent = `${value} decreased by ${percentage}% = ${decreaseResult.toFixed(2)}`;
  document.getElementById('results').style.display = 'block';
}
</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 input:focus {
  outline-color: var(--uch-accent);
}

#uch-embed-calc button:hover {
  opacity: 0.9;
}

#results p {
  margin: 0.25rem 0;
}
</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 PERCENTAGE 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 Percentage Calculator

Our Percentage Calculator helps users perform percentage calculations quickly and accurately. It's perfect for calculating discounts, tips, tax, price increases/decreases, and more.

•Key Features

–Calculate percentage of a number
–Calculate percentage increase
–Calculate percentage decrease
–Clear and organized results display
–Mobile-friendly interface

•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