Back-end separation calculator

832102208 吴正坤 2023-10-22 21:45:11

Catalogue

Personal information
1. Personal Software Process (PSP) Form
2. General idea design
Interfacial design
Matters need attention
3. Target effect
4. Function overview
5. Code Description
HTML
CSS
JavaScript
HTML CODE
6. Summary

Personal information

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617378696
The Aim of This Assignment	< Back-end separation calculator>
MU STU ID and FZU STU ID	<21126917_832102208>
The Link of my Github	https://github.com/RobotWU1/CALCULATOR

1. Personal Software Process (PSP) Form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	60	45
• Estimate	30	15
Development	40	30
• Analysis	30	30
• Design Spec	20	20
• Design Review	15	10
• Coding Standard	10	10
• Design	120	100
• Coding	180	150
• Code Review	45	60
• Test	45	20
Reporting	120	100
• Test Repor	60	40
• Size Measurement	20	10
• Postmortem & Process Improvement Plan	100	20
Sum	895	660

2. General idea design

Overall, the combination of HTML and JavaScript makes the interface and functionality of this calculator possible. HTML provides the structure of the calculator and the location of the various parts, while JavaScript provides the functions of the calculator, such as the input of numbers, the processing of operators, and the calculation of results. And I used PHP as the back end and xampp to write the back end and database,ajax on the front and back end for requests and data transfer.

Interfacial design

This is a basic graphical user interface (GUI) calculator that consists of a title bar and a result display bar, as well as a button area containing numbers , Historical results store and operator buttons.
The button area is at the bottom of the page and contains number buttons, operator buttons, and function buttons (such as AC, +/-, delete, etc.).

Matters need attention

My calculator supports four basic operations, as well as some scientific algorithms, such as trigonometry, radical, redundant, logarithm, etc. There is also a back-end database that supports querying the most recent computation history.

3. Target effect

##Basic Function

##Advanced Function

##ANS Function & Database

4. Function overview

This is a basic four-digit calculator with addition, subtraction, multiplication, division, and modulo operations.
In the button area, by clicking the corresponding number or operator button, you can add or perform the corresponding action in the result display bar. For example, clicking the number button "7" will add "7" to the results display bar, and clicking the operator button "+" will add "+".
Clicking the "=" button will perform the calculation, that is, according to the content in the result display bar, and display the result in the result display bar.
The "AC" button is used to clear the result display bar, the "+/-" button is used to switch the signs in the result display bar, and the "Delete" button is used to delete the last character in the result display bar.
The JavaScript scripting language is used to implement these interactive functions.

In addition, it also includes some scientific algorithms, such as trigonometry, radical sign, complement, logarithm and so on. There is also a back-end database written in PHP that allows you to query recent computation history.

5. Code Description

HTML

The entire page consists of an HTML document, including a head and a body.
In the header, you define the meta information of the page, such as the character set, viewport Settings, and page title.
In the body, the main content of the page is defined, including a top title bar (top), a result bar (result), and a button area (button).

CSS

Use CSS styles to set the look and layout of the top title bar, results display bar, and button area.
Style the elements (points, numbers, and operators) in the top title bar.
The background color, border and font size of the result display bar are set.
The background color, floating layout and font size of the button area are set.

JavaScript

The JavaScript code is embedded in the header of the HTML page and is contained via the < script> tag.
Several functions are defined to handle user interactions, such as entering numbers (num), input operators (oper), calculating results (yunsuan), deleting the last number (doback), and emptying results (qingkong).
When the user clicks the button, the corresponding JavaScript function is triggered to implement the corresponding function.
Use the eval function to evaluate the result of an expression in the result display bar.

##MySQL

MySQL is the most popular Relational Database Management System, and it is one of the best Relational Database Management System application software in WEB applications.

HTML CODE

// html part:Specifically divided into html,css and js three parts
 
