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.

Calculadora-fjgg

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.