Interest rate calculator

832102208 吴正坤 2023-11-19 23:59:49

1.Assignment description

Course for This Assignment	https://bbs.csdn.net/forums/ssynkqtd-04
Team Name	Code Crafters
Assignment Requirements	Extreme Programming
Objectives of This Assignment	Back-end Separation Calculator Programming with Login Module
Other References	...

Github's submission log and count the commit times of each group

Description of functional implementation ideas

Objective:
Implement a secure and user-friendly registration and login system.

Implementation:
Utilize industry-standard encryption for password storage.
Implement email verification for registration to enhance security.
Employ session management to keep users logged in securely.

(2) Scientific Calculator Functions

Objective:
Develop a comprehensive scientific calculator with a user-friendly interface.

Implementation:
Include standard mathematical functions like addition, subtraction, multiplication, and division.
Implement advanced functions such as exponentiation, square root, and trigonometric operations.
Provide a history feature to display and recall previous calculations.

(3)Interest Rate Calculator

Function 1: Calculate Deposit and Loan Interest

Objective: Create an interest rate calculator with dynamic backend integration.

Implementation:
Design an intuitive frontend with input boxes for deposit/loan amount and duration.
Fetch interest rates from the backend database in real-time.
Calculate and display deposit/loan interest based on user inputs.

Function 2: Modify Deposit and Loan Interest on the Frontend

Objective: Allow users to modify interest rates directly from the frontend.

Implementation:
Design a user-friendly interface for modifying deposit/loan information.
Update the backend database with the modified interest rates.
Ensure data consistency and integrity.

2.Team’s division of labor

Student Name	Student ID	Task Description	Contribution
俞宇星	832102222_21125414	UI Design	8%
陈堃	832102218_21125261	UI Design	8%
袁成睿	832102223_21126348	System Testing	8%
邹亦捷	832102210_21126909	Main Interface and Scientific Calculator	9%
温宗彦	832102228_21126895	Input Forms for Interest Rate Calculator	9%
方光贤	832102204_21125929	User Authentication and History	9%
汪郑贤	832102211_21124744	Interest Rate Calculator Logic	9%
王心怡	832101201_21124477	Back-end development	10%
吴正坤	832102208_21126917	System Testing	10%
邱韦翔	832102209_21125309	Registration and Login Pages	10%
林辰炜	832102220_21126496	Database Setup	10%

3.PSP table

吴正坤

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	5
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	190	200
• Code Review	20	20
• Test	10	10
Reporting	10	5
• Test Repor	5	10
• Size Measurement	10	5
• Postmortem & Process Improvement Plan	30	30
Sum	405	420

俞宇星

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	5	10
• Estimate	25	10
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	140	160
• Code Review	30	30
• Test	10	10
Reporting	10	5
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	405	425

邱韦翔

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	5
• Estimate	20	15
Development	10	15
• Analysis	20	35
• Design Spec	30	20
• Design Review	30	20
• Coding Standard	40	45
• Design	30	25
• Coding	160	150
• Code Review	20	20
• Test	15	10
Reporting	10	10
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	440	420

邹亦捷

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	5
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	120	150
• Code Review	20	20
• Test	10	10
Reporting	10	5
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	375	405

温宗彦

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	15	10
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	190	180
• Code Review	20	20
• Test	10	10
Reporting	20	10
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	25	25
Sum	455	440

方光贤

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	5
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	30	45
• Design	40	25
• Coding	140	150
• Code Review	15	20
• Test	10	10
Reporting	10	5
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	390	405

汪郑贤

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	30	25
• Estimate	20	15
Development	20	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	120	150
• Code Review	20	20
• Test	10	10
Reporting	10	15
• Test Repor	5	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	405	415

王心怡

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	25
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	20	20
• Coding Standard	40	45
• Design	40	35
• Coding	120	160
• Code Review	20	20
• Test	10	10
Reporting	10	15
• Test Repor	15	15
• Size Measurement	10	15
• Postmortem & Process Improvement Plan	30	30
Sum	365	475

