意味不明なものを作ろう会Advent Calendar 2024

意味不明な電卓

Last updated at 2024-11-07Posted at 2024-11-07

1. HTML基本構造

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>カラフル電卓</title>
    <style>
      body { background-color: #ffcccb; text-align: center; }
      input, select, button { margin: 5px; }
      #result { font-size: 2em; color: #fff; background-color: #000; }
    </style>
  </head>
  <body>
    <h1>不思議なカラフル電卓</h1>
    <!-- フォームとボタンがここに配置されます -->
    <script>
      // JavaScriptのコードがここに記述されます
    </script>
  </body>
</html>

<head>部分：
- ここではページ全体の設定を行います。<base target="_top">により、リンクをクリックしたときに新しいタブではなく、同じタブでページが開くようになります。
- <title>タグで、ブラウザタブに表示されるページタイトルを設定します。「カラフル電卓」と表示されます。
- <style>タグでCSSを記述し、ページのデザインを整えます。背景色やボタンの配置、結果表示部分のスタイルなどが設定されています。

2. フォームの入力フィールド（数値入力）

<form>
  <input type="text" id="num1" placeholder="数値1"><br>
  <input type="text" id="num2" placeholder="数値2"><br>
  <select id="operator">
    <option value="add">+</option>
    <option value="subtract">-</option>
    <option value="multiply">*</option>
    <option value="divide">/</option>
  </select><br>
  <button type="button" onclick="calculate()">計算</button>
</form>

<form>タグ：
- ユーザーがデータを入力するための領域を作ります。ここでは、数値と演算子を入力するために使用されます。
<input>タグ（num1 と num2）：
- 数値1（num1）と数値2（num2）の入力フィールドを作成しています。placeholder属性で、「数値1」「数値2」と表示され、ユーザーに入力を促します。
<select>タグ（演算子選択）：
- 演算子（+, -, *, /）を選ぶためのドロップダウンメニューです。<option>タグで選択肢を提供しています。
<button>タグ：
- ユーザーがクリックすると計算を実行するボタンです。type="button"に設定されているため、フォームが送信されることはなく、JavaScriptのcalculate()関数が呼び出されます。

3. 計算結果表示

<p id="result">結果: </p>
<div id="error" style="display: none;">Error: Something went wrong!</div>

<p id="result">：
- 計算結果が表示される部分です。id="result"によって、この部分がJavaScriptから操作できるようになります。初期状態では「結果: 」という文字が表示されていますが、計算後に結果が更新されます。
<div id="error">：
- エラーメッセージを表示するための部分です。style="display: none;"で初期状態では非表示にされていますが、何らかのエラーが発生した場合に表示されます。

4. JavaScript（ランダムな色の生成と計算処理）

function getRandomColor() {
  const randomColor = Math.floor(Math.random() * 16777216);
  
    return '#' + randomColor.toString(16).padStart(6, '0');
}

getRandomColor()関数：
- ランダムなカラーコードを生成するための関数です。Math.random()で0〜1のランダムな数を生成し、それを16進数のカラーコード（例えば #ff5733）に変換します。この色は背景色として使用されます。

5. 計算処理の関数 (`calculate()`)

function calculate() {
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  var operator = document.getElementById("operator").value;
  var result;

  switch (operator) {
    case "add":
      result = num1 + num2 + Math.floor(Math.random() * 10);
      break;
    case "subtract":
      result = num1 - num2 + Math.floor(Math.random() * 10);
      break;
    case "multiply":
      result = num1 * num2 + Math.floor(Math.random() * 10);
      break;
    case "divide":
      result = num1 / num2 + Math.floor(Math.random() * 10);
      break;
    default:
      result = "無効な操作";
  }

  document.getElementById("result").innerText = "結果: " + result;
  document.body.style.backgroundColor = getRandomColor();

  if (Math.random() < 0.2) { // 20%の確率でエラーメッセージを表示
    document.getElementById("error").style.display = "block";
    document.getElementById("result").style.display = "none";
    alert("Something went terribly wrong!");
  }
}

calculate()関数：
- ユーザーが入力した数値（num1 と num2）と選択された演算子を取得し、その値を使って計算を行います。
- switch文：
  - 選択された演算子に応じて、加算（add）、減算（subtract）、乗算（multiply）、除算（divide）の計算を実行します。それぞれの演算に、Math.floor(Math.random() * 10)によって0〜9のランダムな数を加算します。
- 計算結果の表示：
  - 計算後、結果が<p id="result">タグ内に表示されます。背景色もランダムな色に変わります。
- エラーハンドリング：
  - Math.random() < 0.2で20%の確率でエラーが発生し、エラーメッセージが表示されます。alert()でアラートが表示され、計算結果は隠されます。

つまり意味不明ってこと

今回は以上！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

意味不明な電卓

1. HTML基本構造

2. フォームの入力フィールド（数値入力）

3. 計算結果表示

4. JavaScript（ランダムな色の生成と計算処理）

5. 計算処理の関数 (calculate())

つまり意味不明ってこと

5. 計算処理の関数 (`calculate()`)