Free Calculator for Put on My Website

Calculator Code

Copy and paste this code into your website's HTML where you want the calculator to appear.

<div class="simple-calculator">
    <h2>Simple Calculator</h2>
    <form id="calculator-form">
        <label for="num1">First Number:</label>
        <input type="number" id="num1" name="num1" required>

        <label for="operation">Operation:</label>
        <select id="operation" name="operation" required>
            <option value="add">Addition (+)</option>
            <option value="subtract">Subtraction (-)</option>
            <option value="multiply">Multiplication (×)</option>
            <option value="divide">Division (÷)</option>
        </select>

        <label for="num2">Second Number:</label>
        <input type="number" id="num2" name="num2" required>

        <button type="button" id="calculate-btn">Calculate</button>
        <button type="reset" id="reset-btn">Reset</button>
    </form>

    <div id="result" class="result-panel">
        <h3>Result</h3>
        <p id="result-value">0</p>
    </div>
</div>

<style>
.simple-calculator {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.simple-calculator h2 {
    font-size: 1.2rem;
    color: #111827;
    margin: 0 0 16px 0;
}

.simple-calculator label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #374151;
}

.simple-calculator input, .simple-calculator select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.simple-calculator button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-right: 8px;
}

#calculate-btn {
    background-color: #2563eb;
    color: white;
}

#reset-btn {
    background-color: #f1f5f9;
    color: #374151;
}

.result-panel {
    margin-top: 20px;
    padding: 16px;
    background-color: #f1f5f9;
    border-radius: 6px;
}

.result-panel h3 {
    font-size: 1rem;
    color: #111827;
    margin: 0 0 8px 0;
}

#result-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #059669;
    margin: 8px 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('calculator-form');
    const calculateBtn = document.getElementById('calculate-btn');
    const resetBtn = document.getElementById('reset-btn');
    const resultValue = document.getElementById('result-value');

    calculateBtn.addEventListener('click', function() {
        const num1 = parseFloat(document.getElementById('num1').value);
        const num2 = parseFloat(document.getElementById('num2').value);
        const operation = document.getElementById('operation').value;
        let result;

        if (isNaN(num1) || isNaN(num2)) {
            alert('Please enter valid numbers');
            return;
        }

        switch(operation) {
            case 'add':
                result = num1 + num2;
                break;
            case 'subtract':
                result = num1 - num2;
                break;
            case 'multiply':
                result = num1 * num2;
                break;
            case 'divide':
                if (num2 === 0) {
                    alert('Cannot divide by zero');
                    return;
                }
                result = num1 / num2;
                break;
            default:
                result = 0;
        }

        resultValue.textContent = result.toFixed(2);
    });

    resetBtn.addEventListener('click', function() {
        resultValue.textContent = '0';
    });
});
</script>