<body>
    <div id="calculator">
        <div id="input">
            <input type="text" id="Screen" name="Screen" class="screen" value="" readonly>
        </div>
        <div class="history_list">
            <div id="tip">History record</div>
            <div id="hist1"></div>
            <div id="hist2"></div>
            <div id="hist3"></div>
            <div id="hist4"></div>
            <div id="hist5"></div>
            <div id="hist6"></div>
            <div id="hist7"></div>
            <div id="hist8"></div>
            <div id="hist9"></div>
            <div id="hist10"></div>
        </div>
        <div id="keys">
            <input type="button" id="square" onclick="square()" value="x^2" />
            <input type="button" id="cube" onclick="cube()" value="x^3" />
            <input type="button" id="^" onclick="cal(this.id)" value="^" />
            <input type="button" id="H" onclick="History()" value="ANS" />
 
            <input type="button" id="sin" onclick="sin()" value="sin" />
            <input type="button" id="cos" onclick="cos()" value="cos" />
            <input type="button" id="tan" onclick="tan()" value="tan" />
            <input type="button" id="log" onclick="log()" value="log" />
 
            <input type="button" id="sqrt" onclick="sqrt()" value="√" />
            <input type="button" id="cbrt" onclick="cbrt()" value="³√" />
            <input type="button" id="Back" onclick="back()" value="Back" />
            <input type="button" id="C" onclick="clearNum()" value="CE" />
 
            <input type="button" id="7" onclick="cal(this.id)" value="7" />
            <input type="button" id="8" onclick="cal(this.id)" value="8" />
            <input type="button" id="9" onclick="cal(this.id)" value="9" />
            <input type="button" id="/" onclick="cal(this.id)" value="/" />
 
            <input type="button" id="4" onclick="cal(this.id)" value="4" />
            <input type="button" id="5" onclick="cal(this.id)" value="5" />
            <input type="button" id="6" onclick="cal(this.id)" value="6" />
            <input type="button" id="*" onclick="cal(this.id)" value="*" />
 
            <input type="button" id="1" onclick="cal(this.id)" value="1" />
            <input type="button" id="2" onclick="cal(this.id)" value="2" />
            <input type="button" id="3" onclick="cal(this.id)" value="3" />
            <input type="button" id="-" onclick="cal(this.id)" value="-" />
 
            <input type="button" id="." onclick="cal(this.id)" value="." />
            <input type="button" id="0" onclick="cal(this.id)" value="0" />
            <input type="button" id="=" onclick="equal()" value="=" />
            <input type="button" id="+" onclick="cal(this.id)" value="+" />
        </div>  
        
    </div>
</body>

##CSS

<style>
    div:last-of-type{
            width: 0px;
            height: 70px;
             background: linear-gradient(rgb(0, 174, 255),yellow);    
            text-align: center;
            line-height: 1px;
            
        }

#calculator {
    background-color: #eeeeee;
    border: 1px solid gray;
    margin: 30px auto;
    width: 680px;
    height: 700px;
    padding: 30px;
    border-radius:5%;
    border: none;
}
 
.screen {
    width: 658px;
    height: 80px;
    background-color: #eafdf4;
    box-shadow: 4px 6px 6px rgb(181, 187, 181) inset;
    border-radius: 8px;
    text-align: right;
    padding-right: 20px;
    font-size: 40px;
    margin-top: 10px;
    border: none;
    outline: 2px solid rgb(136, 127, 127);
    transition: all .1s;
    
}
 
.screen:hover,.screen:focus{
    outline: 2px solid rgb(236, 6, 6);
}

.history_list {
    background-color:linear-gradient(rgb(0, 174, 255),yellow);
    margin-top: 53px;
    float: right;
    width: 190px;
    height: 555px;
    left: 462px;
    top: -509px;
    outline: 2px solid rgb(24, 23, 23);
    
}

.history_list div {
    height: 45px;
    text-align: center;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#tip {
    text-align: center;
    border: solid 1px rgb(173, 173, 173);
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px solid rgb(24, 23, 23);
}

#keys {
    height: 550px;
    margin-top: 50px;
    width: 480px;
    border-radius:2%;
    border: none;

}
 
input[type="button"] {
    float: left;
    width: 120px;
    height: 80px;
    text-align: center;
    font-size: xx-large;
    background-color: #a6acb86c;
    cursor: pointer;
    border-radius:50%;
    border: none;
}


input[type="button"]:hover{
    background-color: #a6acb8;
}

input[type="button2"] {
    float: left;
    width: 141px;
    height: 52px;
    text-align: center;
    font-size: xx-large;
    background-color: #a6acb86c;
    cursor: pointer;
    border-radius:50%;
    border: none;
}
 
input[type="button2"]:hover{
    background-color: #a6acb8;
}

</style>

##JS

// js part
 
<script>
 
function cal(num) {
    var n = document.getElementById(num)
    if (n === null) return
    document.getElementById("Screen").value += n.value;
}
 
var flag = true;
var flagh = true;
var h = "";
var res = "";
 
function History() {
var Ans = h;
var result = res;
var contentAsString = String(Ans.textContent);
result.innerHTML = Ans.innerHTML;
var xhr = new XMLHttpRequest();
 
// Configure the request, using the GET request mode, the requested URL is the path of the back-end PHP file
xhr.open("GET", "backend.php", true);
//Send request
xhr.send();
// Set the callback function to handle the response
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // If the request completes successfully, the JSON data returned by the back end is processed
        var response = JSON.parse(xhr.responseText);
 
        for (var i = 0; i < response.length; i++) {
            var recordId = "hist" + (i + 1);
            var recordDiv = document.getElementById(recordId);
            recordDiv.innerHTML = response[i];
        }
    }
}
}
 
 
function equal() {
    var value = document.getElementById("Screen").value
    if (value.indexOf('^') != -1) {
        value = this.pow(value, value.indexOf('^'))
    }
    // Click '=' to switch fractions/decimals
    h =  document.getElementById("Screen").value;
    if (!flag) {
        document.getElementById("Screen").value = this.decimalToFractional(eval(value))
        flag = true
    } else {
        document.getElementById("Screen").value = eval(value)
        flag = false
    }
    res = eval(value);
    h = h+"="+eval(value)
    save();
}
function save() {
    var str1 = h;
    var str2 = res;
    var xhr = new XMLHttpRequest();
    var url = `history.php?h=${str1}&res=${str2}`;
    xhr.open('get', url, true)
    xhr.send()
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            console.log(xhr.response);
            }
        }
    }
}
 
