Introduction:
Welcome to our latest tutorial! In this guide, we’ll explore how to build a simple yet powerful barcode generator using JavaScript. With just a few lines of code, you’ll be able to dynamically generate barcodes based on user input. Let’s dive in and discover how it’s done.
Things You Will Learn:
- Barcode Generation: You’ll learn how to use the JsBarcode library to generate barcodes dynamically in your web applications.
- Event Handling: Explore how to handle user interactions using event listeners in JavaScript. We’ll listen for button clicks to trigger the barcode generation process.
- Customization Options: Discover how to customize the appearance of your barcodes by specifying parameters such as format, display value, font size, and line color.
Video Tutorial:
Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS, and Javascript on my channel regularly.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Barcode Generator”. Inside this folder, we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Barcode Generator</title>
<!-- Google Fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Barcode CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Barcode Generator</h1>
<input type="text" id="input" />
<button id="btn-barcode-generator">Barcode Generator</button>
<svg id="barcode"></svg>
</div>
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this copy, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #0092fd;
}
.container {
width: min(500px, 90vw);
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3rem;
border-radius: 0.8em;
}
h1 {
font-size: 2em;
margin-bottom: 1em;
}
input {
width: 60%;
border: 1px solid #000000;
padding: 1em;
border-radius: 0.7em;
}
button {
background-color: #0092fd;
color: #ffffff;
border: none;
width: 38%;
border-radius: 0.7em;
padding: 1em;
font-size: 0.8em;
}
Â
JS:
Finally, we add functionality using JavaScript. For this once again copy the code below and paste it into your script file.
let input = document.getElementById("input");
let btn = document.getElementById("btn-barcode-generator");
btn.addEventListener("click", () => {
JsBarcode("#barcode", input.value, {
format: "code128",
displayValue: true,
fontSize: 24,
lineColor: "#000",
});
});
window.onload = (event) => {
input.value = "";
};
Â
Conclusion:
You’ve just created a barcode generator with JavaScript! This tutorial demonstrated how to leverage the JsBarcode library to dynamically generate barcodes based on user input. With a few lines of code, you can now create custom barcodes for various purposes, from inventory management to product labeling.
If you found this tutorial helpful, don’t forget to subscribe to our YouTube channel for more insightful web development tutorials. Happy coding, and may your barcodes be ever dynamic and efficient!
Thanks you