Decimal to Hexadecimal and Binary Converter
Hexadecimal:
Binary:
Decimal to Hexadecimal and Binary Converter Source Code
Creating an HTML page for a Decimal to Hexadecimal converter involves using HTML for the structure, CSS for styling, and JavaScript for the functionality. Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decimal to Hexadecimal and Binary Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#binary-container {
background:lightblue;
border:2px solid blue;
padding:20px;
border-radius:10px;
text-align:center;
margin:10px;
box-shadow:6px 6px 6px #000;
}
input[type=number]{
border:2px solid black;
padding:5px;
border-radius:10px;
text-align:center;
margin:10px;
width:60%;
font-size:18px;
}
h2 {
font-family:helvetica;
color:red;
padding:auto 10px;
border-radius:10px;
}
label {
font-size:22px;font-family:helvetica;font-weight:600;
}
#hexResult {
font-size:22px;
font-family:helvetica;
font-weight:600;
}
#binaryResult {
font-size:22px;
font-family:helvetica;
font-weight:600;
}
p {
font-size:22px;
font-family:helvetica;
font-weight:600;
}
</style>
</style>
</head>
<body>
<div id="binary-container">
<h2>VS Code Utility</h2>
<h2>https://www.vseducations.in</h2>
<h2>Decimal to Hexadecimal and Binary Converter</h2>
<label for="decimalInput">Enter Decimal Number:</label>
<input type="number" id="decimalInput" oninput="convert()">
<p>Hexadecimal: <span id="hexResult"></span></p>
<p>Binary: <span id="binaryResult"></span></p>
<script>
function convert() {
var decimalInput = document.getElementById("decimalInput").value;
var hexResult = document.getElementById("hexResult");
var binaryResult = document.getElementById("binaryResult");
// Convert to hexadecimal
var hexValue = parseInt(decimalInput, 10).toString(16).toUpperCase();
hexResult.textContent = hexValue || "0";
// Convert to binary
var binaryValue = parseInt(decimalInput, 10).toString(2);
binaryResult.textContent = binaryValue || "0";
}
</script>
</body>
</html>
Explanation
HTML Structure:
The structure of the page includes a div container with the class converter to hold the input field, button, and result display.An input element for entering the decimal value.A button element to trigger the conversion.A div element with the id result to display the conversion result.
CSS Styling:
Basic styles for centering the converter on the page, adding padding, margin, and box shadow for aesthetics.Styles for input fields and buttons to ensure they are user-friendly and visually appealing.
JavaScript Functionality:
The convert() function reads the input value, performs the conversion calculation using JavaScript's toString(16) method, and updates the result div with the converted value.Basic input validation is included to prompt the user to enter a value if the input field is empty.This example provides a simple, clean interface for converting Decimal to Hexadecimal with a responsive and user-friendly design.
Nice
ReplyDelete