JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<body>
    <div class="container">
        
<h1>Triangles</h1>

         <h2>Figure out what kind of triangle your measurements are below.</h2>

        <form id="triangle-entry">
            <div class="form-group">
                <label for="side1">First side</label>
                <input id="side1" type="number">
            </div>
            <div class="form-group">
                <label for="side2">Second side</label>
                <input id="side2" type="number">
            </div>
            <div class="form-group">
                <label for="side3">Third side</label>
                <input id="side3" type="number">
            </div>
            <button type="submit" class="btn btn-success btn-lg">Submit</button>
        </form>
        <div id="result">
            <p>That type of triangle is <span class="tri"></span>.</p>
        </div>
    </div>
</body>

JavaScript

var triangle = function (side1, side2, side3) {

    if ((side1 + side2 > side3) && (side2 + side3 > side1) && (side1 + side3 > side2)) { //check if it is a triangle
        if ((side1 == side2) && (side2 == side3) && (side1 == side3)) {
            return "equilateral";
        } else if ((side1 == side2) || (side2 == side3) || (side1 == side3)) {
            return "isosceles";
        } else { //if neither of the above and a triangle, it is scalene
            return "scalene";
        }
    } else { //sides don't form triangle
        return "not a triangle";
    }
}

$(document).ready(function () {
    $("form#triangle-entry").submit(function (event) {
        event.preventDefault();
        var side1 = parseInt($("input#side1").val());
        var side2 = parseInt($("input#side2").val());
        var side3 = parseInt($("input#side3").val());
        console.log(side1);


        var result = triangle(side1, side2, side3);


        $("#result").show();
        $(".tri").text(result);


    });
});