Assignment 1: Front-End and Back-End Separation Calculator System

Repositories

• Frontend: https://github.com/Wzy13850918263/24127167_calculator_frontend
• Backend: https://github.com/Wzy13850918263/24127167_calculator_backend

1. PSP Table

2. Requirements Analysis

This assignment requires a strictly separated front-end / back-end calculator. All computation must run on the backend; the frontend only collects the expression and sends it via HTTP POST. History must persist in a backend database (no localStorage). Must support operator precedence, parentheses, decimals, unary minus. No eval/exec. Two independent GitHub repos, each with README.md and codestyle.md. Support deleting history by id.

Tech stack: Python + FastAPI, SQLite, plain HTML/CSS/JS, hand-written Reverse Polish Notation.

3. System Design

Browser (index.html)
   │ HTTP/JSON
   ▼
FastAPI (main.py)
   ├── Expression parser (tokenize → infix-to-postfix → evaluate)
   ├── History module (SQLAlchemy ORM)
   ▼
SQLite (calculator.db)

4. Feature Demonstration

Main Interface

Basic Arithmetic (12+8=20)

Decimal (2.5*4=10)

Parentheses ((1+2)*3=9)

Unary Minus (3*-2=-6)

Division by Zero

Invalid Expression

History List

Refresh Keeps History

Delete Record

5. Key Code

Frontend: submit expression

async function submitCalc(){
    const resp = await fetch(BACKEND_URL + "/api/calculate", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({expression: inputDom.value.trim()})
    });
    const data = await resp.json();
    resultDom.innerText = data.success ? "Result = " + data.result : "Error: " + data.message;
    loadHistory();
}

Backend: calculate API

@app.post("/api/calculate")
def calc(req: CalcRequest):
    db = SessionLocal()
    try:
        res = calculate_expression(req.expression)
        record = CalcHistory(expression=req.expression, result=res)
        db.add(record); db.commit()
        return {"success": True, "expression": req.expression, "result": res}
    except ZeroDivisionError:
        return {"success": False, "message": "Division by zero"}
    except Exception as e:
        return {"success": False, "message": "Invalid expression: " + str(e)}
    finally:
        db.close()

Unary minus tokenization

if c == "-":
    if i == 0 or expr[i-1] in "(+-*/":
        tokens.append("u-")   # unary minus
    else:
        tokens.append(c)      # binary subtraction

6. Summary

1. CORS: opened index.html via file:// blocked fetch; fixed with CORSMiddleware.
2. Unary minus was the hardest part — 3*-2 and leading -5 needed a separate u- token with highest precedence.
3. All errors caught at the API layer to avoid 500s.
4. History verified by refreshing and restarting the backend.
5. Key takeaway: frontend is dumb (display + request), backend is the brain (compute + store).