Skip to main content

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:


                                                        














Labels:

Comments

Post a Comment

The Most Populer

SideBar PLUS Icon with animation

SideBar PLUS Icon with Animation || POP UP icon Box || Icon Interaction in HTML                      Here is the best code for pop up icon box with the animation effect. These icons will be use in the many website for users attraction. Do the code now..! #CODE : --     <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             * {     margin: 0;     padding: 0;     box-sizing: border-box; } body {     display: flex;     justify-content: center;     align-items: center;     min-height: 100vh;     --light-color: #f8f9fd;     background: #FF6347; } .container {     position: relative;     display: flex;     flex-wrap: wrap; ...
Post a Comment
Read more

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more