Design a Number Converter in Tailwind CSS & JavaScript

Last Updated : 08 Mar, 2024

The Number Format Converter is a web application that allows users to input a number and select a format (decimal, binary, or hexadecimal). Upon clicking the “Convert” button, the application converts the input number to the selected format and displays the result. Additionally, there is a “Clear” button that resets the input fields and converted number display.

Output

Prerequisites

Approach

Integrate the Tailwind CSS via CDN Link in your HTML code. Use different HTML elements to structure the web page and style them using different Tailwind utilities.
Tailwind CSS is utilized to style input fields, buttons, and other elements, enhancing usability and visual appeal. The max-w-md Constrains the maximum width of the container to medium size, and border-2 border-green-500 adds a 2-pixel width green border to the container, providing visual distinction, and enhancing the overall design of the Number Format Converter.
JavaScript adds functionality to the Convert and Clear buttons, handling user input validation and number conversion based on the selected format.
The Convert button triggers a function to convert the entered number into decimal, binary, or hexadecimal based on the selected format.
The Clear button resets the input fields and output area when clicked, providing a seamless user experience for multiple conversions.

Example: Implementation of Designing a Number Format Converter in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Number Format Converter</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .form-input:focus {
            border-color: #4CAF50;
            outline: none;
        }
 
        .btn {
            transition: all 0.3s ease;
        }
 
        .btn:hover {
            opacity: 0.8;
        }
    </style>
</head>
 
<body class="bg-gray-100 h-screen flex 
             justify-center items-center">
    <div class="max-w-md w-full bg-white p-8 
                rounded-md shadow-md border-2 
                border-green-500">
        <h1 class="text-2xl font-semibold mb-5">
              Number Format Converter
          </h1>
        <div class="mb-4">
            <label for="number-input"
                   class="block text-sm font-medium
                          text-gray-700">
                  Enter Number
              </label>
            <input type="number" id="number-input"
                   class="form-input mt-1 block w-full
                          border-2 border-green-300 
                          rounded-md shadow-sm 
                          focus:ring-indigo-500 
                          focus:border-indigo-500">
        </div>
        <div class="mb-4">
            <label for="format-select"
                   class="block text-sm font-medium
                          text-gray-700">
                  Select Format
              </label>
            <select id="format-select"
                    class="form-select mt-1 block w-full
                           border-2 border-green-300 
                           rounded-md shadow-sm 
                           focus:ring-indigo-500 
                           focus:border-indigo-500">
                <option value="decimal">Decimal</option>
                <option value="binary">Binary</option>
                <option value="hexadecimal">Hexadecimal</option>
            </select>
        </div>
        <button id="convert-btn"
                class="mr-2 px-4 py-2 bg-blue-500 
                       text-white rounded-md btn 
                       hover:bg-blue-600 focus:outline-none">
              Convert
          </button>
        <button id="clear-btn"
                class="px-4 py-2 bg-red-500 text-white
                       rounded-md btn hover:bg-red-600
                       focus:outline-none">
              Clear
          </button>
        <div id="converted-number" class="mt-4"></div>
    </div>
    <script>
        document.getElementById('convert-btn')
                  .addEventListener('click', () => {
            const numberInput = document.getElementById('number-input')
                                        .value.trim();
            const formatSelect = document.getElementById('format-select')
                                         .value;
            if (!numberInput) {
                alert('Please enter a number.');
                return;
            }
            let convertedNumber;
            switch (formatSelect) {
                case 'decimal':
                    convertedNumber = numberInput;
                    break;
                case 'binary':
                    convertedNumber = parseInt(numberInput).toString(2);
                    break;
                case 'hexadecimal':
                    convertedNumber = parseInt(numberInput).toString(16)
                                                             .toUpperCase();
                    break;
                default:
                    convertedNumber = 'Invalid format';
            }
            document.getElementById('converted-number')
                      .textContent = `Converted Number:
                                    ${convertedNumber}`;
        });
        document.getElementById('clear-btn')
                  .addEventListener('click', () => {
            document.getElementById('number-input')
                      .value = '';
            document.getElementById('format-select')
                      .selectedIndex = 0;
            document.getElementById('converted-number')
                      .textContent = '';
        });
    </script>
</body>
 
</html>