Simple web visualization calculator

Contents

• Introduction
• My basic information
• Description of problem-solving ideas
• flow chart
• PSP
• Code description
  CSS
  JavaScript
  HTML
  Demonstration
• Summary

Introduction

The project aimed to develop a user-friendly calculator that could handle various mathematical calculations. It addressed the need for a versatile tool that would enable users to perform basic arithmetic operations (addition, subtraction, multiplication, and division) as well as advanced calculations involving trigonometric functions and exponential computations.
Solution Approach:
To address the problem, I adopted a web development approach using JavaScript, HTML, and CSS. JavaScript provided the necessary logic to perform calculations, while HTML and CSS were used to create an intuitive user interface that enhanced the calculator’s usability.

• Key Features
• Basic operations: Addition, subtraction, multiplication, and division functionalities allow users to perform standard arithmetic calculations.
• Trigonometry functions: The calculator incorporates trigonometric functions (sine, cosine, and tangent) to facilitate calculations involving angles and triangles.
• Exponential computing: The calculator supports exponential operations, enabling users to calculate powers and roots efficiently.
• Implementation Details
  The calculator’s implementation involved the use of JavaScript to handle user input and perform calculations. HTML was utilized to structure the calculator’s layout, while CSS was employed for styling and visual enhancements. The combination of these technologies ensured a seamless user experience.

My basic information

The Link My 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	21126364_832101319

Description of problem-solving ideas

In this project, the basic functionalities required for the calculator were defined, including addition, subtraction, multiplication, and division, along with additional functionalities such as exponential operations and trigonometric functions. As I had no prior experience with visualization, I followed the following approach to learn and implement the required skills:

1. Researching visualization techniques: I began by exploring various websites to gather information on visualization techniques and tools. During this process, I came across commonly used visualization methods such as WeChat mini-programs, web applications, computer software, mobile APP. I studied relevant documentation and tutorials to understand the principles and usage of these techniques.
2. Identifying a visualization project: To gain practical exposure to visualization, I decided to start with a relatively simple project. I considered both WeChat mini-programs and web applications, weighing their respective advantages and disadvantages. Ultimately, I chose to work with web development due to its wider application scope and availability of resources.
3. Learning web development: To get started with visualization using the web, I began learning the fundamentals of web development. I studied HTML, CSS, and JavaScript, familiarizing myself with their syntax and usage. I also delved into backend development, covering topics such as server setup and database utilization.
4. Implementing basic functionalities: I initiated the project by implementing the calculator’s basic functionalities, i.e., addition, subtraction, multiplication, and division. I created a simple user interface using HTML and CSS, and wrote the necessary logic using JavaScript. By binding events and handling user input, I successfully implemented the calculator’s basic arithmetic operations.
5. Adding additional functionalities: Following the implementation of the core functionalities, I proceeded to add extra features such as exponential operations and trigonometric functions. I researched relevant mathematical libraries and functions to understand their usage in JavaScript. Subsequently, I modified the calculator’s logic to support these additional functionalities.
   By following these steps, I successfully solved the problem and achieved the visualization of the calculator. Throughout the process, I continued to learn and explore, relying on websites and documentation to acquire the necessary knowledge and skills. This project not only provided me with an understanding of visualization techniques but also enhanced my programming and problem-solving abilities.

flow chart

PSP

Personal Software Process Stages	Estimated Time(minutes)	Actual Time(minutes)
Planning	40	35
Development
• Analysis	45	55
• Design Spec	45	25
• Design Review	35	30
• Coding Standard	20	25
• Design	50	30
• Coding	25	30
• Code Review	20	20
• Test	60	20
Reporting
• Test Report	30	20
• Size Measurement	30	35
• Postmortem & Process Improvement Plan	30	10
Sum	440	300

Code description

You can find my code at https://github.com/832101319/calculator_832101319, or click here.

CSS

The CSS code provides styling to the container div, input text field, and buttons. It sets the border, border-radius, width, height, margin, and background color to create a visually appealing calculator interface.

<style type="text/css">
		/* Set div style */
		#showdiv {
			border: solid 1px #ddd;
			border-radius: 15px;
			/* Set border radius */
			width: 320px;
			height: 570px;
			text-align: center;
			margin: auto;
			/* Set center alignment */
			margin-top: 50px;
			background-color: #d1f6ff;
		}
		/* Set input box style */
		input[type=text] {
			border: solid 1px #e5faff;
			border-radius: 15px;
			margin-top: 20px;
			width: 290px;
			height: 50px;
			font-size: 20px;
		}
		/* Set button style */
		input[type=button] {
			border: solid 1px #ddd;
			border-radius: 15px;
			width: 60px;
			height: 60px;
			margin-top: 20px;
			margin-left: 5px;
			margin-right: 5px;
			font-size: 30px;
			font-weight: bold;
			font-family: "华文黑体";
		}
	</style>

JavaScript

This JavaScript code defines a function called “test” that handles click events of calculator buttons. When a user clicks a button, the function executes corresponding logic based on the value of the button.
In the “test” function, it first retrieves the value of the clicked button and stores it in the variable “num”. Then, it performs different operations based on the value of “num_input”.

