var index=0;

var input = []

var area = []

var total

​

function setup() {

  createCanvas(1348,3000);

  background(220);

push();

  let col = color(25,23,200,50);

  let col1= color(0,0,0);

  drawButton1 = createButton("Click to Insert Text Boxes");

  drawButton1.style(BOLD);

  drawButton1.style('font-size','20px')

  drawButton1.position(530, 150);

  drawButton1.size(170, 80);

  drawButton1.style('background-color', col);

  drawButton1.style('color',col1 );

  drawButton1.mousePressed(insertBoxes);

  pop();

​

  button = createButton('Calculate Total Area');

  button.position(530, 320);

  button.style('font-size','20px')

  button.size(170, 80);

  button.style('background-color', col);

​

  button.mousePressed(findarea);

  //##############################################

  greeting = createElement('h2', 'Length');

  greeting.position(310, 20);

  greeting = createElement('h2', 'Width');

  greeting.position(415, 20);

  drawButton1.mousePressed(insertBoxes);

//####################################################

  greeting = createElement('h2', 'Start');

  greeting.position(710, 155);

  greeting = createElement('h2', 'Finish');

  greeting.position(710, 325);

}

​

function insertBoxes() {

    index=index+2

    for (let i = 0; i < index; i+=1) {

        if(i%2==1){input[i]=createInput();

            input[i].style('font-size','15px')

            input[i].position(425,(((135+30*i)/2)-15));

            input[i].size(50);}

​

        if(i%2==0){input[i]=createInput();

          input[i].style('font-size','15px')

          input[i].position(328,(135+30*i)/2);

          input[i].size(50);

​

         fill(0);

         textStyle(BOLD);

         textSize(18);

         strokeWeight(10);

          text(index/2,290,(113+30*index)/2);

        }

     }

}

function draw() {

}

​

function findarea() {

  fill(0,0,255);

  //noFill();

  textStyle(BOLD);

textSize(24);

strokeWeight(100); 

​

    total=0

for (let i = 0; i < index; i+=1) {

    if(i%2==0) { area[i] = input[i].value() * input[i+1].value();

       total = total + (area[i])

​

​

print(area[i]);

print(total);

  greeting = createElement('h2', 'The');

  greeting.position(520, 220);

  greeting = createElement('h2', 'Total');

  greeting.position(566, 220);

  greeting = createElement('h2', 'Area');

  greeting.position(625, 220);

  greeting = createElement('h2', 'is');

  greeting.position(680, 220);

  greeting = createElement('h2', ':');

  greeting.position(699, 220);

​

  }

​

}

text(total,713,262);

} 

​

​