Binary to Hexadecimal Converter using JavaScript
Last Updated :
26 Apr, 2024
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.
What is Binary ?
Binary is a numerical system with a base of 2, utilizing only two digits: 0 and 1. It is fundamental in computing, representing data using combinations of these digits. Binary forms the foundation of digital electronics and computer programming.
What is Hexadecimal ?
Hexadecimal is a numerical system with a base of 16, using digits from 0 to 9 and letters from A to F to represent values from 10 to 15. It is commonly used in computing for concise representation of binary data, memory addresses, and color codes.
How to convert Binary to Hexadecimal ?
Let’s convert the binary number 11011002 to hexadecimal using the method you provided:
To convert the binary number 1101100 to hexadecimal:
- Group the binary digits into sets of four, starting from the right: 0110 1100
- Add leading zeroes if necessary to complete the last group:
- 0110 (binary) = 6 (hexadecimal)
- 1100 (binary) = C (hexadecimal)
- Combine the hexadecimal digits: 6C
So, the hexadecimal representation of the binary number 1101100 is 6C..
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;
display: flex;
justify-content: center;
align-items: center;
top: 20px;
}
.container {
text-align: center;
margin-top: 30px;
width: 45%;
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.3s 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;
}
.output-group,
.conversion-steps,
.input-group {
width: 90%;
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})â‚‚ = `;
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 = "";
}
|
Advantages of Binary to Hexadecimal Converter
- Compact Representation: Hexadecimal reduces the length of binary data, making it more concise and easier to read, especially for large datasets.
- Efficient Memory Usage: Hexadecimal simplifies memory addressing and manipulation, enhancing efficiency in programming and digital systems.
- Convenient for Programming: Hexadecimal simplifies programming tasks by providing a more human-readable representation of binary data, aiding in debugging and comprehension.
- Facilitates Data Communication: Hexadecimal facilitates data exchange between systems, as it provides a concise and universally understood representation of binary information, aiding in interoperability.
Share your thoughts in the comments
Please Login to comment...