• A calculator UI on your WordPress site (HTML + CSS + JS)

• Store calculation history or data in a SQL database (MySQL, which WordPress uses)

• Ability to run calculations with data stored/retrieved from the database

Step 1: Calculator Frontend

(HTML + CSS + JS)

You can embed this code into a WordPress page using the Custom HTML block or a child theme template.

<!– Calculator HTML –>
<div id=”calculator”>
<input type=”text” id=”display” disabled />
<br/>
<button onclick=”appendNumber(‘1’)”>1</button>
<button onclick=”appendNumber(‘2’)”>2</button>
<button onclick=”appendNumber(‘3’)”>3</button>
<button onclick=”setOperation(‘+’)”>+</button>
<br/>
<button onclick=”appendNumber(‘4’)”>4</button>
<button onclick=”appendNumber(‘5’)”>5</button>
<button onclick=”appendNumber(‘6’)”>6</button>
<button onclick=”setOperation(‘-‘)”>-</button>
<br/>
<button onclick=”appendNumber(‘7’)”>7</button>
<button onclick=”appendNumber(‘8’)”>8</button>
<button onclick=”appendNumber(‘9’)”>9</button>
<button onclick=”setOperation(‘*’)”>*</button>
<br/>
<button onclick=”clearDisplay()”>C</button>
<button onclick=”appendNumber(‘0’)”>0</button>
<button onclick=”calculate()”>=</button>
<button onclick=”setOperation(‘/’)”>/</button>
</div>

<!– Basic CSS –>
<style>
#calculator {
width: 160px;
}
#display {
width: 150px;
height: 30px;
font-size: 18px;
text-align: right;
margin-bottom: 5px;
}
button {
width: 35px;
height: 35px;
margin: 2px;
font-size: 18px;
}
</style>

<!– JavaScript for calculator logic –>
<script>
let currentInput = ”;
let operation = null;
let previousInput = ”;

function appendNumber(num) {
currentInput += num;
updateDisplay();
}

function setOperation(op) {
if (currentInput === ”) return;
if (previousInput !== ”) {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = ”;
}

function calculate() {
if (operation === null || currentInput === ” || previousInput === ”) return;
let a = parseFloat(previousInput);
let b = parseFloat(currentInput);
let result = 0;

switch(operation) {
case ‘+’: result = a + b; break;
case ‘-‘: result = a – b; break;
case ‘*’: result = a * b; break;
case ‘/’:
if (b === 0) {
alert(‘Cannot divide by zero’);
clearDisplay();
return;
}
result = a / b;
break;
}

currentInput = result.toString();
operation = null;
previousInput = ”;
updateDisplay();

// TODO: send calculation and result to server (database)
}

function clearDisplay() {
currentInput = ”;
previousInput = ”;
operation = null;
updateDisplay();
}

function updateDisplay() {
document.getElementById(‘display’).value = currentInput;
}
</script>

Step 2: Connect Calculator to SQL Database in WordPress

How?

• WordPress uses MySQL.

• To save calculations, you need a PHP script that accepts data via AJAX and inserts into the database.

• You can create a custom WordPress plugin or add code to your theme’s functions.php file.

• Use WordPress’s $wpdb class for database operations safely.

Example PHP code snippet to save calculations (put in functions.php):

Summary