Simple Web Calculator

832102215陈宇恒

已于 2023-10-07 22:26:00 修改

阅读量41

点赞数

文章标签：前端

于 2023-10-07 22:16:49 首次发布

本文链接：https://blog.csdn.net/m0_62543597/article/details/133644552

版权

I. Introduction

Using JavaScript, HTML, and CSS, the project ended up with a simple calculator with addition, subtraction, multiplication, division, trigonometry, and exponential computing capabilities.

II.Personal Information

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	Simple Web Calculator
MU STU ID and FZU STU ID	21126626_832102215

III.PSP Table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	60	45
Development
• Analysis	10	10
• Design Spec	15	8
• Design Review	20	30
• Coding Standard	40	30
• Design	20	30
• Coding	30	35
• Code Review	10	10
• Test	20	20
Reporting
• Test Repor	15	15
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	10	10
Sum	260	253

IV.Project purpose

I thought that a simple calculator should be able to perform simple continuous operations and basic trigonometric operations, so I looked for relevant programming materials on the Internet.Finally, I decided to use JavaScript, CSS, and HTML to implement the project.

V.implementation process

1.HTML Structure:

Create an HTML file and set up the basic page structure. In the section, include CSS stylesheets and necessary metadata. In the section, create the layout for your calculator. You can use HTML tables or <div> elements to organize the calculator interface。

2.CSS Styles:

Use CSS to style your calculator, including buttons, input fields, background colors, etc. CSS allows you to create an appealing user interface that enhances the user experience.

3.Buttons and Input Field:

Create button elements, where each button represents a number, operator, or a clear operation. You’ll also need an input field to display user input and calculation results.

4.JavaScript Logic:

Use JavaScript to add functionality to your calculator. This includes:

Handling button click events: Add event listeners for each button to perform the appropriate action when the user clicks.
Managing user input: Update the text in the input field based on which buttons the user clicks.
Implementing the calculation logic: When the user clicks the equal button, parse the expression in the input field and perform the calculation. Display the result in the input field.

5.Error Handling:

Consider adding error handling to ensure that the user’s input is valid, such as checking for division by zero and other error scenarios.

6.Clear and Reset:

Add a clear button that allows the user to clear the current input or reset the calculator.

7.Testing and Debugging:

Test your calculator in different browsers to ensure it works correctly in various situations.

VI.The flow chart

在这里插入图片描述

VII.Code Description

HTML

Sure, here's the HTML code with comments explaining each section:

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" /> <!-- Set the character encoding for the document to UTF-8 -->
    <title>网页版计算器</title> <!-- Set the title of the webpage -->
    <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- Link to an external CSS stylesheet -->
    <script type="text/javascript" src="js/javascript.js"></script> <!-- Include an external JavaScript file -->
</head>

<body>
    <div id="calculator"> <!-- Main container for the calculator -->

        <div id="head">
            <h3>Simple Web Calculator</h3> <!-- Heading for the calculator -->
        </div>

        <div id="show" align="center">
            <input type="text" id="text"> <!-- Input field for displaying and entering calculations -->
        </div>

        <div id="custom"> <!-- Container for calculator buttons -->

            <table align="center"> <!-- Create a table to organize the buttons -->

                <!-- First row of buttons -->
                <tr>
                    <td><input type="button" value="7" onclick="display(7)"></td>
                    <td><input type="button" value="8" onclick="display(8)"></td>
                    <td><input type="button" value="9" onclick="display(9)"></td>
                    <td><input type="button" value="+" onclick="display('+')"></td>
                    <td><input type="button" value="-" onclick="display('-')"></td>
                    <td><input type="button" value="^" onclick="power()"></td>
                </tr>

                <!-- Second row of buttons -->
                <tr>
                    <td><input type="button" value="4" onclick="display(4)"></td>
                    <td><input type="button" value="5" onclick="display(5)"></td>
                    <td><input type="button" value="6" onclick="display(6)"></td>
                    <td><input type="button" value="*" onclick="display('*')"></td>
                    <td><input type="button" value="/" onclick="display('/')"></td>
                    <td><input type="button" value="sin" onclick="sin()"></td>
                </tr>

                <!-- Third row of buttons -->
                <tr>
                    <td><input type="button" value="1" onclick="display(1)"></td>
                    <td><input type="button" value="2" onclick="display(2)"></td>
                    <td><input type="button" value="3" onclick="display(3)"></td>
                    <td><input type="button" value="(" onclick="display('(')"></td>
                    <td><input type="button" value=")" onclick="display(')')"></td>
                    <td><input type="button" value="cos" onclick="cos()"></td>
                </tr>

                <!-- Fourth row of buttons -->
                <tr>
                    <td><input type="button" value="." onclick="display('.')"></td>
                    <td><input type="button" value="0" onclick="display(0)"></td>
                    <td><input type="button" value="←" onclick="back()"></td>
                    <td><input type="button" value="c" onclick="reset()"></td>
                    <td><input type="button" value="=" onclick="equals()"></td>
                    <td><input type="button" value="tan" onclick="tan()"></td>
                </tr>

            </table>

        </div>

    </div>
