segi-empat.html

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- <link rel="stylesheet" href="bootstrap-4-3-1/css/bootstrap.min.css" > -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

    <div class="jumbotron text-center" style="margin-bottom:0">
        <h1>SEGI EMPAT</h1>
        <p>Program menghitung keliling dan luas Segi Empat!</p>
    </div>

<div class="container" style="width:300px;">

    <form>
    <div class="input-group input-group-sm mb-3" style="margin-top:12px">
        <div class="input-group-prepend">
            <span class="input-group-text" style="width: 100px">Panjang (cm)</span>
        </div>
        <input type="text" class="form-control" name="var_panjang">
    </div>

    <div class="input-group input-group-sm mb-3" style="margin-top:12px">
        <div class="input-group-prepend">
            <span class="input-group-text" style="width: 100px">Lebar (cm)</span>
        </div>
        <input type="text" class="form-control" name="var_lebar">
    </div>

    <div>
        <button type="button" class="btn btn-primary" onclick="hitung()">Hitung!</button>
    </div>

    <div class="input-group input-group-sm mb-3" style="margin-top:12px">
        <div class="input-group-prepend">
            <span class="input-group-text" style="width: 100px">Keliling (cm)</span>
        </div>
        <input type="text" class="form-control" name="var_keliling">
    </div>

    <div class="input-group input-group-sm mb-3" style="margin-top:12px">
        <div class="input-group-prepend">
            <span class="input-group-text" style="width: 100px">Luas (cm<sup>2</sup>)</span>
        </div>
        <input type="text" class="form-control" name="var_luas">
    </div>

    </form>

</div>

</body>
<script>
function hitung() {

    form = document.forms[0];
    panjang = parseInt(form.var_panjang.value);
    lebar = parseInt(form.var_lebar.value);

    keliling = 2 * ( panjang + lebar )
    luas = panjang * lebar;

    form.var_keliling.value = keliling;
    form.var_luas.value = luas;
}
</script>
</html>