How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text ||

#CODE :

       

        Barcode.html ==>  

    <html>

       <head>

           <title>Barcode Generator</title>

           <link rel="stylesheet" href="Barcode.css">

    </head>

    <body>

        <div>Barcode Generator</div>

        <input type="text" placeholder="Type..."/>

        <button onclick="generate()">Generate Barcode</button>

          <svg id="barcode"></svg>

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>

          <script>

              JsBarcode("#barcode","#Hello",{

                  background:"#161748",

                  lineColor:"#ffffff"

              });

              function generate(){

                  var val = document.querySelector("input").value;

                  if(val==""){

                      val="Hello!"

                  }

                  JsBarcode("#barcode",val,{

                    background:"#161748",

                  lineColor:"#ffffff"

                  });

              }

          </script>

    </body>

</html>

  

 Barcode.css ==>

body{

    margin:0;

    padding: 0;

    background-color: #161748;

}

div{

    width: 100%;

    text-align: center;

    margin-top: 20px;

    font-weight: 800;

    font-size: 33px;

    color: white;

}

input{

    padding: 8px 4px 8px 4px;

    font-size: 16px;

    border: none;

    background-color: transparent;

    color: #fff;

    border-bottom: 1px solid #448aff;

    display: block;

    margin-left: auto;

    margin-right: auto;

    margin-top: 50px;

    margin-bottom: 30px;

    outline: none;

}

button{

    display: block;

    margin-left: auto;

    margin-right: auto;

    border-radius: 4px;

    padding: 8px 26px;

    background-color: #f95d9b;

    color: white;

    border: none;

    text-align: center;

    margin-top: 8px;

    margin-bottom: 30px;

    user-select: none;

    outline: none;

}

button:active{

    transform: scale(0.9);

}

svg{

    display: block;

    margin-left: auto;

    margin-right: auto;

}

#OUTPUT: