以下が、JavaScriptを用いた補色を計算して表示するアプリの例です。
```
<!DOCTYPE html>
<html>
<head>
<title>補色を計算するアプリ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>補色を計算するアプリ</h1>
<label for="color-input">色を選択してください：</label>
<input type="color" id="color-input">
<br><br>
<button onclick="calculateComplementary()">補色を計算する</button>
<p id="result"></p>
<script>
function calculateComplementary() {
let colorInput = document.getElementById("color-input");
let color = colorInput.value;
// カラーコードを16進数から10進数に変換
let r = parseInt(color.substr(1,2), 16);
let g = parseInt(color.substr(3,2), 16);
let b = parseInt(color.substr(5,2), 16);
// 補色を計算
let compR = 255 - r;
let compG = 255 - g;
let compB = 255 - b;
// 計算結果を表示
let result = document.getElementById("result");
result.innerHTML = "選択した色：" + color + "<br>";
result.innerHTML += "補色：" + "rgb(" + compR + ", " + compG + ", " + compB + ")";
}
</script>
</body>
</html>
```
実行時には、「色を選択してください」と書かれたラベルの下に、カラーピッカーと「補色を計算する」ボタンが表示されます。カラーピッカーで色を選んでボタンをクリックすると、その色の補色が計算されて表示されます。計算結果は、HTMLの``<p>``タグ内に表示されます。
補色を計算する部分で、RGB値を計算しています。色情報が16進数で提供されるため、``parseInt()``関数を使用して10進数に変換しています。計算結果はRGB値の形式で表示されていますが、16進数で表示したい場合は、``toString(16)``関数を使用します。ただし、その場合、桁数が揃わない可能性があるため、条件分岐で桁数を調整する必要があります。
また、JavaScriptでは``eval()``関数を使用することで、文字列を評価して任意のコードを実行できるため、今回のアプリでは使用していません。補色の計算に使う算術演算子も、ハードコーディングしているため、ユーザーの入力によって動的に算術演算子を変えることができず、セキュリティ上の問題を引き起こす可能性があるため、避けるべきです。
