DEV Community

Zhao Xinhao
Zhao Xinhao

Posted on

Simple Calculator in Python

#fastapi

1.calculator.py

from fastapi import FastAPI, HTTPException
from fastapi.responses import FileResponse
from pydantic import BaseModel

class CalculationRequest(BaseModel):
    num1: float
    num2: float

app = FastAPI()

@app.post("/add")
async def add(request: CalculationRequest):
    return {"result": request.num1 + request.num2}

@app.post("/subtract")
async def subtract(request: CalculationRequest):
    return {"result": request.num1 - request.num2}

@app.post("/multiply")
async def multiply(request: CalculationRequest):
    return {"result": request.num1 * request.num2}

@app.post("/divide")
async def divide(request: CalculationRequest):
    epsilon = 1e-10
    #return{"result": request.num2-epsilon}
    if abs(request.num2) < epsilon:
        raise HTTPException(status_code=400, detail="Cannot divide by zero!")
    return {"result": request.num1 / request.num2}

@app.get("/")
def read_root():
    return FileResponse("index.html")
Enter fullscreen mode Exit fullscreen mode

2.index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator App</title>
    </head>
    <body>
        <h1>Calculator</h1>
        <input type="text" id="num1" placeholder="Enter num1">
        <input type="text" id="num2" placeholder="Enter num2">
        <div>
            <button onclick="add()">+</button>
            <button onclick="subtract()">-</button>
            <button onclick="multiply()">*</button>
            <button onclick="divide()">/</button>
        </div> 
        <div id="result"></div>

        <script>
            async function calculate(operation) {
                const num1 = document.getElementById("num1").value;
                const num2 = document.getElementById("num2").value;

                if (!num1 || !num2) {
                    document.getElementById("result").innerText = "Please enter both numbers";
                    return;
                }

                try {
                    const response = await fetch(`http://localhost:8000/${operation}`,{
                        method: "POST",
                        headers: { "Content-Type":"application/json"},
                        body: JSON.stringify({
                        num1: num1,
                        num2: num2
                    })
                });

                    const data = await response.json();

                    if(!response.ok){
                        document.getElementById("result").innerText = `Error: ${data.detail}`;
                    }else{
                        document.getElementById('result').innerHTML = `
                            <p>Result: ${data.result}</p>
                            <p>Operation: ${num1} ${getOperationSymbol(operation)} ${num2} = ${data.result}</p>
                        `;
                    }
                } catch (error) {
                    document.getElementById("result").innerText = `Network error: ${error.message}`;
                }
            }

            function getOperationSymbol(operation) {
                const symbols = {
                    'add': '+',
                    'subtract': '-',
                    'multiply': '*',
                    'divide': '/'
                };
                return symbols[operation];
            }

            function add() { calculate('add'); }
            function subtract() { calculate('subtract'); }
            function multiply() { calculate('multiply'); }
            function divide() { calculate('divide'); }
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

3.Display

Top comments (0)