Octal to HEX Converter Tool Code written in HTML Javascript and css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Octal to HEX Converter</title>
<!-- Google Fonts for better styling -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<!-- Bootstrap 4 for responsive design -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: #f0f8ff;
color: #333;
padding: 0;
margin: 0;
}
.container {
max-width: 500px;
margin-top: 80px;
}
.card {
background-color: #2a3d68;
padding: 30px;
border-radius: 15px;
color: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.card-title {
text-align: center;
font-size: 24px;
color: #ff9a8b;
}
.form-control {
border-radius: 25px;
padding: 15px;
font-size: 18px;
}
.btn-convert {
background-color: #ff9a8b;
color: white;
font-size: 18px;
font-weight: 600;
border-radius: 25px;
padding: 10px 20px;
margin-top: 20px;
width: 100%;
}
.result-section {
margin-top: 30px;
padding: 20px;
background-color: #eee;
border-radius: 15px;
color: #333;
}
.result-section p {
font-size: 20px;
}
.footer {
text-align: center;
padding: 10px;
background-color: #2a3d68;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
@media (max-width: 576px) {
.container {
margin-top: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h3 class="card-title">Octal to HEX Converter</h3>
<div class="form-group">
<label for="octalInput">Enter Octal Number:</label>
<input type="text" class="form-control" id="octalInput" placeholder="Example: 345">
</div>
<button class="btn-convert" id="convertButton">Convert</button>
<div class="result-section" id="resultSection" style="display:none;">
<p>Hexadecimal Equivalent: <span id="hexResult">--</span></p>
</div>
</div>
</div>
<div class="footer">
</div>
<!-- Bootstrap JS, Popper, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.getElementById("convertButton").addEventListener("click", function() {
let octalValue = document.getElementById("octalInput").value;
// Validate if the input is a valid octal number
if (!/^[0-7]+$/.test(octalValue)) {
alert("Please enter a valid octal number.");
return;
}
// Convert octal to decimal
let decimalValue = parseInt(octalValue, 8);
// Convert decimal to hexadecimal
let hexValue = decimalValue.toString(16).toUpperCase();
// Display the result
document.getElementById("hexResult").innerText = hexValue;
document.getElementById("resultSection").style.display = "block";
});
</script>
</body>
</html>