HEX to Binary Converter
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7fb;
color: #333;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #4CAF50;
margin-bottom: 20px;
}
.converter-box {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-size: 18px;
color: #4CAF50;
margin-bottom: 10px;
display: block;
}
input {
width: 80%;
padding: 10px;
font-size: 18px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 6px;
outline: none;
transition: border-color 0.3s ease;
}
input:focus {
border-color: #4CAF50;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
font-size: 18px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.output {
margin-top: 20px;
}
#binaryOutput {
font-size: 20px;
color: #007BFF;
font-weight: 500;
}
@media (max-width: 768px) {
.container {
padding: 15px;
}
input {
width: 100%;
}
}
document.getElementById('convertBtn').addEventListener('click', function() {
const hexInput = document.getElementById('hexInput').value.trim();
const binaryOutput = document.getElementById('binaryOutput');
if (hexInput === "") {
binaryOutput.textContent = "Please enter a HEX value!";
binaryOutput.style.color = 'red';
} else {
if (isHex(hexInput)) {
const binaryValue = hexToBinary(hexInput);
binaryOutput.textContent = binaryValue;
binaryOutput.style.color = '#007BFF';
} else {
binaryOutput.textContent = "Invalid HEX value!";
binaryOutput.style.color = 'red';
}
}
});
// Function to validate HEX value
function isHex(str) {
return /^[0-9A-Fa-f]+$/.test(str);
}
// Function to convert HEX to Binary
function hexToBinary(hex) {
let binary = '';
for (let i = 0; i < hex.length; i++) {
let bin = parseInt(hex[i], 16).toString(2);
binary += ('0000' + bin).slice(-4); // Add leading zeros for consistency
}
return binary;
}
