<title>Simple Calculator</title> <style> body { font-family: Arial, sans-serif; text-align: center; } .calculator { width: 300px; margin: 0 auto; border: 1px solid whitesmoke; border-radius: 5px; padding: 20px; background-color: navajowhite; } .calculator input[type="button"] { width: 60px; height: 40px; margin: 5px; font-size: 18px; cursor: pointer; } .calculator input[type="text"] { width: 100%; height: 40px; margin-bottom: 10px; font-size: 18px; text-align: right; padding-right: 10px; } </style>

<script>
    function addToDisplay(value) {
        document.getElementById('display').value += value;
    }

    function clearDisplay() {
        document.getElementById('display').value = '';
    }

    function calculate() {
        let expression = document.getElementById('display').value;
        let result = eval(expression); // Using eval for simplicity (not recommended for production due to security risks)
        document.getElementById('display').value = result;
    }
</script>