How To Construct A Visual Calculator on Web

832101108陆佳一

已于 2023-10-07 18:50:41 修改

阅读量133

点赞数 1

文章标签： javascript html css

于 2023-10-05 13:20:17 首次发布

本文链接：https://blog.csdn.net/weixin_70735258/article/details/133530151

版权

Introduction

This blog is written in order to help those who have just started learning sotfware and this blog is a piece of homework. In this blog I will show you how to build a web calculator using HTML, CSS and JavaScript.

You may need this link to find my Github.JY-Chii/Assignment: Tasks at college while studying Software Engineering (github.com)

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	calculator with a visual interface
MU STU ID and FZU STU ID	21126119_832101108

PSP form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
•Estimate	30	30
Development
•Analysis	15	20
•Design Spec	10	10
•Design Review	10	10
•Coding Standard	10	10
•Design	45	30
•Coding	90	150
•Code Review	45	45
•Test	15	15
Reporting
•Test Report	0	0
•Size Measurement	0	0
•Postmortem & Process Improvement Plan	60	120
Sum	330	440

Problem-Solving Ideas

The problem-solving approach for this project is to create a functional calculator with basic arithmetic operations and advanced features such as trigonometric functions. The code is organized into modular functions to handle user input, calculations, and error handling. This approach ensures a clear and maintainable code structure while meeting the project's requirements.

To solve this problem, I choose to use HTML, CSS as well as JS to construct my web calculator.

Design and Implementation Process

Design

User Interface: The user interface was designed to be visually appealing and user-friendly. A header with the title "JY Chii's Calculator" was added to give a clear identity to the calculator.
Button Layout: Buttons were organized into a grid layout, utilizing CSS Grid, to create a structured and organized look. The grid layout enhances the visual aspect of the calculator and makes it easy for users to find and click the buttons.
Functionality: The design ensured that buttons for basic arithmetic operations (+, -, *, /) and functions like trigonometric calculations (sin, cos, tan) were clearly labeled and easily accessible. A "C" button was added for clearing the input field.
Degrees to Radians Conversion: To provide additional functionality, the design included a "deg" button. When this button is pressed, it appends "* Math.PI / 180" to the input, allowing users to input angles in degrees and have them automatically converted to radians for trigonometric calculations.

Implementation

User Input Handling: JavaScript functions were implemented to handle user inputs. When buttons are clicked, the corresponding values or operations are appended to the input field.
Degrees to Radians Conversion: The "deg" button appends "* Math.PI / 180" to the input field, enabling automatic conversion from degrees to radians.
Calculation: The "calculate" button evaluates the mathematical expression in the input field using the eval() function. If the input contains trigonometric functions, they are evaluated with degrees converted to radians.
Error Handling: The code includes a try-catch block to handle potential errors, ensuring that the calculator displays "Error" when an invalid expression is entered.
Clear Function: The "C" button clears the input field.

Code description

Firstly, use HTML to construct the basic project, leaving the CSS and JS part alone and defining the buttons and doing some setup.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CalBeta</title>

    <link rel="stylesheet" href="./cal.css">
    <style>
        </style>

</head>

<body>

<div class="calculator">

<header class="cal-header">JY Chii's Calculator</header>

<input type="text" class="display" disabled>

<button onclick="getNumber('(')">(</button>
<button onclick="getNumber(')')">)</button>
<button onclick="getNumber('%')">%</button>
<button onclick="clearDisplay()">C</button> 

<button onclick="getNumber('Math.sin(')">sin</button>  
<button onclick="getNumber('Math.cos(')">cos</button>
<button onclick="getNumber('Math.tan(')">tan</button>
<button onclick="toRadian()">deg</button>

<button onclick="getNumber('7')">7</button>
<button onclick="getNumber('8')">8</button>
<button onclick="getNumber('9')">9</button>
<button onclick="getOperator('/')">/</button>

<button onclick="getNumber('4')">4</button>
<button onclick="getNumber('5')">5</button>
<button onclick="getNumber('6')">6</button>
<button onclick="getOperator('*')">*</button>

<button onclick="getNumber('1')">1</button>  
<button onclick="getNumber('2')">2</button>
<button onclick="getNumber('3')">3</button>
<button onclick="getOperator('-')">-</button>

<button onclick="getNumber('0')">0</button> 
<button onclick="getNumber('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="getOperator('+')">+</button>



</div>

<script src="./calBeta.js"></script>


</body>
</html>

Then finish the JSS part, which is about the calculation function part.

let display = document.querySelector('.display');

function getNumber(num) {
  display.value += num;
}

function getOperator(op) {
  display.value += op;
}

function toRadian() {
  if(display.value.includes('deg')) {
    display.value = display.value.replace('deg', '* Math.PI / 180');
  } else {
    display.value += '* Math.PI / 180';
  }
}

function calculate() {
  if(display.value.includes('deg')) {
    toRadian();
  }
  
  try {
    display.value = eval(display.value).toFixed(2);
  } catch {
    display.value = 'Error';
  }
}

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

Finally complete the CSS part.


.calculator {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #ddd;
    border-radius: 10px;  
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
  }
  
  .display {
    grid-column: span 4;
    height: 50px;
    font-size: 20px;
    margin-bottom: 10px;
    padding: 5px;
    border: none;
    background: #fff;
  }
  
  button {
    width: 100%;
    height: 40px;
    font-size: 14px;
    margin: 5px;
    border-radius: 5px;
    border: none;
    background: orange;
    cursor: pointer;
  }

Remember: There lies a problem in displaying that when the user pressed any button containing trigonometric functions like sin, the screen will show "math.sin" instead of "sin", but it will do no harm to the calculation. That's the reason I named some files with "beta".

Result Displaying

Summary

This project aimed to create a functional calculator with a user-friendly interface, using HTML, CSS, and JavaScript. The primary goal was to implement basic arithmetic operations and advanced features like trigonometric functions. It followed a structured development approach, using GitHub for version control.

The calculator's interface features numerical input buttons, parentheses, percentage calculations, and a clear button. Advanced functions include sine, cosine, tangent, and degree-to-radian conversion.

The JavaScript code handled user input, operators, trigonometric calculations, and error management. It also enabled degree-to-radian conversion before trigonometric operations. This project provides a practical and visually appealing calculator for mathematical tasks.

Anyway, thanks for rating up this article if it really did some help to you.