How to use Binary to Hexadecimal Converter ?
To use a Binary to Hexadecimal Converter, input the binary number you want to convert. The converter will automatically translate the binary digits into corresponding hexadecimal values. Simply enter the binary number and obtain the hexadecimal output. It simplifies the process of converting binary data into a more manageable hexadecimal format for various applications.
Code Example: Here is the code example of above-mentioned Binary to Hexadecimal Converter
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Binary to Hex Converter</ title > </ head > < body > < div class = "container" > < h3 >Binary to Hex Converter</ h3 > < div class = "myInput" > < div class = "input-group" > < label for = "binaryInput" > Binary Input: </ label > < input type = "text" id = "binaryInput" placeholder = "Enter Binary Number" onkeypress = "validateBinary(event)" > </ div > </ div > < div class = "buttonsControls" > < button class = "myBTN" onclick = "convertBinaryToHex()" > Convert </ button > < button class = "myBTN" onclick = "clearFields()" > Clear </ button > </ div > < div class = "myOutput" > < div class = "output-group" > < label for = "hexOutput" > Hex Output: </ label > < input type = "text" id = "hexOutput" placeholder = "Hexadecimal value is here" readonly> </ div > < div class = "conversion-steps" > < label for = "conversionSteps" > Conversion Steps: </ label > < input type = "text" id = "conversionSteps" placeholder = "Conversion steps here" readonly> </ div > </ div > </ div > </ body > </ html > |
CSS
body { margin : 0 ; padding : 0 ; font-family : Arial , sans-serif ; /* background-color: #f0f0f0; */ display : flex; justify- content : center ; align-items: center ; top : 20px ; } .container { text-align : center ; margin-top : 30px ; width : 45% ; /* border: 1px solid; */ border-radius: 6px ; box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 ); background-color : #BBC3A4 ; } input { padding : 10px ; font-size : 16px ; border-radius: 6px ; border : 1px solid #ccc ; text-align : center ; } label { font-size : 18px ; font-weight : bold ; text-align : center ; } .buttonsControls { width : 90% ; margin : 10px ; padding : 6px ; } .myBTN { padding : 10px 20px ; font-size : 16px ; border-radius: 3px ; border : none ; outline : none ; background-color : #4f4c5e ; color : #ffffff ; font-size : 14px ; cursor : pointer ; transition: background-color 0.3 s ease; margin : 5px ; font-weight : bold ; } .myBTN:hover { background-color : #2a93d5 ; transform: scale( 1.05 ); } .myOutput, .myInput { width : 100% ; margin : 0 auto ; display : flex; justify- content : center ; align-items: center ; flex- direction : column; /* border: 1px solid; */ } .output-group, .conversion-steps, .input-group { width : 90% ; /* border: 1px solid; */ padding : 8px ; display : flex; justify- content : space-between; align-items: center ; } @media screen and ( max-width : 720px ) { .container { width : 90% ; } } @media screen and ( max-width : 720px ) { .container { width : 80% ; } } @media screen and ( max-width : 560px ) { .input-group { flex- direction : column; } label { margin-bottom : 0 ; } input { margin-bottom : 10px ; } .buttonsControls { flex- direction : column; } .buttonsControls .myBTN { margin-top : 5px ; } .output-group { width : 100% ; flex- direction : column; } .conversion-steps { width : 100% ; flex- direction : column; } label { padding : 6px 0 ; } } @media screen and ( max-width : 480px ) { .container { width : 90% ; } } @media screen and ( max-width : 360px ) { .container { width : 95% ; } } |
Javascript
function validateBinary(event) { const key = event.key; if (key !== "0" && key !== "1" && key !== " " ) { event.preventDefault(); } } function displayConversionSteps(binaryValue, hexValue) { const stepsInput = document.getElementById( "conversionSteps" ); stepsInput.value = `(${binaryValue})₂ = `; // Convert binary to hexadecimal let hexSteps = '' ; let binaryGroup = '' ; for (let i = binaryValue.length - 1; i >= 0; i--) { binaryGroup = binaryValue[i] + binaryGroup; if (binaryGroup.length === 4 || i === 0) { const hexDigit = parseInt(binaryGroup, 2).toString(16).toUpperCase(); hexSteps = `= ${hexDigit} ` + hexSteps; binaryGroup = '' ; } } stepsInput.value += hexSteps.trim(); } function convertBinaryToHex() { const binaryInput = document.getElementById( "binaryInput" ).value.trim(); if (binaryInput === "" ) { alert( "Please enter a binary number." ); return ; } const decimalOutput = parseInt(binaryInput, 2); const hexOutput = decimalOutput.toString(16).toUpperCase(); document.getElementById( "hexOutput" ).value = hexOutput; displayConversionSteps(binaryInput, hexOutput); } function clearFields() { document.getElementById( "binaryInput" ).value = "" ; document.getElementById( "hexOutput" ).value = "" ; document.getElementById( "conversionSteps" ).value = "" ; } |
Binary to Hexadecimal Converter using JavaScript
Binary to Hexadecimal Converter tool is a utility that converts binary numbers (base-2) into hexadecimal numbers (base-16). It simplifies the process of converting binary data into a more compact and human-readable format. This tool aids in tasks such as programming, networking, and digital data manipulation.
Contact Us