Create a Binary Code Converter using HTML, CSS, and JavaScript. Convert binary to decimal & text effortlessly. A comprehensive tutorial for all skill levels.
Table of Contents
The Binary Code Converter is a powerful tool that enables seamless conversion between binary code and other human-readable formats like decimal numbers and text. Computers communicate using binary code, a language comprising only 0s and 1s. This tutorial will walk you through the process of creating your own Binary Code Converter using HTML, CSS, and JavaScript.
By building this converter, you'll not only gain a deeper understanding of how computers interpret data but also enhance your coding skills across these essential web development technologies. Whether you're a beginner or an experienced coder, this tutorial is designed to provide clear and concise steps to successfully construct a functional Binary Code Converter.
In the upcoming sections, we'll cover everything from setting up the basic structure of the converter to implementing the intricate conversion logic. So, let's dive into the world of binary code and web development, and create a valuable tool that can decode the language of computers into formats we can easily comprehend.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our binary code converter.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declares the document type and version of HTML being used.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute specifies the language of the document (in this case, English).
3. <head>: This section contains metadata about the document, such as the title and character encoding.
- <title>Binay Code Converter</title>: This sets the title of the web page that will be displayed on the browser's title bar or tab.
- <meta charset="UTF-8" />: This specifies the character encoding for the document, which is UTF-8, allowing the use of a wide range of characters from different languages.
- <meta name="viewport" content="width=device-width" />: This meta tag defines how the content should be displayed on different devices by setting the viewport width to the device width. It's important for responsive design.
- <link rel="stylesheet" href="styles.css" />: This links an external stylesheet named "styles.css" to the HTML document. This stylesheet is used to apply styling and layout to the page.
4. <body>: This is the main content of the web page that will be visible to users.
5. Inside the <div class="container">, there are several sections:
6. <div class="tools">: This contains a set of buttons that serve as tools for the converter.
- <button class="sub toggle">SWITCH</button>: This is a button with the class "toggle" that switches between different modes of conversion (e.g., decimal to binary, binary to decimal).
- <button class="sub clear clear-converted">CLEAR</button>: This button with the class "clear clear-converted" clears the input and output fields for the converted content.
- <button class="convert">CONVERT</button>: This button triggers the conversion process.
- <button class="unconvert">UNCONVERT</button>: This button might reverse the conversion process.
7. <div class="decimalToBinary">: This section contains textareas for converting decimal to binary.
- <textarea autofocus class="decimal" placeholder="Your Normal Text ... examble(cat)"></textarea>: This textarea allows users to input normal text (like "cat") that will be converted to binary.
- <textarea class="binary disabled" placeholder="Your Binary Code ... examble(0100100)"></textarea>: This textarea displays the binary conversion of the input text. It's initially disabled (disabled attribute) and holds the placeholder text.
8. <div class="binaryToDecimal">: This section contains textareas for converting binary to decimal.
- <textarea class="binary" placeholder="Your Binary Code ... examble(0100100)"></textarea>: Similar to the previous section, users can input binary code here.
- <textarea class="decimal disabled" placeholder="Your Decimal Text ... examble(cat)"></textarea>: This textarea displays the conversion of the input binary code into decimal. It's also initially disabled with a placeholder.
9. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>: This line includes the jQuery library, which is a JavaScript library that simplifies HTML document traversal and manipulation. It's being loaded from a content delivery network (CDN).
10. <script src="script.js"></script>: This line includes an external JavaScript file named "script.js." This file contains the interactive functionality and logic for the converter tool.
This is the basic structure of our binary code converter using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the binary code converter is in place, the next step is to add styling to the converter using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our converter.
1. The Code starts with a universal selector that sets the margin and padding of all elements to 0. This essentially removes any default spacing around elements. The 'body' element is styled to have a light gray background (#f0f0f0).
2. The styling for 'textarea' elements comes next. Textareas are set to occupy 100% width, have a margin of 10px above and below, and are centered using 'auto' margin. They also have a fixed height of 200px, padding of 10px, and use the 'border-box' box-sizing model (padding and border are included in the specified width). The border is removed ('none'), and when a textarea is in focus, it gains a 2px wide crimson outline.
3. Following that, there are classes defined for styling specific elements. Elements with the classes 'binaryToDecimal' and 'unconvert' have their display set to 'none', meaning they will be hidden by default. Elements with class 'decimalToBinaryClose' are also set to 'display: none'. Elements with the class 'binaryToDecimalOpen' are set to 'display: block', ensuring they're visible.
4. The 'inline-block' class is defined to make elements use the inline-block display style, allowing them to sit side by side while still respecting margins and paddings.
5. Styles for buttons or clickable elements are defined next. Elements with classes 'convert' and 'unconvert' have padding, background, text color, and border styles applied, along with a bold font. They also have a cursor indicating interactivity. These buttons float to the right side of their container and have a slight border-radius of 3px.
6. Buttons with the 'sub' class have a different visual style: they initially have a white background with black text and a crimson border. On hover, the background transitions to a light pink color.
7. A 'container' class is defined to ensure that the content width doesn't exceed 1000px. It centers itself on the page using auto margins and has a slight padding.
8. Lastly, the 'tools' class ensures that elements with this class are displayed as blocks.
This will give our binary code converter an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
margin: 0;
padding: 0;
}
body{
background: #f0f0f0;
}
textarea{
width: 100%;
margin: 10px auto;
display: block;
height: 200px;
padding: 10px;
box-sizing: border-box;
border: none;
}
textarea:focus{
outline: 2px solid crimson;
}
.binaryToDecimal, .unconvert{
display: none;
}
.decimalToBinaryClose{
display: none;
}
.binaryToDecimalOpen{
display: block;
}
.inline-block{
display: inline-block;
}
.convert, .unconvert{
padding: 10px;
background: Crimson;
color: #fff;
border: 1px solid crimson;
cursor: pointer;
font-family: sans-serif;
font-weight: bold;
border-radius:3px;
float:right;
}
.sub{
padding:10px;
background:#fff;
color:#000;
border:1px solid crimson;
outline:none;
border-radius:3px;
cursor:pointer;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.sub:hover{
background:#f7acba;
}
.container{
width:100%;
max-width:1000px;
margin:10px auto;
padding:2px;
box-sizing:border-box;
}
.tools{
display:block;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
Let's break down the code step by step:
1. $(document).ready(function () { ... });: This is a jQuery function that ensures the enclosed code is executed once the HTML document is fully loaded and ready.
2. $('.toggle').click(function(){ ... });: This code adds a click event handler to elements with the class .toggle. When one of these elements is clicked, it toggles various classes on different elements, triggering the opening and closing of conversion interfaces.
- .decimalToBinary, .convert, .binaryToDecimal, .unconvert: These classes seem to represent different parts of the conversion interface.
3. $(".clear").click(function () { ... });: This code adds a click event handler to elements with the class .clear. When clicked, it clears the content of a textarea based on certain conditions.
4. $('.convert').click(function () { ... });: This event handler is attached to elements with the class .convert. It's executed when the "Convert" button is clicked.
- The code extracts the input decimal value from a textarea.
- It converts the decimal value to its binary representation using division and modulo operations.
- The binary value is displayed in a disabled textarea.
5. $('.unconvert').click(function(){ ... });: This event handler is attached to elements with the class .unconvert. It's executed when the "Unconvert" button is clicked.
- The code extracts binary values from a textarea.
- It calculates the decimal value of each binary value.
- The decimal values are converted to characters and displayed in a disabled textarea.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(document).ready(function () {
$('.toggle').click(function(){
$('.decimalToBinary').toggleClass('decimalToBinaryClose')
$('.convert').toggleClass('decimalToBinaryClose')
$('.binaryToDecimal').toggleClass('binaryToDecimalOpen')
$('.unconvert').toggleClass('inline-block')
$(".clear").toggleClass("clear-converted").toggleClass("clear-unconverted")
})
$(".clear").click(function () {
if ($(this).hasClass("clear-converted")){
$(".decimalToBinary textarea").val("")
} else {
$(".binaryToDecimal textarea").val("")
}
})
$('.convert').click(function () {
var charCodes = [],
dividing = [],
allBinaryCode = [],
decimal = $('.decimalToBinary textarea.decimal').val(),
chars = decimal.split('');
for( x=0; x<decimal.length; x++){
charCodes[x] = decimal.charCodeAt(x)
}
for (y=0; y<charCodes.length; y++){
var equal = [],
binary = [];
decimal = charCodes[y];
for(i=0; i<=999999999; i++){
dividing[i] = decimal;
equal[i] = dividing[i] / 2;
decimal = Math.floor(equal[i]);
binary[i] = dividing[i] % 2;
if(equal[equal.length-1] < 1){
break;
}else{}
}
binary.reverse();
allBinaryCode[y] = binary.join('').toString();
}
$('.decimalToBinary textarea.disabled').val(allBinaryCode.join(' ').toString());
});
$('.unconvert').click(function(){
var allBinary = $('.binaryToDecimal textarea.binary').val().split(' '),
unicodes = [];
for(i=0; i<allBinary.length; i++){
var oneBinaryLength = allBinary[i].length,
equal = [],
two = [],
char = '',
text = [];
for(x=0; x<=oneBinaryLength -1; x++){
two[x] = Math.pow(2,x);
var binary = allBinary[i].split('');
}
two.reverse();
for(y=0; y < two.length; y++){
equal[y] = two[y] * eval(binary[y]);
}
unicodes[i] = eval(equal.join('+'));
char = String.fromCharCode(unicodes[i]);
text[i] = char;
$('.binaryToDecimal textarea.disabled').val($('.binaryToDecimal textarea.disabled').val() + char)
}
});
});Final Output:
Conclusion:
In this tutorial, we embarked on a journey to create a Binary Code Converter using HTML, CSS, and JavaScript, unveiling the fascinating world of binary code translation. Through each step, we transformed a concept into a tangible application, bridging the gap between intricate computer languages and human-readable formats.
We introduced the Binary Code Converter's significance and role in deciphering binary data. Then, we delved into the technical aspects, constructing the HTML structure that formed the foundation of our converter. With the application's structure in place, we turned our attention to CSS, crafting an aesthetically pleasing interface that enhances user experience.
The true magic emerged as we implemented JavaScript, breathing life into our converter. Through concise functions, we decoded binary into decimal numbers and human-readable text, unlocking a new level of understanding in data manipulation.
As we conclude our journey, take pride in your newfound ability to construct a Binary Code Converter from scratch. You've acquired the skills to decode binary's mysterious language and present it in ways that are meaningful to us. This achievement showcases your prowess in HTML, CSS, and JavaScript, essential tools in the vast landscape of web development.
Remember, this tutorial is just a stepping stone. Feel free to expand upon your converter—add more conversion options, refine the design, or explore further functionalities. Embrace the world of coding with confidence, knowing that you've tackled a complex task and emerged victorious.
Thank you for joining us on this enlightening adventure into binary code conversion. As you continue your coding journey, may you find inspiration in the limitless possibilities of technology and your newfound skills. Happy coding!
Credit: Mahmoud El Hakim
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
