EE308FZ Lab_1 Calculator applet

EE308FZ Lab1 Calculator based on WeChat applet

EE308FZ main Class	Here
The Link of Requirement of This Assignment	Lab1 Requirement
The complete code link of this project	Github
The Aim of Lab 1	Make an interface visual calculator
MU STU ID and FZU STU ID	21124833_832101217

1 Introduction

This blog will take you through the process of creating a calculator app, from basic mathematical operations to designing the user interface and integrating them to build a functional calculation tool. We will delve into programming languages and technologies to help you understand how to implement various functions, such as addition, subtraction, multiplication, division, and more.

Your can see the complete code on github：链接: github

2 PSP Table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	45	30
Development
• Analysis	30	25
• Design Spec	20	30
• Design Review	10	15
• Coding Standard	15	10
• Design	60	70
• Coding	120	145
• Code Review	50	70
• Test	60	65
Reporting
• Test Repor	10	10
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	30	30
Sum	460	530

3 Description of problem-solving ideas

The learning focus of this calculator development should be the visual interface development. I plan to learn the basic front-end development process of html+css+js based on wechat developer tools (corresponding to wxml+wxss+js in wechat mini programs).

4 Design and implementation proces

The entire mini program consists of two interfaces. Click the calculator button in the initial interface to enter the calculation interface. The calculation interface is divided into two parts. The upper part is the calculation process and result display area, and the lower part is the buttons for interacting with the user. Functions such as addition, subtraction, multiplication, and division, trigonometric operations, and power operations can be realized.

5 Code description

This code is the frontend code for a calculator mini-program, primarily designed to implement basic mathematical operations, including addition, subtraction, multiplication, division, and more. It utilizes the framework of WeChat Mini Program, which includes WXML, WXSS, and JavaScript.

5.1 WXML Code

In WXML, I define the user interface for the calculator, including numeric buttons, operator buttons, and the area for displaying results. Button click events are bound to functions in JavaScript to perform the corresponding operations.

<view class="result">
    <view class="result_num">{{num}}</view>
    <view class="result_op">{{op}}</view>
</view>
<view class="btns">
    <view>
        <view hover-class="bg" bindtap="resetBtn">C</view>
        <view hover-class="bg" bindtap="delBtn">DEL</view>
        <view hover-class="bg" bindtap="opBtn" data-val="%" >%</view>
        <view hover-class="bg" bindtap="opBtn" data-val="^">^</view>
    </view>
    <view>
        <view hover-class="bg" data-val="sin" bindtap="opBtn">sin</view>
        <view hover-class="bg" data-val="cos" bindtap="opBtn">cos</view>
        <view hover-class="bg" data-val="tan" bindtap="opBtn">tan</view>
        <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
    </view>
    <view>
        <view hover-class="bg" data-val="7" bindtap="numBtn">7</view>
        <view hover-class="bg" data-val="8" bindtap="numBtn">8</view>
        <view hover-class="bg" data-val="9" bindtap="numBtn">9</view>
        <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
    </view>
    <view>
        <view hover-class="bg" data-val="4" bindtap="numBtn">4</view>
        <view hover-class="bg" data-val="5" bindtap="numBtn">5</view>
        <view hover-class="bg" data-val="6" bindtap="numBtn">6</view>
        <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view>
        <view hover-class="bg" data-val="1" bindtap="numBtn">1</view>
        <view hover-class="bg" data-val="2" bindtap="numBtn">2</view>
        <view hover-class="bg" data-val="3" bindtap="numBtn">3</view>
        <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view>
        <view hover-class="bg" data-val="0" bindtap="numBtn">0</view>
        <view hover-class="bg" bindtap="dotBtn">.</view>
        <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
    </view>
</view>

5.2 JavaScript Code

In JavaScript, I define a series of functions to handle user input, such as handling numeric button clicks, operator button clicks, decimal point button clicks, and more. Specifically, operator button clicks trigger different mathematical operations like addition, subtraction, multiplication, division, etc. Additionally, I’ve added logic to handle percentage calculations, trigonometric functions (sin, cos, tan), and exponentiation (^). These calculations display results on the page with appropriate styling in the result area.

