Calculator

最新推荐文章于 2024-10-04 00:46:18 发布

832102108

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量43

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_61284784/article/details/133745425

版权

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	21126232_832102108

link of github: BillyKulu/web-calculator (github.com)

PSP Form

Personal Software Process Stages	Estimated Time (minutes)	Actual Time (minutes)
Planning (Total)	400	600
Estimate and Preparation	400	600
Development (Total)	320	390
Analysis	30	40
Design Spec	10	20
Design Review	10	30
Coding Standard	10	10
Design	70	40
Coding	100	150
Code Review	60	70
Test	30	30
Reporting (Total)	120	100
Test Report	0	0
Size Measurement	0	0
Postmortem & Process Improvement Plan	120	100
Sum	840	1090

Problem-Solving:

We need to implement basic calculator functions. These include addition, subtraction, multiplication, division, and clearing the display. Then implement more complex functions such as exponentiation, trigonometric functions, and more. Finally Implement an event-driven system to handle user input. Create a main application window with a display. Add buttons for digits, basic operations, implement functions to handle button clicks, then display.

Design and implementation process

We will create a simple GUI using tkinter. Organize the code into functions for each calculator operation. Implement an event-driven system to handle user input.
Implementation:Create a main application window with a display. Add buttons for digits, basic operations. Implement functions to handle button clicks. Display the results in the GUI.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Web Calculator</title>
    <style>
        body {
            text-align: center;
        }
        .calculator {
            width: 300px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 5px 0px #aaa;
        }
        input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
            font-size: 18px;
        }
        button {
            width: 50px;
            height: 50px;
            font-size: 18px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>Simple Web Calculator</h2>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <br>
        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="appendToDisplay('+')">+</button>
        <br>
        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('-')">-</button>
        <br>
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('*')">*</button>
        <br>
        <button onclick="appendToDisplay('0')">0</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="calculate()">=</button>
        <button onclick="appendToDisplay('/')">/</button>
    </div>

    <script>
        function appendToDisplay(value) {
            document.getElementById("display").value += value;
        }

        function clearDisplay() {
            document.getElementById("display").value = "";
        }

        function calculate() {
            try {
                const result = eval(document.getElementById("display").value);
                document.getElementById("display").value = result;
            } catch (error) {
                document.getElementById("display").value = "Error";
            }
        }
    </script>
</body>
</html>

Result function:

Summary:

In this blog post, we've outlined the steps to create a calculator with a visual interface. We started by defining our project's requirements and specifications, discussed problem-solving ideas, and presented the code implementation for basic functionality.