A Simple Web Calculator

最新推荐文章于 2024-09-28 19:02:04 发布

832101113林佳柽

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量53

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2301_80017332/article/details/133655380

版权

A Simple Web Calculator

Ⅰ. Introduction

In this blog, I will introduce the process of making a web calculator in HTML, CSS and JavaScript.

The calculator can implement functions including addition, subtraction, multiplication, division, clear, delete, exponentiation, trigonometric, logarithmic and power functions.

The code of github is: the git hub link

Ⅱ. Author Information Table

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	make a web calculator
MU STU ID and FZU STU ID	<21125953_832101113>

Ⅲ. PSP Form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	30	35
Development
• Analysis	40	40
• Design Spec	10	10
• Design Review	10	10
• Coding Standard	10	10
• Design	30	30
• Coding	150	190
• Code Review	40	30
• Test	60	70
Reporting
• Test Repor	50	80
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	15	15
Sum	455	530

Ⅳ. Description of Problem-solving Ideas

Firstly, this project requires a visual interface and implements the corresponding interactive functions.
So I naturally considered about HTML, CSS and Javascript because of the aim.
Then I search some references and code standards from the Internet to help my work.

Ⅴ. Design and Implementation Process

1. How to build the code framework

Step 1: Create the HTML Structure

Begin by creating an HTML file to establish the structure of your calculator.
Use HTML elements to create numeric buttons, operator buttons (+', ‘-’, ‘*’, ‘/’, etc.), and a display screen.
Organize these elements to form a clear and organized layout for your calculator. We can use classes and IDs to target specific elements in our JavaScript code later.

Step 2: Enhance the Appearance with CSS

In a separate CSS file, we can enhance the visual design and layout of our calculator.
Apply styles to various elements to make them more visually appealing. For example, we can set background colors, fonts, padding, and borders for buttons to improve their appearance.
Use CSS to ensure that our calculator looks attractive and user-friendly. We can also create responsive designs to adapt to different screen sizes.

Step 3: Implement Functionality with JavaScript

JavaScript is used to add interactivity and functionality to our calculator.
Set up event listeners for button clicks. When a numeric or operator button is clicked, we’ll capture that event and handle it in our JavaScript code.
Implement logic for accepting user input (appending digits and operators to the input string), performing calculations, and displaying results on the screen.
JavaScript will enable our calculator to respond to user actions, perform calculations, and display the outcomes in real-time.

2. The flow chart of the process

在这里插入图片描述

Ⅵ. Code Description

1. Code for HTML

Mainly for creating numeric buttons, operator buttons (+', ‘-’, ‘*’, ‘/’, etc.), and a display screen.

<!DOCTYPE html>
<html>
<head>
    <title>web calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" readonly>
        <div id="buttons">
            <button>(</button>
            <button>)</button>
            <button>C</button>
            <button>DEL</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>+</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>-</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>*</button>
            <button>.</button>
            <button>0</button>
            <button>=</button>
            <button>/</button>
        </div>
        <div id="advanced-buttons">
            <button>e^x</button>
            <button>ln</button>
            <button>x^y</button>
            <button>sin(°)</button>
            <button>cos(°)</button>
        </div>
    </div>
<script src="calculator.js"></script>
</body>
</html>

2. Code for CSS

Mainly for setting background colors, fonts, padding, and borders for buttons to improve the appearance.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

#calculator {
  width: 530px;
}

#display {
  width: 100%;
  height: 80px;
  text-align: right;
  margin: 0;
  padding-right: 10px;
  box-sizing: border-box;
  border: none;
  background-color: #303030;
  color: #fff;
  font-size: 50px
}

#buttons, #advanced-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#buttons button, #advanced-buttons button {
  height: 80px;
  border: none;
  border-top: 1px solid #303030;
  background-color: #505050;
  color: #00ff90;
  font-size: 30px;
  outline: none;
}

#buttons button:active, #advanced-buttons button:active {
  background-color: #505050;
}

3. Code for JavaScript

Mainly for interacting and implementing functions.

var display = document.getElementById('display');

function appendToScreen(btnVal) {
  display.value += btnVal;
}

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

function deleteCharacter() {
  if (display.value) {
    display.value = display.value.slice(0, -1);
  }
}

// Symbol button click event
document.getElementById("buttons").addEventListener("click", function(e) {
  if(e.target.matches("button")) {
    var btnVal = e.target.innerText;
    switch(btnVal) {
      case '=':
        try {
          var result = new Function('return ' + display.value)();
          display.value = result.toString();
        } catch(err) {
          display.value = "错误";
        }
        break;
      case 'C':
        clearScreen();
        break;
      case 'DEL':
        deleteCharacter();
        break;
      default:
        appendToScreen(btnVal);
    }
  }
});

//Advanced computing button click event
document.getElementById("advanced-buttons").addEventListener("click", function(e) {
  if(e.target.matches("button")) {
    var op = e.target.innerText;
    var curVal = eval(display.value);
    switch(op) {
      case 'e^x':
        display.value = Math.exp(curVal).toString();
        break;
      case 'ln':
        display.value = Math.log(curVal).toString();
        break;
      case 'x^y':
        display.value = 'Math.pow(' + display.value + ',y';   // y is the desired variable
        break;
      case 'sin':
            var rad = curVal * (Math.PI / 180);   // Convert angles to radians
        display.value = Math.sin(rad).toString();
        break;
      case 'cos':
            var rad = curVal * (Math.PI / 180);   // Convert angles to radians
        display.value = Math.cos(rad).toString();
        break;
    }
  }
});

Ⅶ. Displaying Result Functions

Trigonometric functions are measured in degrees (°).
在这里插入图片描述

Ⅷ. Summarize

Creating a calculator with a visual interface is an engaging and challenging project. It combines fundamental front-end development skills and allows me to build a practical tool while enhancing my web development skills.

Honestly, the calculator is not perfect and probably remains some flaws, but I have learned basic operations of HTML, CSS and JavaScript and gradually got familiar with them during the project. Also, the project encouraged me to make some plans and designs, which cultivated my abilities in these aspects.

In summary, I enjoy the process of implementing the functions of the calculator and try to improve this calculator in the future.