Gets the name of a number, even if it's stupidly big. Supersedes TheoryOfNekomata/number-name.
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 4.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <html lang="en-PH">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>@modal-sh/numerica-core</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. .main-form {
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. display: flex;
  15. flex-direction: column;
  16. align-items: stretch;
  17. }
  18. .main-form > fieldset {
  19. display: contents;
  20. }
  21. .main-form > fieldset > div {
  22. padding: 1rem;
  23. box-sizing: border-box;
  24. display: flex;
  25. gap: 1rem;
  26. }
  27. .main-form > fieldset > legend {
  28. position: absolute;
  29. left: -999999px;
  30. }
  31. .main-form > div {
  32. flex-direction: column;
  33. display: flex;
  34. flex: auto;
  35. }
  36. .main-form > div > textarea {
  37. flex: auto;
  38. width: 100%;
  39. height: 0;
  40. font-size: 2rem;
  41. padding: 1rem;
  42. border: 0;
  43. outline: 0;
  44. resize: none;
  45. box-sizing: border-box;
  46. }
  47. .main-form > div > textarea:invalid {
  48. color: red;
  49. }
  50. .checkbox > input {
  51. position: absolute;
  52. left: -999999px;
  53. }
  54. .checkbox > input + span {
  55. display: inline-flex;
  56. align-items: center;
  57. justify-content: center;
  58. height: 3rem;
  59. padding: 0 1rem;
  60. border: 1px solid #ccc;
  61. border-radius: 0.25rem;
  62. cursor: pointer;
  63. }
  64. .checkbox > input:checked + span {
  65. border-color: #000;
  66. background-color: #000;
  67. color: #fff;
  68. }
  69. @media (min-width: 1080px) {
  70. .main-form > div {
  71. flex-direction: row;
  72. }
  73. .main-form > div > textarea {
  74. width: 0;
  75. height: 100%;
  76. }
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <form id="mainForm" class="main-form">
  82. <fieldset>
  83. <legend>
  84. Options
  85. </legend>
  86. <div>
  87. <label class="checkbox">
  88. <input type="checkbox" name="shortenMillia">
  89. <span>Shorten millia</span>
  90. </label><label class="checkbox">
  91. <input type="checkbox" name="addTensDashes" checked>
  92. <span>Add dashes to tens</span>
  93. </label><!--<label class="checkbox">
  94. <input type="groupDigits" name="groupDigits" checked>
  95. <span>Group digits</span>
  96. </label>-->
  97. </div>
  98. </fieldset>
  99. <div>
  100. <textarea aria-label="Number" name="number" placeholder="123"></textarea>
  101. <textarea aria-label="Name" name="name" placeholder="one hundred twenty three"></textarea>
  102. </div>
  103. </form>
  104. <script type="module">
  105. import { stringify, parse } from './numerica.js';
  106. function MainForm(el) {
  107. const numberInput = el.querySelector('[name="number"]');
  108. const nameInput = el.querySelector('[name="name"]');
  109. const addTensDashesCheckbox = el.querySelector('[name="addTensDashes"]');
  110. const shortenMilliaCheckbox = el.querySelector('[name="shortenMillia"]');
  111. const options = {
  112. stringify: {
  113. makeGroupOptions: {
  114. shortenMillia: false,
  115. addTensDashes: true,
  116. },
  117. },
  118. parse: {
  119. type: 'bigint',
  120. }
  121. };
  122. numberInput.addEventListener('input', (e) => {
  123. e.currentTarget.setCustomValidity('');
  124. nameInput.value = '';
  125. if (e.currentTarget.value.trim() === '') {
  126. return;
  127. }
  128. try {
  129. nameInput.value = stringify(e.currentTarget.value, options.stringify);
  130. } catch {
  131. e.currentTarget.setCustomValidity('Invalid number.');
  132. }
  133. });
  134. nameInput.addEventListener('input', (e) => {
  135. e.currentTarget.setCustomValidity('');
  136. numberInput.value = '';
  137. if (e.currentTarget.value.trim() === '') {
  138. return;
  139. }
  140. try {
  141. numberInput.value = parse(e.currentTarget.value, options.parse)
  142. .toString();
  143. // TODO group digits function from system.
  144. } catch {
  145. e.currentTarget.setCustomValidity('Invalid name.');
  146. }
  147. });
  148. addTensDashesCheckbox.addEventListener('change', (e) => {
  149. options.stringify.makeGroupOptions.addTensDashes = e.currentTarget.checked;
  150. numberInput.dispatchEvent(new Event('input'));
  151. });
  152. shortenMilliaCheckbox.addEventListener('change', (e) => {
  153. options.stringify.makeGroupOptions.shortenMillia = e.currentTarget.checked;
  154. numberInput.dispatchEvent(new Event('input'));
  155. });
  156. }
  157. const mainForm = window.document.getElementById('mainForm');
  158. new MainForm(mainForm);
  159. </script>
  160. </body>
  161. </html>