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

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

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     ...
Post a Comment
Read more

Android Logo Design

                    Android Logo Design By Html-Css                                                                                 Here is the code for designing the logo of Android. Design the logo by using programming language like Html and Css. You can simply design the logo, just small code for it. Don't hasitate and start to write it.. CODE :                 <!DOCTYPE html> <html> <head> <title>Android logo</title> <link href="https://fonts.googleapis.com/css2?family=Piedra&display=swap" rel="stylesheet"> <style type="text/css"> body{ background-color: black; } h4{ text-alig...
Post a Comment
Read more