Software Engineering Project --WebCalculator-CSDN博客

本文链接：https://blog.csdn.net/zyj6665666/article/details/133634517

Software Engineering Project --WebCalculator

Project introduction
Work Procedure
Results display
Summary

Project introduction

Creating a web calculator involves several steps, including designing the user interface, implementing calculation logic, and processing user input.This is a software engineering project. Here is some information about the project.

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Create a calculator with a visual interface
MU STU ID and FZU STU ID	21126909_832102210

In addition to this, I also uploaded my own code on GitHub, here is the link : https://github.com/westflog/calculator.git

Work Procedure

PSP

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	30	40
• Estimate	30	40
Development	550	550
• Analysis	40	30
• Design Specification	50	30
• Design Review	20	10
• Coding Standard	15	20
• Design	180	140
• Coding	200	240
• Code Review	30	20
• Test	15	10
Reporting	150	110
• Test Report	60	60
• Size Measurement	30	20
• Postmortem & Process Improvement Plan	60	30
Sum	730	700

Problem-solving ideas

When I got to know the project, I knew I had to learn something about visualization and some of the code that made up the calculator.So I learn and use Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), Java Script (JS) to bulid the calculator.In addition, I also need to look up relevant knowledge on the Internet to complete this task.Finally, our calculator can be presented in a web page.

Code

Since there are three different languages, I’ll show them in three pieces of code.
HTML PART:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="con clear">
        <input type="text" id="input" value="0" disabled>
         <div class="divs" id="div1">7</div>
        <div class="divs" id="div2">8</div>
        <div class="divs" id="div3">9</div>
        <div class="divs" id="div4">-</div>
        <div class="divs" id="div5">4</div>
        <div class="divs" id="div6">5</div>
        <div class="divs" id="div7">6</div>
        <div class="divs" id="div8">+</div>
        <div class="divs" id="div9">1</div>
        <div class="divs" id="div10">2</div>
        <div class="divs" id="div11">3</div>
        <div class="divs" id="div12">*</div>
        <div class="divs" id="div13">C</div>
        <div class="divs" id="div14">0</div>
        <div class="divs" id="div15">=</div>
        <div class="divs" id="div16">/</div>
    </div>
</body>
</html>

CSS PART:

<style>
    .con {
        border: 1px solid #000000;
        width: 500px;
        height: 600px;
        text-align: center;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

   .con>div {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            box-shadow: 2px 2px 2px #CCCCCC;
            float: left;
            margin: 11px;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
            user-select: none;
        }
 
        .con>input {
            width: 90%;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            text-align: right;
            margin-top: 20px;
            margin-bottom: 20px;
            box-shadow: 3px 3px 3px #CCCCCC;
            outline: none;
            padding: 5px 10px;
            background-color: white;
            border: 1px solid #000000;
        }
 

    .clear::after {
        content: "";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
    }

    .clear {
        zoom: 1;
    }
</style>

JAVA PART:

<script>
    var input = document.getElementById("input");
    var current = "", first = "", type = "";

    for (var i = 1; i < 17; i++) {
        var div = document.getElementById("div" + i);
        div.onclick = function () {
            if (isNaN(this.innerHTML)) {
                switch (this.innerHTML) {
                    case "+":
                        type = "+";
                        first = current;
                        current = "";
                        break;
                    case "-":
                        type = "-";
                        first = current;
                        current = "";
                        break;
                    case "*":
                        type = "*";
                        first = current;
                        current = "";
                        break;
                    case "/":
                        type = "/";
                        first = current;
                        current = "";
                        break;
                    case "=":
                        if (type === "+") input.value = Number(first) + Number(current);
                        if (type === "-") input.value = first - current;
                        if (type === "*") input.value = first * current;
                        if (type === "/") input.value = first / current;
                        first = "";
                        current = "";
                        type = "";
                        break;
                    case "C":
                        input.value = "0";
                        break;
                }
            } else {
                current += this.innerHTML;
                input.value = Number(current) + "";
            }
        }
    }
</script>

A general explanation of the code

HTML section:
div class=“con clear” : This is a container div that contains the layout of the entire calculator, using the.con and.clear classes.
input type=“text” id=“input” value=“0” disabled : This is an input box used to display user input and calculation results. It is set to disabled to prevent user manual input.
Numeric buttons and operator buttons: Through a series of div elements with the class name.divs, each with a unique id, used for event handling in JavaScript.

CSS section:
Style definition: CSS is used to define the style of an element, including appearance, size, shading, and so on.

JavaScript section:
Event handling: JavaScript is used to handle button click events. Each number and operator button has a corresponding event handler that executes the corresponding logic based on the user’s click.
Computational logic: Depending on user input, computational logic includes the processing of addition, subtraction, multiplication, and division, as well as empty and equal logic.

FLowchart

Calculation process：

Results display

As we can see from the video demonstration, our calculator can perform simple addition, subtraction, multiplication and division operations.

Summary

The goal of this project is to implement a simple version of the web calculator, it needs to implement the visualization and related functions of the calculator, it uses HTML, CSS and javascript to build and beautify the web page,HTML is responsible for the network structure, CSS is responsible for the layout and beautification,JS is responsible for the behavior of the web page, programming In the course, I learned how to build and perfect my own web front end. In documenting my own code base using Github and writing my own blog documenting the development process using CSDN, I learned how to fully prepare, design, summarize, and review my own projects.But in addition, I am also constantly finding things that can be improved, such as there may be an error in the code, namely input.value=“0”; It should be placed outside the switch statement to ensure that the empty operation is not overwritten. You can move it outside of the switch statement, like this：

switch (this.innerHTML) {
    // ...
    case "=":
        // ...
        break;
    case "C":
        input.value = "0";
        break;
}

I am still improving my project, so through this project, I will also be more strict with myself in daily tasks