Page({

  data: {
    num: '',
    op: ''
  },
  result: null,
  isClear: false,
  numBtn: function (e) {
    var num = e.target.dataset.val;
    if (this.data.num === '0' || this.isClear) {
      this.setData({ num: num });
      this.isClear = false;
    } else {
      this.setData({ num: this.data.num + num });
    }
  },
  opBtn: function (e) {
    var op = this.data.op;
    var num = Number(this.data.num);
    var val = e.target.dataset.val;
    if (val === '/') {
      this.setData({ op: '÷' });
    } else if (val === '*') {
      this.setData({ op: '×' });
    } else if (val === '%') {
      num = num / 100;
      this.setData({ num: num.toString(), op: '' });
      return;
    } else if (val === 'sin') {
      num = Math.sin(num * (Math.PI / 180)); 
      this.setData({ num: num.toString(), op: '' });
      return;
    } else if (val === 'cos') {
      num = Math.cos(num * (Math.PI / 180)); 
      this.setData({ num: num.toString(), op: '' });
      return;
    } else if (val === 'tan') {
      num = Math.tan(num * (Math.PI / 180)); 
      this.setData({ num: num.toString(), op: '' });
      return;
    } else if (val === '^') {
      this.setData({ op: '^' });
    } else {
      this.setData({ op: val });
    }
    if (this.isClear) {
      return;
    }
    this.isClear = true;
    if (this.result === null || this.result === undefined) {
      this.result = num;
      return;
    }
    if (op === '+') {
      this.result = this.result + num;
    } else if (op === '-') {
      this.result = this.result - num;
    } else if (op === '×') {
      this.result = (this.result * num).toFixed();
    } else if (op === '÷') {
      this.result = this.result / num;
    } else if (op === '^') {
      this.result = Math.pow(this.result, num);
    }
    this.setData({ num: this.result.toString() });
  },
  dotBtn: function () {
    if (this.isClear) {
      this.setData({ num: '0.' });
      this.isClear = false;
      return;
    }
    if (this.data.num.indexOf('.') >= 0) {
      return;
    }
    this.setData({ num: this.data.num + '.' });
  },
  delBtn: function () {
    var temp = this.data.num.toString();
    var num = temp.substr(0, this.data.num.length - 1);
    this.setData({ num: num === '' ? '0' : num });
  },
  resetBtn: function () {
    this.result = null;
    this.isClear = false;
    this.setData({ num: '0', op: '' });
  }
})

5.3 WXSS Code

I’ve defined the page’s styles in the WXSS file, including the display style for calculation results, button styles, and styles for button click effects.

page{
  display: flex;
  flex-direction: column;
  height: 100%
}
.result{
  flex: 30%;
  background-color: #DDEBF2;
  position: relative;
}
.result_num{
  position: absolute;
  font-size: 27pt;
  bottom: 5vh;
  right: 3vw;
}
.result_op{
  font-size: 15pt;
  position: absolute;
  bottom: 1vh;
  right: 3vw;
}
.btns{
  flex: 70%;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1px solid #a8d8e2;
  border-left: 1px solid #a8d8e2;
}

.btns>view{
  flex: 1;
  display: flex;
}
.btns>view>view{
  flex:1;
  border-right: 1px solid #a8d8e2;
  border-bottom: 1px solid #a8d8e2;
  box-sizing: border-box;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.btns>view:last-child>view:first-child{
  flex: 2;
}
.btns>view:first-child>view:first-child{
  color: #F25B67;
}
.btns>view>view:last-child{
  color: #BF746D;
}
.bg{
  background-color: #A2CEE0;
}

6 Final effect demonstration

This is the final product of the calculator small program, it can achieve the most basic addition, subtraction, multiplication and division operations and trigonometric function operations and exponents and other functions.The following is its complete function display.

7 Summary

In this calculator production, I started with demand analysis and first determined the supported mathematical operations, interface design and user interaction methods. Then I chose WeChat Mini Program as the development platform, read the official documentation of WeChat Mini Program, and learned about its file structure, page life cycle, and component usage. Then look for reference examples in programming communities such as github and csdn for in-depth learning. After completing the study, I divided the programming process into two parts: interface design and logic implementation, which were implemented using wxml+wxss and js respectively. After I complete the code development I test and debug and continue to improve the functionality. At the same time, I also learned how to use git and GitHub, and completed the task of synchronizing local code to the open source platform.