</body>

</html>

CSS

/* Set the background image of the entire page with a cover effect */
body {
    background-image: url("/image3.webp"); /* Specify the URL of the background image */
    background-size: cover; /* Scale the background image to cover the entire viewport */
}

/* Style for heading level 3 elements */
h3 {
    font-family: 华文楷体; /* Set the font family for h3 elements */
    font-size: 35px; /* Set the font size for h3 elements */
    text-align: center; /* Center-align the text within h3 elements */
}

/* Style for the input element inside an element with the ID "show" */
#show input {
    width: 511px; /* Set the width of the input field */
    height: 60px; /* Set the height of the input field */
    font-size: 30px; /* Set the font size of the input text */
}

/* Style for input elements inside an element with the ID "custom" */
#custom input {
    width: 100px; /* Set the width of the input buttons */
    height: 70px; /* Set the height of the input buttons */
    font-size: 28px; /* Set the font size of the input button text */
    background-image: url("/image2.jpg"); /* Set the background image for the input buttons */
}

/* Style for input elements inside an element with the ID "custom" when hovered */
#custom input:hover {
    background-image: url("/image1.jpg"); /* Change the background image on hover */
}

JavaScript

// Function to get an element by its ID and return it
function $(id) {
    return document.getElementById(id);
}

// Declare global variables
var str;
var result;
var is_sin = false;
var is_cos = false;
var is_tan = false;
var angle;

// Function to display a string in the text field
function display(str0) {
    str = document.getElementById("text");

    // Check if the first character is not a digit, minus sign, or opening parenthesis and clear the field
    if (isNaN(parseInt(str.value.charAt(0))) && str.value.charAt(0) !== '-' && str.value.charAt(0) !== '(') {
        str.value = "";
    }

    // Append the input string to the text field
    str.value = str.value + str0;
}

// Function to calculate the result when the equal button is pressed
function equals() {
    str = document.getElementById("text");

    // Check if trigonometric functions (sin, cos, tan) were selected and calculate accordingly
    if (is_sin === true) {
        sin_cal(str);
    } else if (is_cos === true) {
        cos_cal(str);
    } else if (is_tan === true) {
        tan_cal(str);
    } else {
        // Evaluate and display the result of the expression in the text field
        result = eval(str.value);
        str.value = result;
    }
}

// Function to remove the last character from the text field (backspace)
function back() {
    str = document.getElementById("text");
    str.value = str.value.substring(0, str.value.length - 1);
}

// Function to clear the text field
function reset() {
    str = document.getElementById("text");
    str.value = "";
}

// Function to set the input field to "sin" and enable sin calculation
function sin() {
    str = document.getElementById("text");
    str.value = "sin";
    is_sin = true;
}

// Function to set the input field to "cos" and enable cos calculation
function cos() {
    str = document.getElementById("text");
    str.value = "cos";
    is_cos = true;
}

// Function to set the input field to "tan" and enable tan calculation
function tan() {
    str = document.getElementById("text");
    str.value = "tan";
    is_tan = true;
}

// Function to calculate and display the sine of an angle
function sin_cal(str0) {
    is_sin = false;
    angle = eval(str.value);
    result = Math.sin(angle * (Math.PI / 180));
    str.value = result;
}

// Function to calculate and display the cosine of an angle
function cos_cal(str0) {
    is_cos = false;
    angle = eval(str.value);
    result = Math.cos(angle * (Math.PI / 180));
    str.value = result;
}

// Function to calculate and display the tangent of an angle
function tan_cal(str0) {
    is_tan = false;
    angle = eval(str.value);
    result = Math.tan(angle * (Math.PI / 180));
    str.value = result;
}

// Function to add the power operator "**" to the input field
function power() {
    str = document.getElementById("text");

    // Remove a leading minus sign if present and append "**"
    if (str.value.charAt(0) === '-') {
        str.value = str.value.substring(1);
    }
    str.value = str.value + "**";
}

VIII.Video presentation

网页版计算器

IX.Summary

The result of the project is a simple calculator that can be used, but there are some shortcomings and shortcomings. Here are some of the main problems and possible solutions:

1.Unsafe Expression Evaluation:

Issue: The code uses the eval() function to calculate user-input expressions, which poses a potential security risk, as it allows for the execution of arbitrary code.
Solution: Implement a safer expression evaluation approach, such as parsing the user’s input into a syntax tree and then performing calculations to prevent malicious input.

2.Limited Error Handling:

Issue: The code lacks robust error handling. If the user enters an invalid expression, the calculator may produce unclear results or fail.
Solution: Implement better error handling by validating user input and providing clear error messages when errors occur.

3.Inconvenient Trigonometric Function Input:

Issue: When selecting trigonometric functions, users must manually input angle values, with no user-friendly options like dropdown menus or input prompts.
Solution: Enhance the interface by providing more convenient ways to select angle values, such as dropdown menus or input prompts, making it easier for users to use trigonometric functions.

4.No Unit Conversion:

Issue: Trigonometric functions default to using degrees without an option to switch to radians.
Solution: Add a button or option for users to choose between degrees and radians, and perform calculations accordingly.