Visual Calculator

832101230蔡心林

已于 2023-10-10 10:38:38 修改

阅读量44

点赞数

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

于 2023-10-09 23:21:30 首次发布

本文链接：https://blog.csdn.net/qq_61977032/article/details/133703315

版权

Introduction：

This blog will primarily focus on the design of a Wechat mini program calculator. It will cover the implementation of fundamental mathematical operations such as addition, subtraction, multiplication, division, and functions. Subsequently, I will delve into the background, the design process, and the underlying code. Finally, I 'll conclude with a presentation of the finished product.

PSP

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	Visual Calculator
MU STU ID and FZU STU ID	21125554_832101230

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	30	50
• Estimate	30	55
Development	420	510
• Analysis	20	30
• Design Spec	20	25
• Design Review	30	35
• Coding Standard	10	10
• Design	40	60
• Coding	180	200
• Code Review	60	80
• Test	60	70
Reporting	60	60
• Test Repor	20	20
• Size Measurement	20	20
• Postmortem & Process Improvement Plan	20	20
Sum	510	620

Description of problem-solving ideas

1Understanding the Requirements and Choosing the Programming Language

The first step was to carefully read and understand the project requirements. This included both basic and advanced functionality expectations for the calculator.The choice of a programming language was essential. I considered my familiarity and proficiency with programming languages.

2Breaking Down the Problem

To tackle such a multifaceted task, I decided to break down the problem into smaller, manageable components. This involved identifying the core functionalities required for a basic calculator (addition, subtraction, multiplication, division, and clearing/resetting) and advanced features (exponentiation, trigonometric functions, etc.).

3Testing and Blog Post Preparation

Finally, I prepared a comprehensive blog post that detailed my problem-solving approach, the challenges I encountered, and how I overcame them. I provided code snippets with explanations.

Design and implementation process

code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>
        
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .calculator {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f4f4f4;
        }
        .input {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 20px;
        }
        .button {
            width: 48px;
            height: 48px;
            font-size: 18px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input class="input" type="text" id="display" readonly>
        <div>
            <button class="button" onclick="appendToDisplay('1')">1</button>
            <button class="button" onclick="appendToDisplay('2')">2</button>
            <button class="button" onclick="appendToDisplay('3')">3</button>
            <button class="button" onclick="appendToDisplay('+')">+</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('4')">4</button>
            <button class="button" onclick="appendToDisplay('5')">5</button>
            <button class="button" onclick="appendToDisplay('6')">6</button>
            <button class="button" onclick="appendToDisplay('-')">-</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('7')">7</button>
            <button class="button" onclick="appendToDisplay('8')">8</button>
            <button class="button" onclick="appendToDisplay('9')">9</button>
            <button class="button" onclick="appendToDisplay('*')">*</button>
        </div>
        <div>
            <button class="button" onclick="appendToDisplay('0')">0</button>
            <button class="button" onclick="appendToDisplay('.')">.</button>
            <button class="button" onclick="clearDisplay()">C</button>
            <button class="button" onclick="appendToDisplay('/')">/</button>
        </div>
        <div>
            <button class="button" onclick="calculate()">=</button>
            <button class="button" onclick="appendToDisplay('Math.pow(', true)">^</button>
            <button class="button" onclick="appendToDisplay('Math.sqrt(', true)">√</button>
            <button class="button" onclick="appendToDisplay('Math.sin(', true)">sin</button>
            <button class="button" onclick="appendToDisplay('Math.cos(', true)">cos</button>
            <button class="button" onclick="appendToDisplay('Math.tan(', true)">tan</button>
        </div>
    </div>

    <script>
        let display = document.getElementById('display');

        function appendToDisplay(value, isFunction = false) {
            if (isFunction) {
                display.value += value + '(';
            } else {
                display.value += value.toString();
            }
        }

        function clearDisplay() {
            display.value = '';
        }

        function calculate() {
            try {
                const expression = display.value.replace(/(\d+)(\^|\*\*|\+|\-|\/)(\d+)/g, function(match, num1, operator, num2) {
                    return Math.pow(parseFloat(num1), parseFloat(num2));
                });
                const result = eval(expression);
                display.value = result;
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>
</body>
</html>

Code description

JavaScript Logic:
- The JavaScript section contains the code responsible for handling the calculator’s logic.

- `appendToDisplay` Function: This function is used to append the text from the button clicked by the user to the displayed input. It can handle regular digits and operators and can also handle special processing for advanced functions.

- `clearDisplay` Function: Used to clear the content displayed in the input field, implementing the "Clear" functionality.

- `calculate` Function: This function is responsible for calculating the user-inputted expression. It first replaces the `^` operator in the input with `Math.pow` to allow the use of JavaScript's built-in `Math.pow` function for exponentiation. Then, it uses the `eval` function to evaluate the expression's value, and the result is displayed in the input field. If an error occurs during the calculation process, it displays "Error" in the input field.

在这里插入图片描述

Assignment Summary

In the process of developing this calculator, I managed to craft a straightforward yet practical calculator application. This project has been a valuable learning experience, as it enabled me to delve into the world of user interface design, become acquainted with fundamental front-end development tools and methodologies, and sharpen my coding and problem-solving prowess. Throughout this journey, I’ve come to appreciate the significance of crafting code that is both lucid and maintainable, and I’ve fortified the stability and dependability of the calculator application through continuous code refinement, debugging, and optimization.