Dynamic Calculator

 

html:

<div id="wrapper">

  <div id="app"></div>

</div>

css:

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

body {

  margin: 0;

  font: 100 14px 'Roboto';

}

button {

  display: block;

  background: none;

  border: none;

  padding: 0;

  font-family: inherit;

  user-select: none;

  cursor: pointer;

  outline: none;

  

  -webkit-tap-highlight-color: rgba(0,0,0,0);

}

button:active {

  box-shadow: inset 0px 0px 80px 0px rgba(0,0,0,0.25);

Java script:

const PointTarget = ReactPoint.PointTarget

class AutoScalingText extends React.Component {

  state = {

    scale: 1

  };

  

  componentDidUpdate() {

    const { scale } = this.state

    

    const node = this.node

    const parentNode = node.parentNode

    

    const availableWidth = parentNode.offsetWidth

    const actualWidth = node.offsetWidth

    const actualScale = availableWidth / actualWidth

    

    if (scale === actualScale)

      return