Interest rate calculator

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

1.Assignment description

Course for This Assignmenthttps://bbs.csdn.net/forums/ssynkqtd-04
Team NameCode Crafters
Assignment RequirementsExtreme Programming
Objectives of This AssignmentBack-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

(1)Registration and Login Module

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 NameStudent IDTask DescriptionContribution
俞宇星832102222_21125414UI Design8%
陈堃832102218_21125261UI Design8%
袁成睿832102223_21126348System Testing8%
邹亦捷832102210_21126909Main Interface and Scientific Calculator9%
温宗彦832102228_21126895Input Forms for Interest Rate Calculator9%
方光贤832102204_21125929User Authentication and History9%
汪郑贤832102211_21124744Interest Rate Calculator Logic9%
王心怡832101201_21124477Back-end development10%
吴正坤832102208_21126917System Testing10%
邱韦翔832102209_21125309Registration and Login Pages10%
林辰炜832102220_21126496Database Setup10%

3.PSP table

吴正坤

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning105
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding190200
• Code Review2020
• Test1010
Reporting105
• Test Repor510
• Size Measurement105
• Postmortem & Process Improvement Plan3030
Sum405420

俞宇星

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning510
• Estimate2510
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding140160
• Code Review3030
• Test1010
Reporting105
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum405425

邱韦翔

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning105
• Estimate2015
Development1015
• Analysis2035
• Design Spec3020
• Design Review3020
• Coding Standard4045
• Design3025
• Coding160150
• Code Review2020
• Test1510
Reporting1010
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum440420

邹亦捷

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning105
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding120150
• Code Review2020
• Test1010
Reporting105
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum375405

温宗彦

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning1510
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding190180
• Code Review2020
• Test1010
Reporting2010
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan2525
Sum455440

方光贤

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning105
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard3045
• Design4025
• Coding140150
• Code Review1520
• Test1010
Reporting105
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum390405

汪郑贤

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning3025
• Estimate2015
Development2015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding120150
• Code Review2020
• Test1010
Reporting1015
• Test Repor510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum405415

王心怡

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning1025
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review2020
• Coding Standard4045
• Design4035
• Coding120160
• Code Review2020
• Test1010
Reporting1015
• Test Repor1515
• Size Measurement1015
• Postmortem & Process Improvement Plan3030
Sum365475

陈堃

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning105
• Estimate2020
Development1010
• Analysis4035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design5025
• Coding120150
• Code Review2020
• Test1010
Reporting205
• Test Repor1010
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum425405

林辰炜

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning155
• Estimate2015
Development1015
• Analysis3035
• Design Spec2020
• Design Review1010
• Coding Standard4045
• Design3025
• Coding140150
• Code Review2030
• Test1010
Reporting105
• Test Repor1510
• Size Measurement1010
• Postmortem & Process Improvement Plan3030
Sum410415

袁成睿

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning205
• Estimate2015
Development1015
• Analysis4035
• Design Spec2020
• Design Review1030
• Coding Standard4045
• Design3025
• Coding120150
• Code Review2020
• Test1010
Reporting105
• Test Repor510
• Size Measurement1510
• Postmortem & Process Improvement Plan3030
Sum400425

4.Results display

(1)User login and registration interface

(2)Scientific computer

Page display

img

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

img

Scientific calculation

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

img

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.

img

(3)Interest rate calculator

Page display

img

Function display

img

(4)Flow chart

img

7.Code presentation

(1)User login registration

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.

