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.
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 >
< 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 >
|
Output: