Simple Barcode Generator Using JavaScript (Free Code)

Ground Tutorial — Tue, 05 Jul 2022 09:01:32 +0000

In this tutorial you will learn how to create javascript barcode generator using html css and javascript. Earlier I shared with you how to create a QR code generator.

Some basic javascript has been used to create this simple barcode generator. If you know basic html css and javascript then you can create this javascript barcode. Watch the live preview to learn how it works.

I have already shared a tutorial on how to create a javascript barcode scanner. Now is the time to create a javascript barcode scanner using JavaScript.

JavaScript Barcode Generator

Bar code can be used to convert any data into visual or machine-readable form. Barcodes are now used in many places to turn a particular information into a machine-readable form.

Here I have added the basic information of this Simple Barcode Generator using html. It is then designed using css. Finally the html barcode generator has been activated by JavaScript.

Barcode Generator HTML Code

The following information has been added to this barcode generator using html. Copy the following html code and add it to your html file.

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
<body>

  <div class="content">
    <input type="text" id="text">
    <svg id="barcode"></svg>
    <button id="btn">Generate</button>
  </div>

</body>
</html>

CSS Code of Barcode Generator

Now is the time to design this html barcode generator using some amount of css. Here's all the css together. Copy those codes and add them to your css file.

  body{
    background-color: rgb(3, 138, 210);
  }
  .content{
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;

  }
  input{
    width: 328px;
    padding: 15px 10px;
    border: 1.5px solid rgb(52, 51, 51);
    font-size: 17px;
    outline: none;
  }
  input:focus{
    border: 1.7px solid rgb(4, 84, 213);
  }
  #barcode{
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
    width: 300px;
    margin: 30px 0px 30px 0px;
  }
  #btn{
    padding: 12px 40px;
    background-color: rgb(2, 103, 66);
    color: #fff;
    font-size: 17px;
    border: none;
    border-radius: 3px;
  }

Barcode Generator JavaScript Code

Now we need to arrange some JavaScript to activate the barcode generator. The jsbarcode js cdn link is used to activate the generator.

document.getElementById("btn").addEventListener("click", () => {
  let text = document.getElementById("text").value;
  JsBarcode("#barcode", text);
});

Hopefully you have been able to create this simple Barcode Generator using the above code.

If there is any problem, please comment. You can download all the code of this JavaScript Barcode Generator by this link.

DEV Community: Ground Tutorial

Simple Barcode Generator Using JavaScript (Free Code)

JavaScript Barcode Generator

Barcode Generator HTML Code

CSS Code of Barcode Generator

Barcode Generator JavaScript Code