A simple calculator created on a web page 832101122_徐抒杰

832101122徐抒杰 2023-10-06 23:00:01

Information table

Link of Class	https://bbs.csdn.net/forums/ssynkqtd-04
Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
Aim of This Assignment	Implement web version calculator
MU STU ID and FZU STU ID	21126470_832101122徐抒杰

PSP Form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	5	5
Estimate	10	15
Development	30	30
Analysis	20	20
Design Spec	20	20
Design Review	10	5
Coding Standard	5	5
Design	20	20
Coding	60	60
Code Review	15	10
Test	10	10
Reporting	5	5
Test Repor	5	5
Size Measurement	10	10
Postmortem and Process and Improvement Plan	5	5
sum	200	200

Goal and the train of thought

1.Create a web page with a calculator function

2.The functions of the calculator include basic operations such as addition, subtraction, multiplication and division, and clearing functions

Thought

HTML structure: First, create an HTML file that defines the basic structure of the calculator. In HTML, you need to include input fields to display numbers and operators, and buttons to enter numbers and operators. You can use HTML form elements, input fields (<input>), and buttons (<button>) to build user interfaces.

CSS Styling: Use CSS to beautify the calculator interface and make it look more appealing. You can define the style of the buttons, the style of the input fields, and the appearance of the entire calculator. In this step, you can add style properties such as colors, borders, rounded corners, and so on to the calculator.

JavaScript logic: Use JavaScript to implement the calculator's logic. This includes processing the user's input, performing mathematical operations, and displaying the results in the input box.

Event handling: Use JavaScript to add event handlers to perform actions when the user clicks the number and operator buttons.

Calculate the result: In JavaScript, you need to write functions that calculate the result. This can be done using JavaScript's eval() function for simple calculations.

Error handling: Consider how to handle errors that users may enter, such as dividing by zero or invalid operators.

Test and debug: Test your calculator in a browser to make sure it performs math operations correctly and displays results appropriately. Use the browser's developer tools to debug and resolve issues.

Optimizations and improvements: Once the basic calculator functions are working properly, consider adding more features, such as support for parentheses, memory functions, history, and so on. You can also optimize your code to improve performance and security.

Code

window.onload =function()
{
    let arrbtn = document.getElementById('bom-btn-id').children;
    for(let i= 0;i <arrbtn.length;i++)
        {
            arrbtn[i].onlick = function()
            {

            
                showPanel(arrbtn[i].innerHTL);
            };
        }
    };
let fhArr=["+","-","/",".","="]
function showPanel(html){
    let cur = document.getElementById("show-panel- box -id").innerHTML;
    if(fhArr.idnex0f (cur[cur.length-1])!==-1){
        if(fhArr.idnex0f (html)==-1){
            documet.getElemntById("show-panel-box-id").innerHTML= cur+html;
            documet.gentElemtById("show-ds-id").innweHTML=eval(cur+tml);
        }
    }else{
        documet.gentElemtById("show-panel-box-id").innweHTML=cur+html;
    if(fhArr.indx0f(html)!==-1){
        documet.gentElemtById("show-ds-id").innweHTML=eval(cur+html);
    }else{
        documet.gentElemtById("show-ds-id").innweHTML=eval(cur+html);
    }
 }

}
document.getElementById("show-panel-box-id").innerHTML=cur+html;console.long(html);

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

html,
body{
    margin:0px;
    width: 100%;
    height:100%;

}

.wrap{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:colum;
    background:rgba(0,0,0,0.8);
    margin:20px;
    padding:20px;
    box-sizing:border-box;

}
@media screen and (min-width:640){
    .wrap{
        width:640px;
    }
}
.show panel{
    width:100%;
    height:30%;
    background:white;
    padding:10px;
    box-sizing:yk border-box
}

.show-panel-box
{
    width:100%;
    font-size:30px;
    text-align:right;
    margin-top:10%;
    word-wrap:break-word;

}
.show-ds{
    font-size:30px;
    text-align:right;
    color:gray;
}
.btn-panel
{
    height:70%;
    width:100%;
    box-sizing:border-box;
    padding-top:10px;


}

.top-btn
{
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    height:15%;

}
.top-btn a{
    text-decoration:none;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:color;
    background:rgba(0,0,0,0.5);
    width:49.35%;
    font-size:30px;
}
.bom-btn{
    display:flex;
    flex-direction:row;
    flex-flow:wrap;
    width:100%;
    height:85%;
    justify-content:space-between;
    align-items:center;
    margin-top:1%;
}
.bom-btn a
{
    display:flex;
    width :24%;
    height:24%;
    background:rgba(0,0,0,0.5);
    color:white;
    font-size:40px;
    text-decoration:none;
    justify-content:center;
    align-items:center;
    font-weight:bold;

    



}