陈堃

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	10	5
• Estimate	20	20
Development	10	10
• Analysis	40	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	50	25
• Coding	120	150
• Code Review	20	20
• Test	10	10
Reporting	20	5
• Test Repor	10	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	425	405

林辰炜

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	15	5
• Estimate	20	15
Development	10	15
• Analysis	30	35
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	40	45
• Design	30	25
• Coding	140	150
• Code Review	20	30
• Test	10	10
Reporting	10	5
• Test Repor	15	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	410	415

袁成睿

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	20	5
• Estimate	20	15
Development	10	15
• Analysis	40	35
• Design Spec	20	20
• Design Review	10	30
• Coding Standard	40	45
• Design	30	25
• Coding	120	150
• Code Review	20	20
• Test	10	10
Reporting	10	5
• Test Repor	5	10
• Size Measurement	15	10
• Postmortem & Process Improvement Plan	30	30
Sum	400	425

4.Results display

(2)Scientific computer

Page display

The four species

Basic +, -, *, /, %, () operations, in the correct order, the result is correct, and the input string and the result are stored in the back-end database.

Error report

Scientific calculation

Calculate radical sign, trigonometric function, factorial, logarithm and other additional functions.

Historical record

Use the Ans button to return the previous calculation result, and view the history to read the last ten string formulas and corresponding calculation results from the back-end database.

(3)Interest rate calculator

Page display

Function display

(4)Flow chart

7.Code presentation

register.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
   
</head>
<body>
    <h1>注册</h1>
    <form id="registerForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <input type="submit" value="注册">
    </form>
    <p id="message"></p>

    <script src="register.js"></script>
</body>
</html>

register.js

