A Pen by Kaceykaso.

Calculator-of-Calculators!.markdown

Calculator of Calculators!

A Pen by Kaceykaso on CodePen.

License.

index.html

<div class="container">

</div>

script.js

$(document).ready(function() {
  // Init calculator
  var viewWidth = $(window).width();
  var viewHeight = $(window).height();
  $calc(viewHeight/2,viewWidth/2);
  var top, left;
  // Spawn calculator on button click
  
  $(document).on("click", ".button-row > button", function() {
      left = Math.random() * (viewWidth-0);
      top = Math.random() * (viewHeight-0);
      $calc(top,left);
  });
});


// Build calculator
$calc = function(top,left) {
  var all_divs = $(".calculator").length;
  var thisClass = "calc"+all_divs;
  $( "<div/>", {
  "class": "calculator"
  })
  .addClass(thisClass)
  .css({
    "margin-top":top,
    "margin-left":left,
    "float":all_divs+1
  }).appendTo( ".container" );
  var thisScreen = "screen" + all_divs;
  $("<div/>", {
    "class": "screen"
  })
  .addClass(thisScreen)
  .appendTo("."+thisClass);
  
  var thisButtons = "buttons" + all_divs;
  $("<div/>", {
    "class":"buttons"
  })
  .addClass(thisButtons)
  .appendTo("."+thisClass);
  
  var thisButtonRow = "button-row"+all_divs;
  for (var i=0;i<5;i++) {
    $("<div/>", {
        "class":"button-row"
      })
    .addClass(thisButtonRow)
    .appendTo("."+thisButtons);
   }
  
  for (var j=0; j<4; j++) {
      $("<button/>", {
        "class":"button"
      })
      .html(".")
      .appendTo("."+thisButtonRow);
   }
   $("button").last().remove();

};

style.css

.container {
  font-size: 1em;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.calculator {
  background: #333;
  border: 2px solid #999;
  border-radius: 10px;
  height: 230px;
  width: 150px;
  position: absolute;
}
.screen {
  background: #fff;
  border: 2px solid #999;
  border-radius: 5px;
  margin: 5% auto;
  height: 20%;
  width: 80%;
}
.buttons {
  display: table;
  margin: 0 auto;
  height: auto;
  width: 83%;
  border-spacing: .25em;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.button-row {
  display: table-row;
}
.button-row:first-of-type button {
  background: #999;
}
button, .button {
  background: #fff;
  border: none;
  border-radius: 5px;
  width: 19%;
  margin: 0 2.5% 0;
  padding: 0.5em;
}
.button-row button:last-of-type {
  background: #F89800;
}
.button-row:last-of-type > button:first-of-type {
  width: 43%;
}