Another Inlet

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//Display vars
var rectW = 80;
var rectH = 80;
var positionX = 180;
var positionY = 120;
var delta = 20;

//input
var input1 = "", input2 = "", operand = "";
var result = 0;

var toInput1 = true, toInput2 = false;


//buttons values
var dNums = [1,2,3,4,5,6,7,8,9,0];
var control = ["X", "+", "CLEAR", "="];

//display
var svg = d3.select("svg").append("g");

//creating the buttons pad
var numbers = svg.selectAll("g.numbers")
    .data(dNums)
    .enter().append('rect')
    .attr("x", function(d,i) {
      return (i%2 == 0) ? positionX : 
        positionX+rectW+delta;
    })
    .attr("y", function(d, i) { 
      return positionY+(Math.floor((i+2)/2-1)*(rectH+delta));
    })
    .attr("width", rectW)
    .attr("height", rectH-delta)
    .attr("fill", "darkslategrey")
    .on("mouseover", function() {
        d3.select(this)
        .transition()
        .duration(100)
		.style("opacity", 0.5);
	})
    .on("mouseout", function() {
      d3.select(this)
      .transition()
      .duration(100)
      .style("opacity", 1);
	})
    .on("click", function(d,i) {
      getInput(d);
    });


var nText = svg.selectAll("g.numbers.text")
  .data(dNums)
  .enter()
  .append("text")
  .text(function(d){return d;})
  .attr("x", function(d, i) {
    return (i%2 == 0) ? positionX+rectW/2-8 :
      positionX+rectW+delta+rectW/2-8;
  })
  .attr("y", function(d, i) {
    return 37+positionY+(Math.floor((i+2)/2-1)*(rectH+delta));
  })
  .style("fill", "black")
  .style("font-size", 25)
  .style("font-weight", "bold");

//creating the control pad
var sidebar = svg.selectAll("g.sidebar")
    .data(control)
    .enter()
    .append("rect")
    .attr("x", 5*rectW)
    .attr("y", function(d, i) {
     	return positionY+rectH+i*80; 
    })
    .attr("width", 2*rectW)
    .attr("height", 0.7*rectH)
    .style("fill", "grey")
    .on("mouseover", function() {
     	d3.select(this)
          .transition()
          .duration(100)
          .style("opacity", 0.5);
    })
    .on("mouseout", function() {
     	d3.select(this)
          .transition()
          .duration(100)
          .style("opacity", 1);
    })
    .on("click", function(d, i) {
     	doOperation(d) 
    });

var sideText = svg.selectAll("g.sidebar.text")
  .data(control)
  .enter()
  .append("text")
  .text(function(d){return d;})
  .attr("x", 5*rectW+rectW)
  .attr("y", function(d, i) {
    return 37+positionY+rectH+i*80;
  })
  .style("fill", "black")
  .style("text-anchor", "middle")
  .style("font-size", 30)
  .style("font-weight", "bold");

var display = svg.append("rect")
    .attr("x", 150)
    .attr("y", 30)
    .attr("width", 450)
    .attr("height", 60)
    .attr("stroke", "black")
    .style("fill", "white");

var displayText = svg.append("text")
    .attr("x", 380)
    .attr("y", 73)
    .text("")
    .style("font-size", 40)
    .style("text-anchor", "middle");

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

//Recieving input from the user
function getInput(d) {
  if (toInput1) {
    input1 = input1.concat(d);
  	displayText.text(input1);
  } else {
    input2 = input2.concat(d);
  	displayText.text(input2);
  }
}

function doOperation(d) {
  if (d == "CLEAR") {
   	clear();
  } else if (d == "X") {
     operand = d;
     displayText.text("X");
     toInput1 = !toInput1;
     toInput2 = !toInput2;
  } else if (d == "+") {
   	 operand = d;
     displayText.text("+");
     toInput1 = !toInput1;
     toInput2 = !toInput2;
  } else if (d == "=") {
    result = (operand == "X") ? input1*input2 : input1+input2;
    displayText.text(result);
  }
}

function clear() {
  	input1 = "";
    input2 = "";
    result = 0;
    toInput1 = true;
    toInput2 = false;
   	displayText.text("");
}