document.getElementById("registerForm").addEventListener("submit", function(event) {
    event.preventDefault();

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    fetch('http://127.0.0.1:80/register', {
        method: 'POST',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: username,
            password: password
        }),
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('message').textContent = data.message;
        if (data.success) {
            window.location.href = 'login.html';
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

(2)Basic calculator

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="calculator.css">
    <style>
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background: transparent;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }
    </style>
</head>
<body>
    <div class="calculator">
        <textarea id="display" class="no-scroll" onkeydown="check()"></textarea>
        <input type="text" id="display2" readonly >
        <div class="buttons">
            <button onclick="switchToRad()">rad</button>
            <button onclick="switchToDeg()">deg</button>
            <button onclick="appendToDisplay('(')">(</button>
            <button onclick="appendToDisplay(')')">)</button>
            <button onclick="appendToDisplay('%')">%</button>
            <button class = "ac" onclick="clearDisplay()">AC</button>
            <button onclick="delToDisplay()">del</button>
            <br>
            <button onclick="appendToDisplay('sin(')">sin</button>        
            <button onclick="appendToDisplay('cos(')">cos</button>
            <button onclick="appendToDisplay('tan(')">tan</button>
            <button class="number" onclick="appendToDisplay('7')">7</button>
            <button class="number" onclick="appendToDisplay('8')">8</button>
            <button class="number" onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('/')">÷</button>
            <br>    
            <button onclick="appendToDisplay('!')">x!</button>
            <button onclick="appendToDisplay('pi')">π</button>
            <button onclick="appendToDisplay('lg(')">lg</button>
            <button class="number" onclick="appendToDisplay('4')">4</button>
            <button class="number" onclick="appendToDisplay('5')">5</button>
            <button class="number" onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('*')">×</button>
            <br>
            <button onclick="appendToDisplay('e')">e</button>
            <button onclick="appendToDisplay('ln(')">ln</button>
            <button onclick="appendToDisplay('sqrt(')">sqrt</button>
            <button class="number" onclick="appendToDisplay('1')">1</button>
            <button class="number" onclick="appendToDisplay('2')">2</button>
            <button class="number" onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('-')">-</button>
            <br>
            <button onclick="send_clear()">exp</button>
            <button onclick="get_message()">ans</button>
            <button onclick="appendToDisplay('^')">^</button>
            <button class="number" onclick="appendToDisplay('0')">0</button>
            <button class="number" onclick="appendToDisplay('.')">.</button>
            <button class="equal" onclick="calculateResult()">=</button>
            <button onclick="appendToDisplay('+')">+</button>
        </div>
    </div>

    <div id="tax-calculator" style="display: none;">
        <h1 class="calculator-title">税率计算器</h1>
        <div class="choice_buttons">
            <button onclick="current()">活期</button>
            <button onclick="limit()">定期</button>
            <button onclick="loan()">贷款</button>
        </div>
        <div class="input-fields">
            <label for="income">金额:</label>
            <input type="rad_text" id="money"placeholder="元"onkeyup="check_money()">
            <br>
            <label for="tax-rate">时长:</label>
            <input type="rad_text" id="time" placeholder="月"onkeyup="check_time()">
            <br>
            <label for="tax-rate">利息:</label>
            <input type="rad_text" id="income" readonly >
        </div>
        <button id="calculate-tax" onclick="calculateTax()">计算税率</button>
        <div class="change_buttons">
            <button onclick="switchToDeg()">deg</button>
            <button onclick="switchToChangeRad()">修改利率</button>
        </div>
    </div>

    <div id="change-tax-calculator" style="display: none;">
        <h1 class="calculator-title">税率计算器</h1>
        <div class="choice_buttons">
            <button onclick="current()">活期</button>
            <button onclick="limit()">定期</button>
            <button onclick="loan()">贷款</button>
        </div>
        <div class="input-fields">
            <label for="income">利率:</label>
            <input type="rad_text" id="tax_rate"placeholder="厘"onkeyup="check_rate()">
            <br>
            <label for="tax-rate">时长:</label>
            <input type="rad_text" id="tax_time" placeholder="月"onkeyup="check_month()">
        </div>
        <button id="calculate-tax" onclick="changeTax()">确认修改</button>
        <div class="change_buttons">
            <button onclick="switchToDeg()">deg</button>
            <button onclick="switchToRad()">计算利率</button>
        </div>
    </div>

    <style>

        input::-webkit-input-placeholder {
            /* placeholder颜色 */
            color: #aab2bd;
            /* placeholder字体大小 */
            font-size: 16px;
        }
    </style>
    <script src="calculator.js"></script>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculator .number{
    background-color: #B0E0E6;
    transition: background-color 0.3s;
}

.calculator .number:hover {
    background-color: #87CEFA;
}

.calculator .ac{
    background-color: #FFA500;
    transition: background-color 0.3s;
}

.calculator .ac:hover {
    background-color: #FF8C00;
}

.calculator .equal {
    background-color: #9ACD32;
    transition: background-color 0.3s; /* Add a smooth transition effect */
}

.calculator .equal:hover {
    background-color: #98FB98;
}


.calculator {
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #f3f0f0;
    padding: 40px 10px 20px 10px;
    border-radius: 35px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 530px; /* 设置宽度 */
    height: 460px; /* 设置高度 */
    
}

textarea {
    width: 79%;
    font-family: MingLiUi;
    font-size: 18px; /* 设置文本字体大小 */
    background-color: #DCDCDC;
    padding: 20px 10px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    resize: none;
    scrollbar-width: 0;
    width: 420px; /* 设置宽度 */
    height: 35px;
    
    resize: none;
}

input[type="text"] {
    width: 79%;
    font-family: MingLiUi;
    font-size: 23px; /* 设置文本字体大小 */
    background-color: #DCDCDC;
    padding: 20px 10px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    width: 420px; /* 设置宽度 */
    height: 30px;
}


.buttons button {
    background-color: #FAF0E6;
    width: 50px;
    height: 50px;
    font-size: 18px;
    margin: 5px;
    border: 1px solid #F5F5DC;
    cursor: pointer;
    border-radius: 18px;
    cursor: pointer;
}

.buttons button:hover {
    background-color: #F5DEB3;
}

.choice_buttons {
    display: flex;
    flex-direction: row;
    padding-left: 50px;
    padding-right: 50px;
    
}

.choice_buttons button {
    flex: 1;
    padding: 5px 3px;
    margin-left: 10px;
    margin-right:10px;
    margin-top: 0px;
    margin-bottom: 5px;  
    background-color: #FFFAFA; /* 设置按钮的背景颜色 */
    border: none; /* 去掉按钮的边框 */
    color: #0c0b0b; 
    font-family: DFKai-SB;
    border-radius: 13px;  

}
  
.choice_buttons button:hover {
    background-color: #F5F5F5; /* 鼠标悬停时的背景颜色 */
}


.change_buttons {
    display: flex;
    flex-direction: row;
    padding-left: 40px;
    padding-right: 40px;
    
}

.change_buttons button {
    flex: 1;
    padding: 5px 3px;
    margin-left: 20px;
    margin-right:20px;
    margin-top: 25px;
    margin-bottom: 5px;  
    background-color: WhiteSmoke; /* 设置按钮的背景颜色 */
    border: none; /* 去掉按钮的边框 */
    color: #0c0b0b; 
    font-family: DFKai-SB;
    border-radius: 13px;  

}
  
.change_buttons button:hover {
    background-color: #F8F8FF; /* 鼠标悬停时的背景颜色 */
}

label {
    font-family: MingLiUi; /* 设置字体系列 */
    font-size: 17px;               /* 设置字体大小 */
    font-weight: bold;             /* 设置字体粗细 */
    color: #333;                   /* 设置字体颜色 */
}

button#calculate-tax {
    background-color: #D3D3D3;   /* 设置按钮背景颜色 */
    color: #070707;             /* 设置按钮文字颜色 */
    border: none;               /* 移除按钮边框 */
    border-radius: 13px;        /* 圆角边框 */
    padding: 10px 20px;         /* 设置内边距 */
    font-size: 16px;            /* 设置字体大小 */
    margin: 0 auto;             /* 设置左右外边距为auto以水平居中 */
    margin-top: 15px;           /* 调整按钮与上方内容的间距 */
    cursor: pointer;            /* 鼠标悬停时显示手形指针 */
    transition: background-color 0.2s; /* 添加背景颜色渐变效果 */
    display: flex;
    justify-content: center;   /* 水平居中按钮容器 */
    text-align: center;        /* 水平居中按钮文本 */
    font-family: Arial, sans-serif; /* 设置按钮内文本的字体系列 */
    font-size: 16px;               /* 设置按钮内文本的字体大小 */
    font-weight: bold;             /* 设置按钮内文本的字体粗细 */
    font-style: normal;            /* 设置按钮内文本的字体样式 */
    color: #333;                   /* 设置按钮内文本的颜色 */
    text-transform: none; 
}

.calculator-title {
    font-family: STKaiti;
    font-weight: bold; 
    font-size: 38px;
    text-align: center; /* 居中对齐文本 */
    margin-top: 20px;   /* 调整文本与上方内容的间距 */
    margin-bottom: 20px;
    color: #333;        /* 设置文本颜色 */
}

button#calculate-tax:hover {
    background-color: #aec6d5;  /* 鼠标悬停时的背景颜色 */
}

