From fb4cb4cf81a4ffc373e6d15e4db7c811cb094055 Mon Sep 17 00:00:00 2001
From: rupali-yadav <rupali.yadav0@gmail.com>
Date: Sun, 24 Mar 2024 18:55:11 +0530
Subject: [PATCH] new challenge added: To convert a entered number to its
 numeric word representation

---
 .../NumbersToWords/NumbersToWords.module.css  | 35 +++++++++
 src/Challenges/NumbersToWords/constants.js    |  3 +
 src/Challenges/NumbersToWords/index.jsx       | 75 +++++++++++++++++++
 src/Challenges/NumbersToWords/utils.js        | 26 +++++++
 src/challenges.js                             |  7 ++
 5 files changed, 146 insertions(+)
 create mode 100644 src/Challenges/NumbersToWords/NumbersToWords.module.css
 create mode 100644 src/Challenges/NumbersToWords/constants.js
 create mode 100644 src/Challenges/NumbersToWords/index.jsx
 create mode 100644 src/Challenges/NumbersToWords/utils.js

diff --git a/src/Challenges/NumbersToWords/NumbersToWords.module.css b/src/Challenges/NumbersToWords/NumbersToWords.module.css
new file mode 100644
index 0000000..fdfd220
--- /dev/null
+++ b/src/Challenges/NumbersToWords/NumbersToWords.module.css
@@ -0,0 +1,35 @@
+.container {
+    padding: 0 0 80px;
+    font-size: 16px;
+}
+
+.inputContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.center {
+    margin: 0 auto;
+    text-align: center;
+}
+
+.numberInput {
+    /* border: none; */
+    /* border-bottom: 1px solid #000; */
+    font-size: 18px;
+    padding: 5px 10px;
+    text-align: center;
+    width: 100%;
+}
+
+.submitBtn {
+    padding: 10px 30px;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+.word {
+    padding: 30px 10px;
+}
\ No newline at end of file
diff --git a/src/Challenges/NumbersToWords/constants.js b/src/Challenges/NumbersToWords/constants.js
new file mode 100644
index 0000000..0dd6040
--- /dev/null
+++ b/src/Challenges/NumbersToWords/constants.js
@@ -0,0 +1,3 @@
+export const ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+export const teens = ['', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+export const tens = ['', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
diff --git a/src/Challenges/NumbersToWords/index.jsx b/src/Challenges/NumbersToWords/index.jsx
new file mode 100644
index 0000000..3ddad22
--- /dev/null
+++ b/src/Challenges/NumbersToWords/index.jsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { convertLessThanOneThousand } from "./utils";
+import styles from "./NumbersToWords.module.css";
+
+const NumbersToWords = () => {
+
+    const [word, setWord] = useState('');
+    const [number, setNumber] = useState('');
+
+    const convertNumbersToWords = () => {
+        let num = number;
+        if (num === 0) {
+            return 'zero';
+        }
+
+        let result = '';
+
+        if (num < 0) {
+            result = 'negative ';
+            num = Math.abs(num);
+        }
+
+        if (num >= 10000000) {
+            result += convertLessThanOneThousand(Math.floor(num / 10000000)) + ' crore ';
+            num %= 10000000;
+        }
+
+        if (num >= 100000) {
+            result += convertLessThanOneThousand(Math.floor(num / 100000)) + ' lakh ';
+            num %= 100000;
+        }
+
+        if (num >= 1000) {
+            result += convertLessThanOneThousand(Math.floor(num / 1000)) + ' thousand ';
+            num %= 1000;
+        }
+
+        result += convertLessThanOneThousand(num);
+
+        setWord(result.trim());
+    }
+
+
+    return (
+        <div className={styles.container}>
+            <h1 className={styles.center}>Number To Words</h1>
+            <div className={styles.inputContainer}>
+                <div id="numberInput">Enter the number</div>
+                <input
+                    className={styles.numberInput}
+                    aria-labelledby="numberInput"
+                    type="number"
+                    value={number}
+                    onChange={(e) => setNumber(e.target.value)}
+                />
+
+                {/* onSubmit convert the number to words and display below */}
+            </div>
+            <div className={styles.center}>
+                <button
+                    type="button"
+                    className={styles.submitBtn}
+                    onClick={convertNumbersToWords}
+                >
+                    Submit
+                </button>
+            </div>
+
+            <h3 className={`${styles.center} ${styles.word}`}>In words: {word}</h3>
+
+        </div>
+    )
+}
+
+export default NumbersToWords;
\ No newline at end of file
diff --git a/src/Challenges/NumbersToWords/utils.js b/src/Challenges/NumbersToWords/utils.js
new file mode 100644
index 0000000..bba83e6
--- /dev/null
+++ b/src/Challenges/NumbersToWords/utils.js
@@ -0,0 +1,26 @@
+import { ones, tens, teens } from "./constants"
+
+// Function to convert numbers less than 1000 into words
+export const convertLessThanOneThousand = (num) => {
+    let result = '';
+
+    if (num >= 100) {
+        result += ones[Math.floor(num / 100)] + ' hundred ';
+        num %= 100;
+    }
+
+    if (num >= 20) {
+        result += tens[Math.floor(num / 10)] + ' ';
+        num %= 10;
+    }
+
+    if (num > 0) {
+        if (num < 10) {
+            result += ones[num] + ' ';
+        } else {
+            result += teens[num - 10] + ' ';
+        }
+    }
+
+    return result.trim();
+}
\ No newline at end of file
diff --git a/src/challenges.js b/src/challenges.js
index fc24c1a..d136944 100644
--- a/src/challenges.js
+++ b/src/challenges.js
@@ -5,6 +5,7 @@ import SnakeLadderBoard from "./Challenges/SnakeLadder/SnakeLadderBoard";
 import StarRating from "./Challenges/StarRating/StarRating";
 import TicTacToe from "./Challenges/TicTacToe/TicTacToe";
 import NestedDropDown from "./Challenges/NestedDropDown/NestedDropDown.jsx"
+import NumbersToWords from "./Challenges/NumbersToWords";
 
 const basePath = "https://github.com/adavijit/frontend-challenges/tree/main/src/Challenges";
 const challenges = [
@@ -51,6 +52,12 @@ const challenges = [
         "source": `${basePath}/AutoComplete`,
         "component": <AutoComplete />
     },
+    {
+        "name": "Numbers To words",
+        "contributors": ["rupali-yadav"],
+        "source": `${basePath}/AutoComplete`,
+        "component": <NumbersToWords />
+    }
 ];
 
 export default challenges;
\ No newline at end of file