275バイトBMI計算機

対話型コンポーネントのための大きなフロントエンドフレームワークを必ずしも必要としません.
例として、私はBMI計算機を作りました.
私はいつも、小さい、インタラクティブなコンポーネントをラップします<form> または<fieldset> -タグ.
コンポーネントに応じてeventListener , どちらonchange or oninput .
これは、すべての入力のための<form> or <fieldset> . 変わった特定の要素を知る必要があるならばevent.target .
計算機を解剖しましょう.The <form> 二つある<input type="range"> (身長・体重)・3<output> -タグ(高さ情報、重量情報、BMIの結果).
抜粋

<input type="range" name="h" min="150" max="230" step="0.5" value="180" />
<output name="ho"><output>

アンインストールされたJavaScriptコードは次のようになります.

function B() {
  const groups = [[0,18.49], [18.5,24.99], [25,29.99], [30,34.99], [35,39.99], [40,100]];
  const height = this.h.valueAsNumber;
  const weight = this.w.valueAsNumber;
  const bmi = parseFloat(weight / ((height / 100) ** 2)).toFixed(2);
  const index = groups.findIndex(arr => arr[0] <= bmi && bmi < arr[1]);
  let inches = (height*0.393700787).toFixed(0);
  this.ho.value = `${height} cm / ${Math.floor(inches / 12)}' ${inches %= 12}"`;
  this.wo.value = `${weight} kg / ${(weight*2.2046).toFixed(2)} lb`;
  this.g[index].checked = true;
  this.r.value = bmi;
}

groups BMIグループのグループ(アンダーウエイト、通常の体重など)です.height and weight 範囲入力値への参照です.bmi 高さと重量を使用してBMI値を計算するための式です.index BMIグループのインデックスを検索するbmi が見つかる.この値は、現在のBMIグループ(ラジオボタングループ)を設定するために使用されます.

this.g[index].checked = true;

安<output> -タグを設定する.innerText or .value . 私は後者を好みます、そして、それはラベルがセットされる方法です.

this.r.value = bmi;

結果
コード自体は381バイトです.しかし、あなたのモジュールがとても小さいならば、「un gzipping」がより小さいファイルサイズの利益より長くなるので、彼らをgzipしている利益はありません.
読書のおかげで、ハッピーコーディング!