...全文
37 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
Interest(ing) Calculator-开源
利息计算器在计算贷款/存款的财务参数时很有用。贷款/存款有四个变量，分别是Principal，Interest Rate，Term，Installation.IC如果您知道其他三个变量，则可以帮助计算任何一个变量。
effective-interest-rate:计算实际利息，XIRR或实际年利率
有效利率 这是一个计算实际利率的库。 有效权益也可以称为XIRR或有效APR。 这是PHP库。 您可以找到该库JavaScript版本。 例子 等额付款 如果您要提供100 000 Money的汽车贷款。 贷款为期48个月，您每月需要支付2400钱。 有效利息是多少？ 我们猜它大约在3％左右。 use Nyholm \ EffectiveInterest \ Calculator ; $ principal = 100000 ; $ payment = 2400 ; $ numberOfMonths = 48 ; $ guess = 0.03 ; $ calculator = new Calculator (); $ interest = $ calculator -> withEqualPayments ( $ principal , $ payment , $ numberOfM
VB编程资源大全（英文源码 函数）
1,Interpolation.zip
A small application for interpolation of (x,y) data such that datapoints are spaced by an interval choosen by the user. Also demonstrates the use of MS Rich TextBox 6.0 control and basic I/O of text (data) files. A detailed Word 6.0 "ReadMe" file is included.
2,calc2.zip
A very Simple Calculator, i made this to learn VB. Nothing special, though worth giving a look.
3,ComplexNumber.zip
Complex Number Calculator. Performs add, sub, mut, div, exp, roots and rect/polar conversion.
4,Ephemerix.zip
A beta version of a high precision astronomical almanac that computes solar and planetary positions to within an arc second or better over several thousands of years.
5,Gaussian.exe
Program that solves n simultaneous Equations Using the Gaussian Elimination Algorithm.
Just Input Augmented Matrix and the solution is Displayed.
6,Supercal.zip
A scientific calculator that also has a memo feature that you can set to pop up at a certain time and 2 memory banks.
7,calip.zip
A calculator application that allows the user to enter two numbers and them select the operator (^,*,+,-,/,\,mod)
8,Generator.zip
This is a Fibonacci Sequence Generator. I am 15 and this took some thinking. The code is obviously not refined. It does the job.
9,HDB.zip
64 bit Hex/Dec/Bin Converter using Assembler by Robert Rayment
10,Convertor1.zip
This is a simple Length Conversion program.
11,Recursion.zip
A VB application which demonstrates Recursion.
12,StacksQs.zip
The Stack and Queue data structures are presented in this VB application.
13,MortgageLoanApp.zip
Mortgage Calculator. Visual Basic application that allows the user to enter amount of the loan, interest rate, and term.
14,Blowfish2VB.zip
Blowfish VB - Do you use VB5/6? Are you a Crypto Guru? Then you need this little gem. This version includes the Pi table built in! Easier to implement.
15,Scientific.zip
A cool Scientific Calculator. I think I will upgrade next month. It needs some improvements so if you can help me, just mail me.
16,Matrix.zip
This is a MATRIX Project. You can Add, Sub, Multiplicate, Invert and so on. Would be nice recieving an email.
17,Blowfish2.zip
Blowfish VB - Do you use VB5/6? Are you a Crypto Guru? Then you need this little gem! ERROR FIXED, TEST VECTORS MATCH!
18,SpcBackup1.zip
A Statistical Process Control X-Bar and R Charting program. Start by setting high/low limits, then press initiate to start the program.
19,calc.zip
A simple calculator program.
20,vbconvert.zip
This program converts measure units that are commonly used in Europe and U.S.A. There are six categories which the application calculates: Temperature, Length, Area, Weight, Volume and Pressure. It also contains standard MS calculator since it can be useful in these math operations.
21,frmmain.zip
This will calculate your midterm and final grade average.
22,taxes.zip
This program computes weekly payroll, current earnings, year to date earnings FICA tax, federal Income Tax Withheld, and check Amount.
23,menucalc.zip
Menu Calculator.
24,Calculator.zip
A Simple calculator program.. It has not been tested a lot, but it works fine. I'll just leave you test it..
25,dice_vb6.zip
Same as dice_vb5 except that it has been upgraded to VB6 and includes optimization techniques.
26,dice_vb5.zip
Great little dice rolling routine.
LoanJS:计算js（browsernode.js）中的贷款是否相等，分期减少，利息总额等
贷款JS 超小（ 〜500B ）和快速模块，用于以js（browser / node.js）等额/递减分期付款，利息总和等方式计算贷款。 入门 使用以下方法安装模块： npm install loanjs 或凉亭： bower install loan-js --save 计算贷款： var LoanJS = require ( 'loanjs' ) ; var loan = new LoanJS . Loan ( 1000 , // amount 12 , // installments number 5 , // interest rate true // diminishing ) ; /** returns { installments : [ { capital : number, intere
Extreme Programming: Implementation of the THEMIS Group‘s scientific interest Rate calculator
N / A。
2301-MUSE

172

社区成员

376

社区内容

发帖
与我相关
我的任务
社区描述
梅努斯软件工程
软件工程 高校 福建省·福州市
社区管理员
  • LinQF39
  • Jcandc
  • 助教-陈锦辉
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章