Binary to Octal Converter
/* General reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7fc;
color: #333;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
padding: 30px;
text-align: center;
}
h1 {
font-size: 2rem;
color: #5e5b8a;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
label {
font-size: 1rem;
color: #5e5b8a;
}
input {
width: 100%;
padding: 10px;
font-size: 1rem;
border: 2px solid #ccc;
border-radius: 5px;
margin-top: 5px;
transition: border-color 0.3s ease;
}
input:focus {
border-color: #5e5b8a;
outline: none;
}
.button-group button {
background-color: #5e5b8a;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-group button:hover {
background-color: #4e4978;
}
.output-group {
margin-top: 20px;
}
#octal-output {
font-size: 1.5rem;
font-weight: bold;
color: #5e5b8a;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.5rem;
}
input, button {
font-size: 0.9rem;
}
}
function convertBinaryToOctal() {
const binaryInput = document.getElementById('binary-input').value.trim();
const outputElement = document.getElementById('octal-output');
// Check if the input is a valid binary number
const isValidBinary = /^[01]+$/.test(binaryInput);
if (isValidBinary) {
// Convert binary to decimal first
const decimalValue = parseInt(binaryInput, 2);
// Convert decimal to octal
const octalValue = decimalValue.toString(8);
outputElement.textContent = octalValue;
} else {
outputElement.textContent = 'Invalid binary number. Please enter only 0s and 1s.';
}
}