input[type="rad_text"] {
    width: 70%;
    background-color: #F5F5F5;
    padding: 10px 10px 10px;
    margin-top:10px;
    margin-bottom: 10px;
    font-size: 20px;
    border-radius: 14px;
    border: none; /* 移除边框 */
    cursor: pointer;
}

JS

document.addEventListener("keydown", function (event) {
    const key = event.key;
    if (key == "Enter") {
        calculateResult();
    } else if (key == "Escape") {
        clearDisplay();
    }
});


let expr = '';

function appendToDisplay(value) {
    check();
    expr += value;
    document.getElementById('display').value = expr;
    check();
}
    
function clearDisplay() {
    check();
    expr = '';
    document.getElementById('display').value = '';
    document.getElementById('display2').value = '';
    check();
}

function formatNumber(number) {
    if (Number.isInteger(number)) {
        return number; // 如果是整数，直接返回整数
    } else {
        return parseFloat(number.toFixed(6)); // 如果是小数，保留6位小数并返回
    }
}

function delToDisplay() {
    check();
    expr = expr.slice(0, -1);
    document.getElementById('display').value = expr;
    check();
}

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

function calculateResult() {
    check();
    try {
        expr = expr.replace(/lg/g, 'Math.log10').replace(/ln/g, 'Math.log').replace(/sqrt/g, 'Math.sqrt').replace(/sin/g, 'Math.sin').replace(/\^/g, '**').replace(/cos/g, 'Math.cos').replace(/tan/g, 'Math.tan').replace(/e/g, 'Math.E').replace(/pi/g, 'Math.PI').replace(/abs/g, 'Math.abs').replace(/(\d+)!/g, 'factorial($1)');
        expr = eval(expr);
        expr = formatNumber(expr);
        if (!/[0-9\.]/.test(String(expr))) expr = 'error';
        document.getElementById('display2').value = expr;
        check();

        expression = expr;
        result = document.getElementById('display2').value

        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:5000/post_history', true);
        xhr.setRequestHeader('Content-type', 'application/json');

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };

        const data = {
        expression: expression,
        result: result
        };

        xhr.send(JSON.stringify(data));

    } catch (error) {
        document.getElementById('display').value = '';
        document.getElementById('display2').value = 'error';
    }
}


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

