Integrar la calculadora en tu sitio web es muy sencillo. Solo necesitas insertar un contenedor vacío donde quieras que aparezca y cargar un script que inyectará automáticamente la calculadora dentro de tu página.

Cómo integrar esta calculadora en tu página web mediante un script

1. Añade un contenedor en tu HTML

Coloca este bloque donde quieras que aparezca la calculadora:

html

<div id="calculadora-azul"></div>

Este div actuará como punto de montaje.

2. Inserta el script que carga la calculadora

Justo antes del cierre de </body>, añade:

html

<script src="ruta/calculadora.js"></script>

Ese archivo calculadora.js debe contener todo el código JavaScript que genera dinámicamente:

El HTML de la calculadora
Los estilos CSS necesarios
La lógica de funcionamiento

De esta forma, tu página se mantiene limpia y la calculadora se integra sin modificar tu estructura actual.

3. Cómo funciona internamente el script

El script debe:

Crear un elemento <section> con toda la calculadora
Insertarlo dentro del div#calculadora-azul
Añadir los estilos mediante document.createElement("style")
Activar los eventos de los botones
Asegurar que todo es responsive y no interfiere con tu CSS existente

4. Ventajas de integrarla mediante script

Esto permite que la calculadora funcione como un módulo independiente, fácil de mover, actualizar o reutilizar en cualquier otra web.

No ensucia tu HTML
No rompe estilos existentes
Puedes actualizar la calculadora sin tocar tu web
Puedes usarla en varias páginas con una sola línea
Es compatible con WordPress, DIVI, Blogger, HTML puro, etc.

Script completo — `calculadora.js`

Este archivo funciona tal cual. Solo súbelo a tu servidor y añádelo con:

html
<script src="calculadora.js"></script>

javascript

(function () {
  // 1. Crear contenedor principal
  const root = document.getElementById("calculadora-azul");
  if (!root) {
    console.error("No se encontró el contenedor #calculadora-azul");
    return;
  }

  // 2. Estilos completos (CSS)
  const style = document.createElement("style");
  style.textContent = `
    .calc-wrapper {
      width: 100%;
      max-width: 420px;
      margin: 20px auto;
      background: #0b1b3b;
      padding: 20px;
      border-radius: 12px;
      color: #fff;
      font-family: system-ui, sans-serif;
      box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    }
    .calc-display {
      background: #102347;
      padding: 15px;
      border-radius: 8px;
      text-align: right;
      margin-bottom: 15px;
      min-height: 60px;
    }
    .calc-display .exp {
      font-size: 0.9rem;
      opacity: 0.7;
    }
    .calc-display .res {
      font-size: 1.8rem;
      font-weight: bold;
    }
    .calc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .calc-btn {
      padding: 15px;
      font-size: 1.1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background: #1a2d5c;
      color: #fff;
      transition: 0.15s;
    }
    .calc-btn:hover {
      background: #26407d;
    }
    .op {
      background: #1f6feb;
    }
    .op:hover {
      background: #3c82ff;
    }
    .eq {
      grid-column: span 2;
      background: #3c82ff;
    }
    .eq:hover {
      background: #5a9aff;
    }
    .zero {
      grid-column: span 2;
    }
    .ac {
      background: #e55353;
    }
    .ac:hover {
      background: #ff6b6b;
    }
  `;
  document.head.appendChild(style);

  // 3. HTML generado dinámicamente
  root.innerHTML = `
    <div class="calc-wrapper">
      <div class="calc-display">
        <div class="exp" id="calc-exp"></div>
        <div class="res" id="calc-res">0</div>
      </div>

      <div class="calc-grid">
        <button class="calc-btn ac" data-action="clear">AC</button>
        <button class="calc-btn" data-action="back">⌫</button>
        <button class="calc-btn op" data-value="%">%</button>
        <button class="calc-btn op" data-value="/">÷</button>

        <button class="calc-btn" data-value="7">7</button>
        <button class="calc-btn" data-value="8">8</button>
        <button class="calc-btn" data-value="9">9</button>
        <button class="calc-btn op" data-value="*">×</button>

        <button class="calc-btn" data-value="4">4</button>
        <button class="calc-btn" data-value="5">5</button>
        <button class="calc-btn" data-value="6">6</button>
        <button class="calc-btn op" data-value="-">−</button>

        <button class="calc-btn" data-value="1">1</button>
        <button class="calc-btn" data-value="2">2</button>
        <button class="calc-btn" data-value="3">3</button>
        <button class="calc-btn op" data-value="+">+</button>

        <button class="calc-btn zero" data-value="0">0</button>
        <button class="calc-btn" data-value=".">.</button>
        <button class="calc-btn eq" data-action="equal">=</button>
      </div>
    </div>
  `;

  // 4. Lógica de la calculadora
  const expEl = document.getElementById("calc-exp");
  const resEl = document.getElementById("calc-res");

  let expression = "";

  function update() {
    expEl.textContent = expression;
  }

  function append(val) {
    const last = expression.slice(-1);
    const ops = "+-*/%";

    if (val === "." && last === ".") return;
    if (ops.includes(val) && ops.includes(last)) return;

    expression += val;
    update();
  }

  function calculate() {
    if (!expression) return;

    try {
      const safe = expression.replace(/%/g, "/100");
      const result = Function("return " + safe)();
      resEl.textContent = Number(result.toFixed(10));
    } catch {
      resEl.textContent = "Error";
    }
  }

  function back() {
    expression = expression.slice(0, -1);
    update();
  }

  function clearAll() {
    expression = "";
    resEl.textContent = "0";
    update();
  }

  // 5. Eventos
  root.querySelectorAll(".calc-btn").forEach(btn => {
    const val = btn.dataset.value;
    const action = btn.dataset.action;

    btn.addEventListener("click", () => {
      if (val) append(val);
      if (action === "equal") calculate();
      if (action === "clear") clearAll();
      if (action === "back") back();
    });
  });
})();

✔️ ¿Qué hace este script?

Inyecta HTML + CSS + JS automáticamente.
No interfiere con tu web.
Es responsive.
Funciona en cualquier CMS (WordPress, DIVI, Blogger, HTML puro).
No requiere dependencias.

Calculadora Funcional