• When “num_input” is “=”, it means the equal sign button is clicked. The code retrieves the expression in the input box, calculates the result of the expression using the eval function, and updates the value of the input box with the calculated result.
• When “num_input” is “c”, it means the clear button is clicked. The code clears the value of the input box.
• When “num_input” is “sin”, “cos”, or “tan”, it means a trigonometric function button is clicked. The code retrieves the number in the input box, calculates the corresponding trigonometric function result, and updates the value of the input box with the result. The calculation requires converting degrees to radians.
• When “num_input” is any other number or symbol, it means a normal number or operator button is clicked. The code appends the value of the button to the end of the current value in the input box.
  Additionally, the code defines an input element for displaying the calculator result and multiple button elements, each with an onclick event that calls the “test” function and passes the button object as a parameter.

<script type="text/javascript">
    // Declare function
    function test(btn) {
        // Get the value of the button object
        var num_input = btn.value;
        // Execute corresponding business logic based on user click action
        switch (num_input) {
            case "=":
                // Parse the expression in the input box
                var expression = document.getElementById("inp").value;				
                // Replace the operator for exponentiation
                expression = expression.replace("^", "**");				
                // Calculate the result of the expression using eval function
                var result = eval(expression);				
                // Update the value of the input box with the calculated result
                document.getElementById("inp").value = result;
                break;
            case "c":
                document.getElementById("inp").value = "";
                break;
            case "sin":
                // Get the number in the input box
                var num = parseFloat(document.getElementById("inp").value);				
                // Calculate the result of sin function
                var sinResult = Math.sin(num * Math.PI / 180);				
                // Update the value of the input box with the result of sin function
                document.getElementById("inp").value = sinResult;
                break;
            case "cos":
                // Get the number in the input box
                var num = parseFloat(document.getElementById("inp").value);
				
                // Calculate the result of cos function
                var cosResult = Math.cos(num * Math.PI / 180);
				
                // Update the value of the input box with the result of cos function
                document.getElementById("inp").value = cosResult;
                break;
            case "tan":
                // Get the number in the input box
                var num = parseFloat(document.getElementById("inp").value);
                // Calculate the result of tan function
                var tanResult = Math.tan(num * Math.PI / 180);				
                // Update the value of the input box with the result of tan function
                document.getElementById("inp").value = tanResult;
                break;
            case "log":
                var num = parseFloat(document.getElementById("inp").value);
                var logResult = Math.log(num);
                document.getElementById("inp").value = logResult;
                break;
            default:
                // Assign the value of the button to the input box
                document.getElementById("inp").value = document.getElementById("inp").value + num_input;
                break;
        }
    }
</script>

HTML

This part of the code is a simple calculator implementation. It includes a text input box and a set of buttons. The text input box is used to display user input and calculation results. It is set to read-only to prevent direct editing by the user.
The buttons are used to input numbers, operators, and functions. Each button has a unique id and a corresponding value. When a button is clicked, the corresponding logic is handled by calling the test function.
The test function uses a switch statement to execute the appropriate operation based on the value of the button. The special buttons for π and e are used to directly add the mathematical constants π and e to the input box.
Overall, this piece of code implements a simple calculator interface where users can perform basic mathematical operations and functions.

<body>
	<div id="showdiv">
		<input type="text"  id="inp" value="" readonly="readonly" /><br />
		<input type="button"  id="btn" value="7" value="" onclick="test(this)" />
		<input type="button"  id="" value="8" onclick="test(this)" />
		<input type="button"  id="" value="9" onclick="test(this)" />
		<input type="button"  id="" value="/" onclick="test(this)" /><br />
		<input type="button"  id="" value="4" onclick="test(this)" />
		<input type="button"  id="" value="5" onclick="test(this)" />
		<input type="button"  id="" value="6" onclick="test(this)" />
		<input type="button"  id="" value="*" onclick="test(this)" /><br />
		<input type="button"  id="" value="1" onclick="test(this)" />
		<input type="button"  id="" value="2" onclick="test(this)" />
		<input type="button"  id="" value="3" onclick="test(this)" />
		<input type="button"  id="" value="-" onclick="test(this)" /><br />
		<input type="button"  id="" value="0" onclick="test(this)" />
		<input type="button"  id="" value="." onclick="test(this)" />
		<input type="button"  id="" value="=" onclick="test(this)" />
		<input type="button"  id="" value="+" onclick="test(this)" /><br />
		<input type="button"  id="" value="sin" onclick="test(this)" />
		<input type="button"  id="" value="cos" onclick="test(this)" />
		<input type="button"  id="" value="tan" onclick="test(this)" />
		<input type="button" id="" value="π" onclick="document.getElementById('inp').value = Math.PI" /><br />
		<input type="button"  id="" value="AC" onclick="test(this)" />
		<input type="button"  id="" value="^" onclick="test(this)" />
		<input type="button" id="" value="log" onclick="test(this)" />
		<input type="button" id="" value="e" onclick="document.getElementById('inp').value = Math.E" />
	</div>
</body>

Demonstration

Summary

This simple calculator code implementation provides users with a convenient tool to perform basic mathematical operations and trigonometric calculations. It is suitable for beginners and can also be used as a basis for other more complex calculators.
Hopefully, readers will understand and learn how to use CSS. This simple calculator code implementation provides users with a convenient tool to perform basic math operations and trigonometric calculations. It is suitable for beginners and can also be used as a basis for other more complex calculators.
It is hoped that readers will be able to understand and learn how to build simple calculators using CSS, HTML, and JavaScript, and be able to extend and optimize them according to their needs.
I hope this summary has been helpful to you. If you have any questions or need further information, please feel free to ask. HTML and JavaScript build simple calculators with the ability to expand and optimize according to your needs.
I hope this summary has been helpful to you. If you have any questions or need further information, please feel free to ask.