making a calculator function properly in p5.js

Question

So I am building a calculator using only p5.js. I have made the numbers display properly but i don't know how to make it function properly e.g I click 5, then the obelus and then 5. That sould then display 1. Does anyone know how to make this. Help is highly appreciated. Thank you very much for the people that would like to help.

let number = 0;
function setup() {
  createCanvas(400, 400);
  let one = createButton('1');
  one.mousePressed(clickedOne);
  let two = createButton('2');
  two.mousePressed(clickedTwo);
  let three = createButton('3');
  three.mousePressed(clickedThree);
  let four = createButton('4');
  four.mousePressed(clickedFour);
  let five = createButton('5');
  five.mousePressed(clickedFive);
  let six = createButton('6');
  six.mousePressed(clickedSix);
  let seven = createButton('7');
  seven.mousePressed(clickedSeven);
  let eight = createButton('8');
  eight.mousePressed(clickedEight);
  let nine = createButton('9');
  nine.mousePressed(clickedNine);
  let zero = createButton('0');
  zero.mousePressed(clickedZero);
  let equals = createButton('=');
  let clear = createButton('AC');
  let divide = createButton('÷');
  let multiply = createButton('x');
  let add = createButton('+');
  let minus = createButton('-');
  one.position(100, 150);
  one.size(45, 45);
  two.position(144, 150);
  two.size(45, 45);
  four.position(100, 194);
  four.size(45, 45);
  six.position(188, 194);
  six.size(45, 45);
  three.position(188, 150);
  three.size(45, 45);
  five.position(144, 194);
  five.size(45, 45);
  seven.position(100, 238);
  seven.size(45, 45);
  eight.position(144, 238);
  eight.size(45, 45);
  nine.position(188, 238);
  nine.size(45, 45);
  zero.position(100, 282);
  zero.size(89, 45);
  equals.position(188, 282);
  equals.size(45, 45);
  divide.position(232, 150);
  divide.size(45, 45);
  multiply.position(232, 194);
  multiply.size(45, 45);
  add.position(232, 238);
  add.size(45, 45);
  minus.position(232, 282);
  minus.size(45, 45);
  clear.position(100, 106);
  clear.size(177, 45);

}

function clickedOne(){
  number = number * 10 + 1;
}

function clickedTwo(){
  number = number * 10 + 2;
}

function clickedThree(){
  number = number * 10 + 3;
}

function clickedFour(){
  number = number * 10 + 4;
}

function clickedFive(){
  number = number * 10 + 5;
}

function clickedSix(){
  number = number * 10 + 6;
}

function clickedSeven(){
  number = number * 10 + 7;
}

function clickedEight(){
  number = number * 10 + 8;
}

function clickedNine(){
  number = number * 10 + 9;
}

function clickedZero(){
  number = numer * 10 + 0;
}

function draw() {
  background(220);
  noStroke();
  fill(20, 255, 255, 30);
  rect(100, 53, 177, 54, 5);
  strokeWeight(6);
  stroke(0);
  noFill();
  rect(97, 50, 183, 280, 5);
  strokeWeight(1);
  stroke(0);
  fill(0);
  textSize(25);

  text(number, 110, 100);
}

user_5577765 · Answer

You have to add 2 new variables number1 and operation:

let number = 0;
let operation = "";

And you have to add new callbacks for the operations (e.g. clickedAdd for +) and clickedEquals for =.

When an operation is clicked (+, -, ...) then number1 is set by number and number is set 0. Furthermore operation is set. For instance:

function clickedAdd(){ 
    number1 = number;
    number = 0;
    operation = "+";
}

function clickedMinus(){ 
    number1 = number;
    number = 0;
    operation = "-";
}

function clickedMultiply(){ 
    number1 = number;
    number = 0;
    operation = "x";
}

function clickedDivide(){ 
    number1 = number;
    number = 0;
    operation = "÷";
}

Note, after a operation is pressed, the current number is stored in the variable number1 and number is set 0, thus it is possible to input the next number.

When = the proper operation has to be performed. For instance:

function clickedEquals(){
    if (operation == "+") {
        number = number1 + number;
    } else if (operation == "-") {
        number = number1 - number;
    } else if (operation == "x") {
        number = number1 * number;
    } else if (operation == "÷") {
        number = number1 / number;
    }
}

making a calculator function properly in p5.js

1 Answers