Decimal To Binary Converter Tool is Written in Javascript HTML and Css, Copy and Paste and use to convert your Decimal values into Binary code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decimal to Binary Converter</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #89fffd, #ef32d9);
}
.converter-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
max-width: 400px;
width: 100%;
text-align: center;
}
h1 {
color: #333;
}
label {
display: block;
font-size: 1.2em;
color: #555;
margin-bottom: 10px;
}
input[type="number"] {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1em;
margin-bottom: 15px;
transition: border-color 0.3s;
}
input[type="number"]:focus {
border-color: #6a1b9a;
outline: none;
}
button {
background: #6a1b9a;
color: white;
border: none;
padding: 10px 20px;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #501175;
}
.result {
margin-top: 15px;
padding: 15px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
font-size: 1.2em;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="converter-container">
<h1>Decimal to Binary Converter</h1>
<label for="decimal">Enter a Decimal Number:</label>
<input type="number" id="decimal" placeholder="Enter a number">
<button onclick="convertToBinary()">Convert to Binary</button>
<div id="result" class="result" style="display: none;"></div>
</div>
<script>
function convertToBinary() {
const decimalInput = document.getElementById('decimal').value;
const resultDiv = document.getElementById('result');
if (decimalInput === '') {
resultDiv.style.display = 'block';
resultDiv.style.color = 'red';
resultDiv.textContent = 'Please enter a valid number.';
return;
}
const decimal = parseInt(decimalInput, 10);
const binary = decimal.toString(2);
resultDiv.style.display = 'block';
resultDiv.style.color = '#333';
resultDiv.textContent = `Binary: ${binary}`;
}
</script>
</body>
</html>