JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Program Calculates Area and Perimeter of Triangles</h3>
<p>Enter the side1: <input type="text" id="side1" value="" />
<p>Enter the side2: <input type="text" id="side2" value="" />
<p>Enter the side3: <input type="text" id="side3" value="" />
<input type="button"  value="Calculate"  onClick="calculate()" /></p>

<p id="data"></p>

JavaScript

var input1 = document.getElementById('side1')
  , input2 = document.getElementById('side2')
  , input3 = document.getElementById('side3')
  , output = document.getElementById('data');

function Triangle(side1,side2,side3){

  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3; 

  this.getArea = function(){
    var p = this.getPerimeter();
    return Math.sqrt(p * (p-side1) * (p-side2) * (p-side3));
  };

  this.getPerimeter = function(){
    return side1 + side2 + side3;
  };

  this.toString = function(){
    return "The Triangle with sides = " + this.side1 + ", " + this.side2 + ", " + this.side3 + " has Area = " + this.getArea() + " and Perimeter = " + this.getPerimeter();
  };
}

function calculate(){

  var s1 = parseFloat(input1.value)
    , s2 = parseFloat(input2.value)
    , s3 = parseFloat(input3.value);

  if(isNaN(s1) || isNaN(s2) || isNaN(s3)){
    output.innerHTML = "Please  enter numbers only";
    return;
  }

  if(s1<=0 || s2<=0 || s3<=0){
    output.innerHTML = "Negative numbers and Zero don't make sense";
    return;
  }
                
  var myTriangle = new Triangle(s1, s2, s3);

  output.innerHTML = myTriangle.toString();

}