Post
Ask Question

Build Your Own Number to Words Converter

Introduction

Have you ever wanted to convert numbers into words? This can be useful for things like writing checks or making numbers easier to read. In this article, we’ll show you how to create a simple Number Words Converter using HTML, CSS, and JavaScript.

What Will You Learn?

  1. How to set up your HTML structure.
  2. How to style your converter with CSS.
  3. How to add functionality with JavaScript.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number to Words Converter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Number to Words Converter</h1>
    <input type="number" id="numberInput" placeholder="Enter a number" min="0">
    <button id="convertButton">Convert to Words</button>
    <div id="result" class="result"></div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

Adding CSS Styles

Next, we’ll add some styles to make our converter look attractive.

/* styles.css */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 20px;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 100%;
  max-width: 400px;
  transition: transform 0.3s ease;
}

.container:hover {
  transform: scale(1.02);
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

input[type="number"] {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border 0.3s ease;
}

input[type="number"]:focus {
  border: 1px solid #4facfe;
  outline: none;
}

button {
  padding: 12px 20px;
  margin: 5px;
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background: #00f2fe;
  transform: translateY(-2px);
}

.result {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f9f9f9;
  min-height: 50px;
}

Implementing the JavaScript Logic

Now that we have the basic structure and styling set up, we need to add the functionality to convert the numbers to words. We’ll write the JavaScript logic that will perform the actual conversion.

// script.js

const numberInput = document.getElementById('numberInput');
const convertButton = document.getElementById('convertButton');
const resultDiv = document.getElementById('result');

function convertNumberToWords(num) {
  const belowTwenty = [
    'Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine',
    'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 
    'Eighteen', 'Nineteen'
  ];
  const tens = [
    '', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'
  ];
  const thousands = ['', 'Thousand', 'Million', 'Billion'];

  if (num < 20) return belowTwenty[num];
  if (num < 100) return tens[Math.floor(num / 10)] + (num % 10 !== 0 ? ' ' + belowTwenty[num % 10] : '');
  if (num < 1000) return belowTwenty[Math.floor(num / 100)] + ' Hundred' + (num % 100 !== 0 ? ' ' + convertNumberToWords(num % 100) : '');

  for (let i = 0; i < thousands.length; i++) {
    const divisor = Math.pow(1000, i);
    if (num < divisor * 1000) {
      return convertNumberToWords(Math.floor(num / divisor)) + ' ' + thousands[i] + (num % divisor !== 0 ? ' ' + convertNumberToWords(num % divisor) : '');
    }
  }
}

convertButton.addEventListener('click', () => {
  const number = parseInt(numberInput.value, 10);
  if (isNaN(number) || number < 0) {
    resultDiv.innerText = 'Please enter a valid positive number.';
  } else {
    const words = convertNumberToWords(number);
    resultDiv.innerText = words;
  }
});

The first three lines use document.getElementById to fetch HTML elements by their IDs.

convertNumberToWords() function

This function is the heart of the conversion. It takes a number as input and recursively breaks it down into words.

First, we maintain an array for number ranges

  • The belowTwenty array contains the words for numbers between 0 and 19.
  • tens is an array of numbers in the tens (20, 30, 40, etc.).
  • Array 'thousands' is for large numbers like Thousand, Million, and Billion.

Then, we have the logic to return the text based on the number supplied.

  • If num is less than 20, it directly returns the corresponding word from belowTwenty.
  • If num is less than 100, it calculates the tens and checks if there is a unit part to append.
  • If num is less than 1000, it calculates the hundreds and recursively calls itself for any remainder.

In the case of large numbers, the loop handles numbers in thousands, millions, and billions by checking how many times the number can be divided by powers of 1000.

It uses recursion to break down larger numbers into smaller parts that can be converted using the same function.

When the user clicks the "Convert to Words" button, the JavaScript reads the number from the input, processes it through the convertNumberToWords() function, and displays the result in the resultDiv.

If the input isn’t a valid number or is less than 0, it shows an error message.

Output

Number to Words Converter

Conclusion

Congratulations! You now have a simple Number to Words Converter. You can enter a number, and it will show you its word representation. This project is a great way to practice your HTML, CSS, and JavaScript skills. Feel free to expand this project by adding more features, like handling larger numbers or improving the styling!


Similar Articles