832302218_BoweiZheng_Front-End and Back-End Separated Calculator System_Assignment1

Front-End and Back-End Separated Calculator System

Student ID: 832302218
Name: Bowei Zheng
FZU/MU ID: 832302218/24127264
Course: EE308FZ

Table of Contents

1. Git Repository and Code Standard Links

2. Course Information

3. PSP Table

4. Presentation of the Finished Product

5. Design and Implementation Process

6. Code Explanation

7. Personal Journey and Learnings

1. Git Repository and Code Standard Links

• Frontend Repository: GitHub - Acedir/832302218_calculator_frontend · GitHub

• Backend Repository: GitHub - Acedir/832302218_calculator_backend · GitHub

• Frontend Code Standard: https://github.com/Acedir/832302218_calculator_frontend/blob/main/codestyle.md

• Backend Code Standard: 832302218_calculator_backend/codestyle.md at main · Acedir/832302218_calculator_backend · GitHub

Deployment:

• Frontend URL: 前后端分离计算器

• Backend URL: https://Acedir.pythonanywhere.com

2. Course Information

3. PSP Table

4. Presentation of the Finished Product

All screenshots below are taken from the actual running project.

4.1 Main Interface

​

4.2 Addition

​

4.3 Subtraction

​

4.4 Multiplication

​

4.5 Division

​

4.6 Decimal Calculation

​

4.7 Compound Expression with Parentheses

​

4.8 Unary Minus

​

4.9 Percentage

​

4.10 Division by Zero

​

4.11 Invalid Expression

​

4.12 Calculation History and Persistence

​

4.13 Delete a History Record

​

5. Design and Implementation Process

5.1 Requirement Analysis

The assignment requires a calculator system using a front-end and back-end separated architecture. The frontend is only responsible for UI, input, and sending requests. The backend performs expression parsing, calculation, exception handling, and history storage. Required features include basic arithmetic, compound expressions with parentheses and unary signs, history queries, and history deletion.

5.2 System Architecture

┌──────────────────┐
│  Frontend (Web)                   │
│  HTML + CSS + JS               │
└────────┬─────────┘
                       │  HTTP / JSON
                      ▼
┌──────────────────┐
│  Backend (Flask)                   │
│  Parser / Calc                        │
│  History Module                     │
└────────┬─────────┘
                       │  SQL
                      ▼
┌──────────────────┐
│ Database (SQLite)                │
│ calculation_                           │
│ history table                          │
└──────────────────┘

5.3 Functional Structure Diagram

Calculator System
├── Calculation
│   ├── Basic Operations (+ - × ÷)
│   ├── Compound Expressions (precedence, parentheses)
│   ├── Unary Plus/Minus
│   ├── Decimals
│   ├── Percentage
│   └── Exception Handling (division by zero, invalid expression)
├── History
│   ├── Save History
│   ├── Query History
│   ├── Delete One Record
│   └── Clear All
├── Frontend
│   ├── User Input
│   ├── Result Display
│   ├── History Display
│   └── Error Message
└── Backend
    ├── API Endpoints
    ├── Expression Parser
    ├── Calculation Service
    └── Database

5.4 API Design

Success Response:

{ "success": true, "expression": "1+2", "result": 3 }

Error Response:

{ "success": false, "message": "Divisor cannot be zero" }

5.5 Database Design

Table: calculation_history

5.6 Calculation Module Design

The core is a recursive descent parser that splits expressions into four grammar levels:

expression := term (('+' | '-') term)*
term       := factor (('*' | '/') factor)*
factor     := ('+' | '-') factor | primary
primary    := NUMBER | '(' expression ')'

Precedence Handling: Multiplication/division are handled in the inner term layer, addition/subtraction in the outer expression layer, naturally achieving "multiplication/division before addition/subtraction".

Unary Signs: Handled in the factor layer.

5.7 Exception Handling

All CalcError exceptions are caught in app.py and returned with HTTP 400.

5.8 Frontend/Backend Interaction

User inputs expression
            ↓
Frontend sends POST /api/calculate
            ↓
Backend: tokenize → parse → calculate
            ↓
Success: write to DB → return {success, result, record}
Failure: return {success: false, message}
            ↓
Frontend updates result area → re-fetches GET /api/history
            ↓
Renders history list

5.9 Deployment

• Backend deployed on PythonAnywhere: git clone → create virtualenv → configure WSGI → Reload.

