A Calculator For Advanced Requirements

832101322 姚树桐

已于 2023-10-07 21:35:54 修改

阅读量69

点赞数

文章标签：前端 javascript css

于 2023-10-07 21:10:55 首次发布

本文链接：https://blog.csdn.net/yst44/article/details/133651038

版权

Overall introduction

In terms of this blog,

1.Create a calculator with a visual interface.

2.Record necessary work content and process.

Link to the finished project code：832101322yaoshutong/calculator-EE308: Create a calculator with a visual interface. (github.com)

Program Requirements

Basic requirement: Implement addition, subtraction, multiplication, division, and clear functions.

Advanced requirement: Implement functionality for exponentiation, trigonometric functions, and more.

The Link Your 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

21124973_832101322姚树桐

catalogue

A Calculator For Advanced Requirements
Overall introduction
Program Requirements
I. PSP form for this work
II. Problem-solving ideas for designation
III. Code description
IV. Display
V. Summary
I. PSP form for this work

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

II. Problem-solving ideas for designation

Take program requirements into consideration and develop as fast as possible, here select web language.

necessary for input values including numbers and operations as well as functions to be advanced (HTML)
handle with click events or keyboard pressed (JavaScript)
display as a simple and clean interface (CSS)
III. Code description

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .calculator {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 0 auto;
        }

        .calculator input {
            width: 100%;
            margin-bottom: 5px;
        }

        .calculator .row {
            display: flex;
            justify-content: space-between;
        }

        .calculator .row .button {
            width: 48%;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="row">
            <button class="button" onclick="clearResult()">C</button>
            <button class="button" onclick="deleteLastChar()">&larr;</button>
        </div>
        <div class="row">
            <button class="button" onclick="appendChar('7')">7</button>
            <button class="button" onclick="appendChar('8')">8</button>
            <button class="button" onclick="appendChar('9')">9</button>
            <button class="button" onclick="appendChar('/')">/</button>
        </div>
        <div class="row">
            <button class="button" onclick="appendChar('4')">4</button>
            <button class="button" onclick="appendChar('5')">5</button>
            <button class="button" onclick="appendChar('6')">6</button>
            <button class="button" onclick="appendChar('*')">*</button>
        </div>
        <div class="row">
            <button class="button" onclick="appendChar('1')">1</button>
            <button class="button" onclick="appendChar('2')">2</button>
            <button class="button" onclick="appendChar('3')">3</button>
            <button class="button" onclick="appendChar('-')">-</button>
        </div>
        <div class="row">
            <button class="button" onclick="appendChar('0')">0</button>
            <button class="button" onclick="appendChar('.')">.</button>
            <button class="button" onclick="calculate()">=</button>
            <button class="button" onclick="appendChar('+')">+</button>
        </div>
        <div class="row">
            <button class="button" onclick="appendChar('Math.pow(')">^</button>
            <button class="button" onclick="appendChar('Math.sin(')">sin</button>
            <button class="button" onclick="appendChar('Math.cos(')">cos</button>
            <button class="button" onclick="appendChar('Math.tan(')">tan</button>
        </div>
    </div>

    <script>
        function appendChar(char) {
            document.getElementById('result').value += char;
        }

        function clearResult() {
            document.getElementById('result').value = '';
        }

        function deleteLastChar() {
            var result = document.getElementById('result').value;
            document.getElementById('result').value = result.slice(0, -1);
        }

        function calculate() {
            var result = document.getElementById('result').value;
            try {
                var calculatedResult = eval(result);
                document.getElementById('result').value = calculatedResult;
            } catch (error) {
                alert('Invalid expression');
            }
        }
    </script>
</body>
</html>

This is an HTML code for a simple calculator. It consists of a text input field to display the result and several buttons for inputting numbers and operators.

The CSS styles define the appearance of the calculator, including the font, size, and layout. The calculator is centered on the page and has a border and padding.

The JavaScript functions are used to handle the button clicks. The "clearResult()" function clears the result field, the "deleteLastChar()" function deletes the last character from the result field, and the "appendChar()" function appends a character to the result field.

The buttons are organized into rows using flexbox, with each button having a width of 48%. The buttons have an onclick attribute that calls the corresponding JavaScript function with the appropriate argument.

IV. Display

20231007_204523

I enter the content by clicking on different buttons, and will calculate it by entering the equal sign

V. Summary

After getting this task, I searched many ways to realize visualization on the internet, and finally chose visual studio code based on aesthetic and linguistic considerations. Completing this assignment was a valuable experience that gave me an in-depth understanding of all aspects. Through the design process, I gained a deep appreciation for the art and challenges of programming. The design of this calculator not only improved my programming skills, but also taught me how to translate abstract concepts into practical applications. In the process, I also encountered many problems, especially program testing and packaging. Because I haven't had similar experience before, I looked up a lot of information on the Internet and tried and tried, which is very helpful for me to understand and comprehend software engineering. Improve problem-solving and coding skills.