Decimal to hexadecimal and binary converter:How to design using HTML CSS and JavaScript

A decimal to hexadecimal and binary converter is a tool that transforms a decimal (base-10) number into its equivalent hexadecimal (base-16) and binary (base-2) representations. Here's a basic explanation of how it works:

1. Decimal to Binary Conversion:

- Divide the decimal number by 2 and note the remainder.

- Continue dividing the quotient by 2 until the quotient is 0, noting remainders along the way.

- Read the remainders in reverse order to get the binary representation.

2. Decimal to Hexadecimal Conversion:

- Divide the decimal number by 16 and note the remainder.

- Continue dividing the quotient by 16 until the quotient is 0, noting remainders along the way.

- Convert remainders greater than 9 to the corresponding hexadecimal letters (A-F).

- Read the remainders in reverse order to get the hexadecimal representation.

For example, let's convert the decimal number 26:

1. Decimal to Binary:

(26 ÷ 2 = 13) with a remainder of 0

(13 ÷ 2 = 6) with a remainder of 1

(6 ÷ 2 = 3) with a remainder of 0

(3 ÷ 2 = 1) with a remainder of 1

(1 ÷ 2 = 0) with a remainder of 1

So, in reverse order, the binary representation is 11010.

2. Decimal to Hexadecimal:

(26 ÷16 = 1) with a remainder of 10 (which is A in hexadecimal)

(1 ÷ 16 = 0) with a remainder of 1

So, in reverse order, the hexadecimal representation is 1A.

That's the basic process for converting decimal numbers to binary and hexadecimal.

Here is the source code for decimal number to hexadecimal and binary converter.

<!DOCTYPE html>

<head>

<title>Decimal to Hexadecimal and Binary Converter</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 50px;

}

</style>

</head>

<body>

<h2>Decimal to Hexadecimal and Binary Converter</h2>

<label for="decimalInput">Enter Decimal Number:</label>

<p>Hexadecimal: <span id="hexResult"></span></p>

<p>Binary: <span id="binaryResult"></span></p>

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>

Preview