function send_clear(){
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/send_clear', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send();
}

function get_message(){
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:5000/get_calculation_data', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            Data = JSON.parse(xhr.responseText);
            array = Data['data'];
            let string="";
            for(let i=0;i<array.length;i++){
                string +=array[i][0]+" = "+array[i][1]+"\n";
            }
            document.getElementById('display').value = string;
        } else {
            console.error('获取数据出错: ' + xhr.status);
        }
      }
    };
    xhr.send();
}
let money="";
let time="";
let rate="";
let flag = 0;

function calculateTax(){
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/calculateTax', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                Data = JSON.parse(xhr.responseText);
                document.getElementById('income').value=Data["result"];
            } else {
                console.error('获取数据出错: ' + xhr.status);
            }
        }
    };

    const data = {
        time : time,
        money: money,
        category: flag
    };

    xhr.send(JSON.stringify(data));
}

function switchToRad() {
    document.querySelector(".calculator").style.display = "none";
    document.getElementById("change-tax-calculator").style.display = "none";
    document.getElementById("tax-calculator").style.display = "block";
}

function switchToDeg() {
    document.getElementById("tax-calculator").style.display = "none";
    document.getElementById("change-tax-calculator").style.display = "none";
    document.querySelector(".calculator").style.display = "block";
}

function switchToChangeRad() {
    document.getElementById("tax-calculator").style.display = "none";
    document.querySelector(".calculator").style.display = "none";
    document.getElementById("change-tax-calculator").style.display = "block";
}


function current(){
    flag = 1;
}

function limit(){
    flag = 2;
}

function loan(){
    flag = 3;
}

function check_money(){
    money = document.getElementById('money').value;
    console.log(money);
}

function check_time(){
    time = document.getElementById('time').value;
    console.log(time);
}


function check_rate(){
    rate = document.getElementById('tax_rate').value;
    console.log(rate);
}

function check_month(){
    time = document.getElementById('tax_time').value;
    console.log(time);
}

