Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="bluebox"></div>
    <input type="number" placeholder="skewX" id="skewX" onkeyup="calculateSkew()" />
    <input type="number" placeholder="skewY" id="skewY" onkeyup="calculateSkew()" />
    <h1 id="output"></h1>
  </body>

</html>

// Code goes here

function calculateSkew(){
  var el = document.getElementById('bluebox');
  var skewX = document.getElementById('skewX');
    skewX.value = skewX.value || 0;
  var skewY = document.getElementById('skewY');
    skewY.value = skewY.value || 0;
    
  
  var yRadians = skewY.value * Math.PI / 180;
  var newHeight = el.offsetWidth * Math.tan(yRadians);
  var calculatedHeight = el.offsetHeight + newHeight;
  
  var xRadians = skewX.value * Math.PI / 180;
  var newWidth = calculatedHeight * Math.tan(xRadians);
  var calculatedWidth = el.offsetWidth + newWidth;
  
  el.style.transform = ("skewX(" + skewX.value + "deg ) skewY(" + skewY.value  + "deg )");
  var output = document.getElementById('output');
  output.innerHTML = "skewY by "+skewY.value+ " and new height calculated is "+calculatedHeight+ "<br> skewX by "+skewX.value+ " and the new calculated width is "+ calculatedWidth;
}

/* Styles go here */

#bluebox {width:100px;height:100px;background:blue;margin: 100px;}