PythonのバックエンドとFlaskマイクロフレームワークを使ったHTMLのフロントエンドを持つ基本的な電卓の例です：

バックエンドのコード (app.py)：
```py
from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/calculate', methods=['POST'])
def calculate():
    num1 = int(request.form['num1'])
    num2 = int(request.form['num2'])
    operation = request.form['operation']

    if operation == 'addition':
        result = num1 + num2
    elif operation == 'subtraction':
        result = num1 - num2
    elif operation == 'multiplication':
        result = num1 * num2
    elif operation == 'division':
        result = num1 / num2

    return jsonify({'result': result})

if __name__ == '__main__':
    app.run(debug=True)
```

フロントエンドのコード (index.html)：


```html
<!DOCTYPE html>
<html>
<head>
	<title>Basic Calculator</title>
</head>
<body>
	<h1>Basic Calculator</h1>
	<form id="calculator-form">
		<label for="num1">Number 1:</label>
		<input type="text" name="num1" id="num1"><br>

		<label for="num2">Number 2:</label>
		<input type="text" name="num2" id="num2"><br>

		<label for="operation">Operation:</label>
		<select name="operation" id="operation">
			<option value="addition">Addition</option>
			<option value="subtraction">Subtraction</option>
			<option value="multiplication">Multiplication</option>
			<option value="division">Division</option>
		</select><br>

		<button type="submit">Calculate</button>
	</form>

	<div id="result"></div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$('#calculator-form').submit(function(event) {
				event.preventDefault();
				$.ajax({
					type: 'POST',
					url: '/calculate',
					data: $('#calculator-form').serialize(),
					success: function(response) {
						$('#result').text('Result: ' + response.result);
					},
					error: function() {
						alert('Error calculating result.');
					}
				});
			});
		});
	</script>
</body>
</html>
```

このコードでは、ユーザが2つの数字を入力して操作を選択できるフォームを持つシンプルなウェブページを作成します。フォームが送信されると、データはAJAXリクエストを介してFlaskバックエンドに送信され、そこで選択された操作が2つの数字に対して実行され、結果がJSONオブジェクトとして返されます。その結果がウェブページに表示されます。

これは基本的な例であり、機能やエラー処理を追加することで拡張できることに注意してください。
Sure, here's an example of a basic calculator with a Python backend and an HTML front-end using Flask microframework:

Backend code (app.py):
```py
from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/calculate', methods=['POST'])
def calculate():
    num1 = int(request.form['num1'])
    num2 = int(request.form['num2'])
    operation = request.form['operation']

    if operation == 'addition':
        result = num1 + num2
    elif operation == 'subtraction':
        result = num1 - num2
    elif operation == 'multiplication':
        result = num1 * num2
    elif operation == 'division':
        result = num1 / num2

    return jsonify({'result': result})

if __name__ == '__main__':
    app.run(debug=True)
```

Frontend code (index.html):


```html
<!DOCTYPE html>
<html>
<head>
	<title>Basic Calculator</title>
</head>
<body>
	<h1>Basic Calculator</h1>
	<form id="calculator-form">
		<label for="num1">Number 1:</label>
		<input type="text" name="num1" id="num1"><br>

		<label for="num2">Number 2:</label>
		<input type="text" name="num2" id="num2"><br>

		<label for="operation">Operation:</label>
		<select name="operation" id="operation">
			<option value="addition">Addition</option>
			<option value="subtraction">Subtraction</option>
			<option value="multiplication">Multiplication</option>
			<option value="division">Division</option>
		</select><br>

		<button type="submit">Calculate</button>
	</form>

	<div id="result"></div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$('#calculator-form').submit(function(event) {
				event.preventDefault();
				$.ajax({
					type: 'POST',
					url: '/calculate',
					data: $('#calculator-form').serialize(),
					success: function(response) {
						$('#result').text('Result: ' + response.result);
					},
					error: function() {
						alert('Error calculating result.');
					}
				});
			});
		});
	</script>
</body>
</html>
```

This code creates a simple web page with a form that allows users to input two numbers and select an operation. When the form is submitted, the data is sent to the Flask backend via an AJAX request, where the selected operation is performed on the two numbers and the result is returned as a JSON object. The result is then displayed on the web page.

Note that this is just a basic example and could be expanded upon with additional functionality and error handling.