function changeTax(){
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/changeTax', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                Data = JSON.parse(xhr.responseText);
            } else {
                console.error('获取数据出错: ' + xhr.status);
            }
        }
    };

    const data = {
        time: time,
        rate: rate,
        flag: flag
    };

    xhr.send(JSON.stringify(data));
}

//module.exports = {
//    calculateResult,clearDisplay,appendToDisplay,delToDisplay
//}

Python

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    password = db.Column(db.String(), nullable=False)

@app.route('/register', methods=['POST'])
def register():
    data = request.get_json()
    username = data['username']
    password = data['password']

    if User.query.filter_by(username=username).first():
        return jsonify({'success': False, 'message': 'Username already exists'})

    user = User(username=username, password=password)
    db.session.add(user)
    db.session.commit()

    return jsonify({'success': True, 'message': 'Registered successfully'})

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data['username']
    password = data['password']

    user = User.query.filter_by(username=username, password=password).first()

    if user:
        return jsonify({'success': True, 'message': 'Login successful'})

    return jsonify({'success': False, 'message': 'Invalid username or password'})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80)

(3)Interest rate calculator

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
<h1>税率计算器</h1>
    <form>
        <input type="text" name="money" placeholder="金额">
        <input type="text" name="pwd" placeholder="密码">
        <input type="text" name="mobile" placeholder="手机号">
        <input type="submit" value="提交">
    </form>

</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculator .number{
    background-color: #B0E0E6;
    transition: background-color 0.3s;
}

.calculator .number:hover {
    background-color: #87CEFA;
}

.calculator .ac{
    background-color: #FFA500;
    transition: background-color 0.3s;
}

.calculator .ac:hover {
    background-color: #FF8C00;
}

.calculator .equal {
    background-color: #9ACD32;
    transition: background-color 0.3s; /* Add a smooth transition effect */
}

.calculator .equal:hover {
    background-color: #98FB98;
}


.calculator {
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #f3f0f0;
    padding: 40px 10px 20px 10px;
    border-radius: 35px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 530px; /* 设置宽度 */
    height: 460px; /* 设置高度 */

}

textarea {
    width: 79%;
    font-family: MingLiUi;
    font-size: 18px; /* 设置文本字体大小 */
    background-color: #DCDCDC;
    padding: 20px 10px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    resize: none;
    scrollbar-width: 0;
    width: 420px; /* 设置宽度 */
    height: 35px;

    resize: none;
}

input[type="text"] {
    width: 79%;
    font-family: MingLiUi;
    font-size: 23px; /* 设置文本字体大小 */
    background-color: #DCDCDC;
    padding: 20px 10px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    width: 420px; /* 设置宽度 */
    height: 30px;
}


.buttons button {
    background-color: #FAF0E6;
    width: 50px;
    height: 50px;
    font-size: 18px;
    margin: 5px;
    border: 1px solid #F5F5DC;
    cursor: pointer;
    border-radius: 18px;
    cursor: pointer;
}

.buttons button:hover {
    background-color: #F5DEB3;
}

.choice_buttons {
    display: flex;
    flex-direction: row;
    padding-left: 50px;
    padding-right: 50px;

}

.choice_buttons button {
    flex: 1;
    padding: 5px 3px;
    margin-left: 10px;
    margin-right:10px;
    margin-top: 0px;
    margin-bottom: 5px;
    background-color: #FFFAFA; /* 设置按钮的背景颜色 */
    border: none; /* 去掉按钮的边框 */
    color: #0c0b0b;
    font-family: DFKai-SB;
    border-radius: 13px;

}

.choice_buttons button:hover {
    background-color: #F5F5F5; /* 鼠标悬停时的背景颜色 */
}


.change_buttons {
    display: flex;
    flex-direction: row;
    padding-left: 40px;
    padding-right: 40px;

}