• Frontend deployed on Netlify Drop: drag the src folder → get a public URL.

• API_BASE is updated to the backend's public URL for cross-origin access.

6. Code Explanation

6.1 Frontend API Call (app.js)

const API_BASE = "https://acedir832302218.pythonanywhere.com";

async function doCalculate() {
    const expression = expressionInput.value.trim();
    const res = await fetch(`${API_BASE}/api/calculate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ expression }),
    });
    const data = await res.json();
    if (!data.success) {
        resultEl.textContent = "Error: " + data.message;
        return;
    }
    resultEl.textContent = "= " + data.result;
}

Explanation: The frontend only sends the expression string and does not perform any calculation. The result from the backend is displayed directly. This ensures all core logic is on the backend.

6.2 Result Retention Interaction

let justCalculated = false;

if (justCalculated && /^[0-9.]$/.test(value)) {
    // Just calculated, user pressed a digit → clear and start new input
    expressionInput.value = "";
    resultEl.textContent = "";
}

Explanation: The justCalculated flag implements "keep the expression and result after =, clear only when a new digit is entered".

6.3 Tokenization (calculator.py)

def tokenize(expr):
    tokens = []
    i = 0
    while i < len(expr):
        ch = expr[i]
        if ch.isspace():
            i += 1
            continue
        if ch in "+-*/×÷":
            op = {"×": "*", "÷": "/"}.get(ch, ch)
            tokens.append(Token(Token.OP, op))
            i += 1
            continue
        if ch == "%":
            tokens.append(Token(Token.OP, "/"))
            tokens.append(Token(Token.NUMBER, 100))
            i += 1
            continue
        # ...numbers and parentheses...
    return tokens

Explanation: × is mapped to *, ÷ to /, so the frontend can send Chinese symbols directly. % is converted to /100.

6.4 Recursive Descent Calculation

def parse_expression(self):
    left = self.parse_term()
    while self.peek() and self.peek().value in ("+", "-"):
        op = self.consume().value
        right = self.parse_term()
        left = left + right if op == "+" else left - right
    return left

Explanation: parse_expression handles addition/subtraction, parse_term handles multiplication/division. Since multiplication/division is called at a deeper layer, it is evaluated first, matching mathematical precedence.

6.5 Database Insertion

def insert_history(expression, result):
    created_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    conn = get_conn()
    cur = conn.execute(
        "INSERT INTO calculation_history (expression, result, created_at) VALUES (?, ?, ?)",
        (expression, str(result), created_at),
    )
    conn.commit()
    return {"id": cur.lastrowid, "expression": expression, "result": result, "created_at": created_at}

Explanation: Parameterized SQL (?) is used to prevent injection. The newly created record is returned for the frontend.

6.6 Delete API

@app.route("/api/history/<int:record_id>", methods=["DELETE"])
def api_history_delete(record_id):
    deleted = db.delete_history(record_id)
    if not deleted:
        return fail("Record not found", 404)
    return ok({"deleted_id": record_id}, 200)

Explanation: The deleted ID is returned so the frontend can re-query the latest history.

7. Personal Journey and Learnings

7.1 Problems and Solutions

Problem 1: I initially wanted to use Python's eval for a quick solution, but the assignment explicitly forbids it.

Solution: I learned recursive descent parsing and implemented a four-layer grammar to handle precedence. It took longer, but completely avoids code injection.

Problem 2: CORS errors when the frontend called the backend.

Solution: The backend uses flask-cors with a single CORS(app) line.

Problem 3: The SQLite database file was accidentally committed to Git.

Solution: Added .gitignore to exclude calculator.db, and used git rm --cached to remove it from version control.

Problem 4: After deployment on PythonAnywhere, python app.py reported port conflict.

Solution: PythonAnywhere uses its own Web App hosting mechanism; manual startup is not needed. Configuring the WSGI file and clicking Reload is sufficient.

7.2 What I Learned

• REST API design and HTTP status codes

• Recursive descent parsing

• Front-end/back-end separation responsibilities

• SQLite parameterized queries and injection prevention

• Git branch management and GitHub workflow

• Cloud deployment (PythonAnywhere + Netlify)

7.3 Possible Improvements

• Add a user system for independent history per user

• Add history search and pagination

• Add keyboard shortcut support

• Add rate limiting to the backend