Octal to Hex Converter
Octal to Hexadecimal Converter
/* General Reset */
body, h1, label, input, button, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Container Styling */
.container {
background: #fff;
color: #333;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
text-align: center;
}
/* Header */
h1 {
margin-bottom: 1rem;
font-size: 1.8rem;
color: #2575fc;
}
/* Input and Button */
label {
font-size: 1rem;
margin-bottom: 0.5rem;
display: block;
}
input {
width: 100%;
padding: 0.7rem;
margin-bottom: 1rem;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
input:focus {
outline: none;
border-color: #2575fc;
}
button {
background: #2575fc;
color: #fff;
padding: 0.7rem 1.5rem;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #6a11cb;
}
/* Result and Error Messages */
.result, .error {
margin-top: 1rem;
font-size: 1.1rem;
}
.result {
color: #28a745;
}
.error {
color: #dc3545;
}
document.getElementById("convertBtn").addEventListener("click", () => {
const octalInput = document.getElementById("octalInput").value.trim();
const resultDiv = document.getElementById("result");
const errorDiv = document.getElementById("error");
resultDiv.textContent = ""; // Clear previous result
errorDiv.textContent = ""; // Clear previous error
// Validate octal input
if (!/^[0-7]+$/.test(octalInput)) {
errorDiv.textContent = "Please enter a valid octal number (digits 0-7).";
return;
}
// Convert Octal to Hexadecimal
const decimal = parseInt(octalInput, 8); // Convert to decimal
const hexadecimal = decimal.toString(16).toUpperCase(); // Convert to hexadecimal
// Display result
resultDiv.textContent = `Hexadecimal: ${hexadecimal}`;
});
