random-number/index.html at main · Zulphide/random-number · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Random Number Generator</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white p-6 rounded-2xl shadow-md w-full max-w-md space-y-4">
    <h1 class="text-2xl font-bold text-center">Random Number Generator</h1>

    <div class="space-y-2">
      <label class="block font-medium">Number of Digits: <span id="digitsValue">2</span></label>
      <input id="digits" type="range" min="1" max="5" value="2" class="w-full" />
    </div>

    <div class="space-y-2">
      <label class="block font-medium">Decimal Places: <span id="decimalsValue">0</span></label>
      <input id="decimals" type="range" min="0" max="2" value="0" class="w-full" />
    </div>


    <button id="generateBtn" class="bg-blue-600 hover:bg-blue-700 text-white w-full py-2 rounded">
      Generate
    </button>

    <div class="space-y-2">
      <label class="block font-medium">Language</label>
      <select id="language" class="w-full border p-2 rounded">
        <option value="zh-CN">Chinese (Mandarin)</option>
        <option value="es-419">Spanish (Latin America)</option>
      </select>
    </div>

    <label class="block mt-2 text-sm">
      <input type="checkbox" id="speakAsCurrency" class="mr-1">
      Speak as Currency
    </label>

    <button id="speakBtn" class="bg-green-600 hover:bg-green-700 text-white w-full py-2 rounded">
      🔊 Speak
    </button>

    <div id="output" class="text-2xl font-bold text-center mt-4 text-green-600"></div>
  </div>

  <script src="script.js"></script>

  <!-- Spanish Numerals to Words Helper Script -->
  <script>
    window.numeralToWordsES = function(n) {
      const nums = ["cero", "uno", "dos", "tres", "cuatro", "cinco", "seis", "siete", "ocho", "nueve"];
      const teens = ["diez", "once", "doce", "trece", "catorce", "quince", "dieciséis", "diecisiete", "dieciocho", "diecinueve"];
      const tens = ["", "", "veinte", "treinta", "cuarenta", "cincuenta", "sesenta", "setenta", "ochenta", "noventa"];
      const hundreds = ["", "cien", "doscientos", "trescientos", "cuatrocientos", "quinientos", "seiscientos", "setecientos", "ochocientos", "novecientos"];

      if (n < 10) return nums[n];
      if (n < 20) return teens[n - 10];
      if (n < 100) {
        let t = Math.floor(n / 10), u = n % 10;
        return u === 0 ? tens[t] : `${tens[t]} y ${nums[u]}`;
      }
      if (n < 1000) {
        let h = Math.floor(n / 100), r = n % 100;
        return `${hundreds[h]}${r ? ' ' + window.numeralToWordsES(r) : ''}`;
      }
      if (n < 1000000) {
        let k = Math.floor(n / 1000), r = n % 1000;
        const mil = k === 1 ? "mil" : `${window.numeralToWordsES(k)} mil`;
        return `${mil}${r ? ' ' + window.numeralToWordsES(r) : ''}`;
      }
      return n.toString(); // fallback
    };
  </script>
</body>
</html>