digitalnatives · iamrobertw · Feb 16, 2022 · Feb 16, 2022 · Feb 17, 2022
diff --git a/js-numerals/.prettierrc b/js-numerals/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "html.format.enable": true
+}
diff --git a/js-numerals/.vscode/settings.json b/js-numerals/.vscode/settings.json
@@ -0,0 +1,47 @@
+{
+  "better-comments.tags": [
+     {
+      "tag": "//",
+      "color": "#474747",
+      "strikethrough": true,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "*",
+      "color": "#98C379",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "~",
+      "color": "#ffffff",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "#799c60",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "%",
+      "color": "#240a00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": " #ebe246",
+      "bold": false,
+      "italic": false
+    }    
+  ],
+  "bracket-pair-colorizer-2.activeScopeCSS": [
+    "borderStyle : solid",
+    "borderWidth : 1px",
+    "borderColor : {color}",
+    "opacity: 0.5"
+  ],
+  "bracket-pair-colorizer-2.colors": ["Gold", "Orchid", "LightSkyBlue"]
+}
diff --git a/js-numerals/index.html b/js-numerals/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <script type="module" defer src="./script.js"></script>
+  <title>Numbers To Words</title>
+  <style>    
+
+    html {
+  font-size: 62.5%;
+  box-sizing: border-box; }
+  @media (max-width: 1280px) {
+    html {
+      font-size: 59.375%; } }
+  @media (max-width: 900px) {
+    html {
+      font-size: 56.25%; } }
+  @media (max-width: 768px) {
+    html {
+      font-size: 50%; } }
+  @media (max-width: 480px) {
+    html {
+      font-size: 50%; } }
+  @media (max-width: 300px) {
+    html {
+      font-size: 43.75%; } }
+  @media (min-width: 1920px) {
+    html {
+      font-size: 100%; } }    
+
+    body {
+      font-family: 'Poppins', sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      min-height: 100vh;
+      line-height: 1.6; 
+      background: linear-gradient(to top left, #3ec2ff, #4e51f0);
+    }
+    h1 {
+      font-family: sans-serif;
+      font-size: 2.5rem;
+      line-height: 1.3;
+      width: 100%;     
+      text-align: center;
+      color: white;      
+    }
+    input[type=number]::-webkit-inner-spin-button, 
+    input[type=number]::-webkit-outer-spin-button { 
+     -webkit-appearance: none; 
+     margin: 0; 
+    }
+    .container {
+      width: 40vw;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+    }
+  @media (max-width: 1280px) {
+    .container {
+      font-size: 56.25%; } }
+   @media (max-width: 900px) {
+    .container {
+      width: 60%; } }
+   @media (max-width: 768px) {
+    .container {
+      width: 70%; } }
+   @media (max-width: 480px) {
+    .container {
+      width: 80%; } }
+   @media (max-width: 300px) {
+    .container {
+      width: 90%; } }
+   @media (min-width: 1920px) {
+    .container {
+      width: 50%; } }
+
+    #output {
+      display: flex;
+      width:100%;
+      min-height:9rem;
+      font-size: 1.6rem;
+      border:2px solid #eee;
+      color: #eee;
+      justify-content: center;
+      text-justify: center;
+      align-items: center; 
+}
+    #input {
+      text-align: center;
+      font-size: 1.6rem;
+      height: 4rem;
+      margin-bottom: 1rem;
+      width: 100%;
+      border:2px solid #eee;
+      outline: none
+}
+
+
+  </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Number to Words Converter</h1>  
+        <input type='number' placeholder='Enter the number you want to convert to words' id='input' class="input" name='input'></input>
+        <div id='output'></div>          
+    </div>
+</body>
+
+</html>
diff --git a/js-numerals/script.js b/js-numerals/script.js
@@ -0,0 +1,112 @@
+'use strict';
+
+//~ Made by Robert Więckowski
+
+let numbers =
+  'zero one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen'.split(
+    ' ',
+  );
+let tens = 'twenty thirty forty fifty sixty seventy eighty ninety'.split(' ');
+
+function numberToWords(n) {
+  let cutThousand =
+    ~~((n - ~~~~(n / 1000000) * 1000000) / 1000) == 0
+      ? ''
+      : numberToWords(~~((n - ~~~~(n / 1000000) * 1000000) / 1000)) + ' thousand';
+
+  if (!n) return 'Enter a number in the input field';
+//   try {
+//     throw new Error('Enter a number in the input field');
+// } 
+// catch (e) {
+//   console.log(e.message);
+// }
+  if (n < 20) return numbers[n];
+  let digits = n % 10;
+  if (n < 100) return tens[~~(n / 10) - 2] + (digits ? '-' + numbers[digits] : '');
+  if (n < 1000)
+    return (
+      numbers[~~(n / 100)] +
+      ' hundred' +
+      (n % 100 == 0 ? '' : ' and ' + numberToWords(n % 100))
+    );
+  if (n >= 1000 && n < 10000 && n - (n % 100) === ~~(n / 1000) * 1000)
+    return (
+      numberToWords(~~(n / 1000)) +
+      ' thousand' +
+      (n % 1000 != 0 ? ' and ' + numberToWords(n % 1000) : '')
+    );
+  if (n >= 1000 && n < 1000000)
+    return (
+      numberToWords(~~(n / 1000)) +
+      ' thousand' +
+      (n % 1000 != 0 ? ' ' + numberToWords(n % 1000) : '')
+    );
+  if (n >= 1000000 && n < 1000000000)
+    return (
+      numberToWords(~~(~~(n / 1000) / 1000)) +
+      ' million ' +
+      cutThousand +
+      (n % 1000 != 0 ? ' ' + numberToWords(n % 1000) : '')
+    );
+  if (n >= 1000000000 && n < 1000000000000)
+    return (
+      numberToWords(~~(~~(~~(n / 1000) / 1000) / 1000)) +
+      ' billion ' +
+      (n % 1000000 != 0
+        ? numberToWords(~~(~~(n / 1000) / 1000) % 1000) + ' million '
+        : '') +
+      cutThousand +
+      (n % 1000 != 0 ? ' ' + numberToWords(n % 1000) : '')
+    );
+  if (n >= 1000000000000)
+    return 'This number is outside the range of the converter';
+  return;
+}
+
+//* And using this scheme, it is quite easy to add further code and convert larger numbers
+
+// Text Display
+
+  function displayText() {
+    let inputVal = input.value;
+    let handle = numberToWords(inputVal);
+  output.innerHTML = handle;
+}
+let output = document.getElementById('output');
+let input = document.getElementById('input');
+input.addEventListener('input', displayText);
+
+// Characters Validation
+
+let inputField = document.getElementById('input');
+
+let invChars = ['-', '+', 'e'];
+
+inputField.addEventListener('keydown', function (e) {
+  if (invChars.includes(e.key)) {
+    e.preventDefault();
+  }
+});
+
+//* Note of Tasks and some console.logs
+
+// console.log(numberToWords(7))
+// console.log(numberToWords(42))
+// console.log(numberToWords(1999))
+// console.log(numberToWords(2001))
+// console.log(numberToWords(17999))
+// console.log(numberToWords(342251))
+// console.log(numberToWords(1300420))
+// console.log(numberToWords(81300420))
+// console.log(numberToWords(55241300420))
+
+/*
+7       === seven
+42      === forty-two
+1999    === one thousand nine hundred and ninety-nine
+2001    === two thousand and one
+17999   === seventeen thousand nine hundred and ninety-nine
+342251  === three hundred and forty-two thousand two hundred and fifty-one
+1300420 === one million three hundred thousand four hundred and twenty
+*/