Converting Numbers into Words with the power of HTML and JavaScript

Question

Converting Numbers into Words with the power of HTML and JavaScript

CONVERT NUMBER TO WORDS Write a simple JavaScript program that converts a number to words. Include an HTML page where the user can input the number to be converted. The conversion process should involve using both for loops and switch statements.

javascript for-loop type-conversion switch-statement string-conversion

Answer 1

Answer №1

Here is a useful piece of code that can help you convert numbers to words easily.

var num = "zero one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen".split(" ");
var tens = "twenty thirty forty fifty sixty seventy eighty ninety".split(" ");

function numberToWords(n){
    if (n < 20) return num[n];
    var digit = n%10;
    if (n < 100) return tens[~~(n/10)-2] + (digit? "-" + num[digit]: "");
    if (n < 1000) return num[~~(n/100)] +" hundred" + (n%100 == 0? "": " and " + numberToWords(n%100));
    return numberToWords(~~(n/1000)) + " thousand" + (n%1000 != 0? " " + numberToWords(n%1000): "");
}

Check out this link for more information on how to convert numbers to words in JavaScript

Answer 2

Here is a useful piece of code that can help you convert numbers to words easily.

var num = "zero one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen".split(" ");
var tens = "twenty thirty forty fifty sixty seventy eighty ninety".split(" ");

function numberToWords(n){
    if (n < 20) return num[n];
    var digit = n%10;
    if (n < 100) return tens[~~(n/10)-2] + (digit? "-" + num[digit]: "");
    if (n < 1000) return num[~~(n/100)] +" hundred" + (n%100 == 0? "": " and " + numberToWords(n%100));
    return numberToWords(~~(n/1000)) + " thousand" + (n%1000 != 0? " " + numberToWords(n%1000): "");
}

Check out this link for more information on how to convert numbers to words in JavaScript

Answer 3

Answer №2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <br><br>
    <h1>CONVERT NUMBER TO WORDS</h1>
    <input type="number" id="nm1" placeholder="Enter a number"><br><br>
    <input type="button" value="Convert to Words" id="optin" onclick="convertToWords()">
    <p id="result" style="color: blueviolet;"></p>

    <script>
        function convertToWords() {
            var inputNumber = document.getElementById("nm1").value
            var strNumber = String(inputNumber)
            for (let i = 0; i < strNumber.length; i++) {
                switch (strNumber[i]) {
                    case "1":
                        document.getElementById("result").innerHTML += "one"+" " 
                        break
                    case "2":
                        document.getElementById("result").innerHTML += "two"+" "
                        break
                    case "3":
                        document.getElementById("result").innerHTML += "three"+" "
                        break
                    case "4":
                        document.getElementById("result").innerHTML += "four"+" "
                        break
                    case "5":
                        document.getElementById("result").innerHTML += "five"+" "
                        break
                    case "6":
                        document.getElementById("result").innerHTML += "six"+" "
                        break
                    case "7":
                        document.getElementById("result").innerHTML += "seven"+" "
                        break
                    case "8":
                        document.getElementById("result").innerHTML += "eight"+" "
                        break
                    case "9":
                        document.getElementById("result").innerHTML += "nine"+" "
                        break
                    case "0":
                        document.getElementById("result").innerHTML += "zero"+" "
                        break
                    default :
                        document.getElementById("result").innerHTML = "Please enter a valid number/digit"
                }
            }
        }
    </script>
</body>

</html>

Answer 4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <br><br>
    <h1>CONVERT NUMBER TO WORDS</h1>
    <input type="number" id="nm1" placeholder="Enter a number"><br><br>
    <input type="button" value="Convert to Words" id="optin" onclick="convertToWords()">
    <p id="result" style="color: blueviolet;"></p>

    <script>
        function convertToWords() {
            var inputNumber = document.getElementById("nm1").value
            var strNumber = String(inputNumber)
            for (let i = 0; i < strNumber.length; i++) {
                switch (strNumber[i]) {
                    case "1":
                        document.getElementById("result").innerHTML += "one"+" " 
                        break
                    case "2":
                        document.getElementById("result").innerHTML += "two"+" "
                        break
                    case "3":
                        document.getElementById("result").innerHTML += "three"+" "
                        break
                    case "4":
                        document.getElementById("result").innerHTML += "four"+" "
                        break
                    case "5":
                        document.getElementById("result").innerHTML += "five"+" "
                        break
                    case "6":
                        document.getElementById("result").innerHTML += "six"+" "
                        break
                    case "7":
                        document.getElementById("result").innerHTML += "seven"+" "
                        break
                    case "8":
                        document.getElementById("result").innerHTML += "eight"+" "
                        break
                    case "9":
                        document.getElementById("result").innerHTML += "nine"+" "
                        break
                    case "0":
                        document.getElementById("result").innerHTML += "zero"+" "
                        break
                    default :
                        document.getElementById("result").innerHTML = "Please enter a valid number/digit"
                }
            }
        }
    </script>
</body>

</html>

Converting Numbers into Words with the power of HTML and JavaScript

Answer №1

Answer №2

Similar questions

Issue with unrecognized expression in JQuery when processing Ajax response

What is the best way to retrieve ember model relation properties within routes and controllers?

The function 'downloadFunc' is not recognized as a valid function within the context of ReactJS custom hooks

Currently struggling to retrieve data from an AJAX post request within a C# controller

What is the best way to generate conditional test scenarios with Protractor for testing?

retrieve information in json format from a specified web address

Display checkboxes on all TableRow elements as soon as one of them is checked

Is there a way to print messages to the console of openDevTools in Electron JS?

What is the best method to set one div as active by default in jQuery UI Accordion?

Adjust the size of the div to fit its content while maintaining the transition animation

Troubleshooting problems encountered when duplicating an array in JavaScript

Is there a way to display the output of jQuery in an input box rather than a span?

Utilize Javascript and JQuery to implement sending a custom header in an OPTIONS preflight API request

What is the process for adding to a highly nested array in mongoose?

Enhance tick labels in C3.js with supplementary information

Incorporating a division using the data() method

When making an Ajax post request, the loading indicator may not appear

Only if there is an update in the SQL database, I wish to refresh the div

Extract the property value and save it as an array in Vue

Tips for choosing the node_modules distribution flavor to include in your webpack bundle