.change_buttons button {
    flex: 1;
    padding: 5px 3px;
    margin-left: 20px;
    margin-right:20px;
    margin-top: 25px;
    margin-bottom: 5px;
    background-color: WhiteSmoke; /* 设置按钮的背景颜色 */
    border: none; /* 去掉按钮的边框 */
    color: #0c0b0b;
    font-family: DFKai-SB;
    border-radius: 13px;

}

.change_buttons button:hover {
    background-color: #F8F8FF; /* 鼠标悬停时的背景颜色 */
}

label {
    font-family: MingLiUi; /* 设置字体系列 */
    font-size: 17px;               /* 设置字体大小 */
    font-weight: bold;             /* 设置字体粗细 */
    color: #333;                   /* 设置字体颜色 */
}

button#calculate-tax {
    background-color: #D3D3D3;   /* 设置按钮背景颜色 */
    color: #070707;             /* 设置按钮文字颜色 */
    border: none;               /* 移除按钮边框 */
    border-radius: 13px;        /* 圆角边框 */
    padding: 10px 20px;         /* 设置内边距 */
    font-size: 16px;            /* 设置字体大小 */
    margin: 0 auto;             /* 设置左右外边距为auto以水平居中 */
    margin-top: 15px;           /* 调整按钮与上方内容的间距 */
    cursor: pointer;            /* 鼠标悬停时显示手形指针 */
    transition: background-color 0.2s; /* 添加背景颜色渐变效果 */
    display: flex;
    justify-content: center;   /* 水平居中按钮容器 */
    text-align: center;        /* 水平居中按钮文本 */
    font-family: Arial, sans-serif; /* 设置按钮内文本的字体系列 */
    font-size: 16px;               /* 设置按钮内文本的字体大小 */
    font-weight: bold;             /* 设置按钮内文本的字体粗细 */
    font-style: normal;            /* 设置按钮内文本的字体样式 */
    color: #333;                   /* 设置按钮内文本的颜色 */
    text-transform: none;
}

.calculator-title {
    font-family: STKaiti;
    font-weight: bold;
    font-size: 38px;
    text-align: center; /* 居中对齐文本 */
    margin-top: 20px;   /* 调整文本与上方内容的间距 */
    margin-bottom: 20px;
    color: #333;        /* 设置文本颜色 */
}

button#calculate-tax:hover {
    background-color: #aec6d5;  /* 鼠标悬停时的背景颜色 */
}

input[type="rad_text"] {
    width: 70%;
    background-color: #F5F5F5;
    padding: 10px 10px 10px;
    margin-top:10px;
    margin-bottom: 10px;
    font-size: 20px;
    border-radius: 14px;
    border: none; /* 移除边框 */
    cursor: pointer;
}

Python

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    password = db.Column(db.String(), nullable=False)

@app.route('/register', methods=['POST'])
def register():
    data = request.get_json()
    username = data['username']
    password = data['password']

    if User.query.filter_by(username=username).first():
        return jsonify({'success': False, 'message': 'Username already exists'})

    user = User(username=username, password=password)
    db.session.add(user)
    db.session.commit()

    return jsonify({'success': True, 'message': 'Registered successfully'})

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data['username']
    password = data['password']

    user = User.query.filter_by(username=username, password=password).first()

    if user:
        return jsonify({'success': True, 'message': 'Login successful'})

    return jsonify({'success': False, 'message': 'Invalid username or password'})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80)

6.Difficulties encountered in cooperation and solutions

Communication Issues:

Problem: Misunderstandings due to lack of clear communication.
Solution: Utilize collaboration tools, such as messaging platforms and project management software, to facilitate communication. Clearly document requirements and specifications.
Mismatched Skill Levels:

Integration Issues:

表头	表头
单元格	单元格
单元格	单元格

Problem: Difficulties in integrating front-end and back-end components.
Solution: Establish clear APIs and communication protocols between front-end and back-end systems. Conduct regular integration testing to identify and resolve issues early. Use version control systems to manage changes and updates.

...全文