function back() {
    var n = document.getElementById("Screen");
    n.value = n.value.substring(0, n.value.length - 1);
}
 
function clearNum() {
    document.getElementById("Screen").value = "";
    for (var i = 0; i < 10; i++) {
        var hist = "hist" + (i + 1);
        var hist_clear = document.getElementById(hist);
        hist_clear.innerHTML = "";
    }
    
}
 
function sin() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.sin(document.getElementById("Screen").value);
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "sin("+h+")="+text
    save();
}
function cos() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.cos(document.getElementById("Screen").value);
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "cos("+h+")="+text
    save();
}
function tan() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.tan(document.getElementById("Screen").value);
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "tan("+h+")="+text
    save();
}
function log() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.log(document.getElementById("Screen").value);
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "log("+h+")="+text
    save();
}
function sqrt() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.sqrt(document.getElementById("Screen").value);
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "sqrt("+h+")="+text
    save();
}
function cbrt() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.cbrt(document.getElementById("Screen").value)
    var text =document.getElementById("Screen").value.substring(0,6);
    h = "cbrt("+h+")="+text
    save();
}
function square() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 2);
    h = "square("+h+")="+document.getElementById("Screen").value
    save();
}
function cube() {
    h=document.getElementById("Screen").value
    document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 3);
    h = "cube("+h+")="+document.getElementById("Screen").value
    save();
}
function pow(value, pos) {
    h = value+"^"+pos;
    if (pos != -1) {
        let arr = value.split("")
        let powVal = Math.pow(arr[pos - 1], arr[pos + 1])
        arr.splice(pos - 1, 3, powVal)
        value = arr.join("")
        return value
    }
    h = h+"="+value;
    save();
}
 
 
function factorial() {
    function func(num) {
        if (num == 1) {
            console.log(1);
            return 1;
        } else if (num == 0) {
            console.log(0);
            return 1;
        } else {
            return num * func(num - 1)
        }
    }
    document.getElementById("Screen").value = func(document.getElementById("Screen").value)
}
 
// fractional
function decimalToFractional(decimal) {
    if (decimal % 1 === 0) {
        return decimal
    }
    const formatDecimal = decimal.toFixed(2)
    let denominator = 100
    let numerator = formatDecimal * 100
    let bigger = 0
    function recursion() {
        bigger = denominator > numerator ? denominator : numerator
        for (let i = bigger; i > 1; i--) {
            if (
                Number.isInteger(numerator / i) && Number.isInteger(denominator / i)) {
                numerator = numerator / i
                denominator = denominator / i
                recursion()
            }
        }
    }
    recursion()
    return `${numerator} / ${denominator}`
}
</script>

##Backend.PHP

<?php
 
// Create a connection
$con = mysqli_connect('localhost','root','','history_list');
 
if($con)
    {
        //Set encoding format
        mysqli_query($con,'set names utf8');
 
        $sql = "select expression from history_table order by no desc limit 10";
 
        $result = $con->query($sql);
 
        // Converts the query results to an array
        $data = [];
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $data[] = $row['expression'];
            }
        }
        
        // Close database connection
        $con->close();
        
        // The data is returned to the front-end in JSON format
        echo json_encode($data);
    }
    else
    {
        echo '连接数据库失败';
    }
?>

##History.PHP

<?php
 
    $expression=$_GET['h'];
    $res=$_GET['res'];
 
    echo "$expression";
    $con = mysqli_connect('localhost','root','','history_list');
 
    if($con)
    {
        //Set encoding format
        mysqli_query($con,'set names utf8');
 
        $sql = "insert into history_table(expression,result) values('$expression','$res')";
 
        $result=mysqli_query($con,$sql);
 
   
 
    }
    else
    {
        echo '连接数据库失败';
    }
 
?>

6. Summary

In summary, the code represents a basic HTML page that implements the functions of a simple calculator with CSS styles and JavaScript functions. In addition, the link with the back-end database based on PHP completes certain storage functions.
Through this assignment, I learned to use HTML,CSS and JS to make a web calculator. Perfect their own code ideas and syntax.I have a deeper understanding of the front and back end interaction, and the code normalization is poor because I start from 0, which also enables me to find new problems and solve them, and my ability has been improved to a certain extent.

...全文