JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<input id="x" type="number" placeholder="x" />&sup2; &times;
<input id="y" type="number" placeholder="y" />&sup2; =
<input id="z" type="number" placeholder="z" />&sup2;

SCSS

INPUT {
  -webkit-appearance: none;
  border: none;
  display: inline;
  padding: 0;
  margin: 0;
  width: auto;
  min-width: auto;
  font-size: 14px;
}

JavaScript

function Pythagoras() {

  // get our specified circles by id
  let x = document.getElementById('x').value;
  let y = document.getElementById('y').value;

  if (x && y) {

    // lets work out the hypotenuse between x and y using pythagoras
    // negative x or y values become absolute when squared
    let distance = Math.sqrt(x ** 2 + y ** 2);
    
    document.getElementById('z').value = distance;
    
  }


  // return the distance
  return;

}

document.getElementById("x").onchange = function() { Pythagoras() };
document.getElementById("y").onchange = function() { Pythagoras() };