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

my profile code by html || shutter animation with hover effect of html-css

                                              My Profile Viewer #CODE :       <!-- Created By Aziz Sobirov --> <!DOCTYPE html> <html>     <head>     <meta name="viewport" content="width=device-width, initial-scale=1" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <title>Img hover</title>         <style type="text/css">           *{     margin:0;     padding:0;    ...
Post a Comment
Read more

Hide Animation with Hover

How to Hide the Text by HTML with the Hover Effect  So, The Html-Css are the one by using you can bring the change. A lots of Design and Animations you can make through coding.      Here, I done with the Hide Text code, In which The text hide with the mouse pointer and with Animation. It also in the categories of MouseMove Operation. Just do it once and expand your knowledge with codoblog. #CODE                                                     <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1" >   <style type="text/css">   body{   margin: 0;   padding: 0;   min-width: 100vh;   width: 100%;   display: flex;   align-items:center;   j...
Post a Comment
Read more

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more