JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS Barcode</title>
        <link rel="stylesheet" href="./custom.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    </head>
    <body>
        <div class="holder">
            <div id="red-strike"></div>
            <div id="upc-a">
                <div id="upc-wrap">
                    <!--NOTE: the CSS structure is odd due to: http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items -->
                    <!-- begin UPC -->
                    <div 
                    class="m e long"></div><div 
                    class="m o long"></div><div 
                    class="m e long"></div><!--
Quiet Zone
--><div class="l"><!-- 
begin L --><div 
                    
                    id="l1"><div
                    
                    class="m o"></div><div 
                    class="m o"></div><div 
                    class="m o"></div><div 
                    class="m e"></div><div 
                    class="m e"></div><div 
                    class="m o"></div><div 
                    class="m e"><!--

 --></div></div><div 
                id="l2"><div
                
                class="m o"></div><div 
                class="m o"></div><div 
                class="m e"></div><div 
                class="m o"></div><div 
                class="m o"></div><div 
                class="m e"></div><div 
                class="m e"><!--

 --></div></div><div 
                id="l3"><div
                
                class="m o"></div><div 
                class="m o"></div><div 
                class="m o"></div><div 
                class="m e"></div><div 
                class="m e"></div><div 
                class="m o"></div><div 
                class="m e"><!--

 --></div></div><div 
                id="l4"><div
                
               ...

CSS

/* css barcode */
/* by rexfeng 2012 */

html, body {height: 400px;}

body {
    background-color: #fff;
    padding: 1px;
    color: #000;
    font-family: Helvetica, Arial;
}

.holder {
    width: 280px;
    position: relative;
    margin: 30px auto;
}

#query {
    padding: 15px;
    width: 280px;
    background: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #888;
    font-size: 13px;
    margin-top: 30px;
}

#query a {
    text-decoration: none;
    color: blue;
}

#barcodenum {
}

.instructions {
    color: #333;
}

#upc-a {
    background: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 285px;
    padding: 13px;
}

#upc-wrap {
    width: 285px; /* 95 *3 */
    height: 186px; /* 62 *3 */
}

.m { /* module 1px *3 width */
    width: 3px;
    height: 179px;  /* 186 / 244 * 235 = 179px */
    display: inline-block;
    vertical-align: top;
}

.long {
    height: 186px;
}

.o {
    background-color: #fff;
}

.e {
    background-color: #000;
}

.l {
    display: inline-block;
}

.r {
    display: inline-block;
}

.r .o.m {
    background-color: #000;
}

.r .e.m {
    background-color: #fff;
}

#l1, #l2, #l3, #l4, #l5, #l6 {
    display: inline-block;
}

#r1, #r2, #r3, #r4, #r5, #r6 {
    display: inline-block;
}

.digits {
    font-family: monospace, Courier;
    font-size: 2em;
    display: inline;
    position: relative;
    top: -10px;
    letter-spacing: 3px;
}

#l-digits {
    margin-left: 20px;
}

#r-digits {
    margin-left: 24px;
}

#red-strike {
    width: 301px;    
    height: 3px;
    background-color: red;
    position: absolute;
    margin: 100px 30px 0 22px;
}

JavaScript

$(document).ready(function() {
    // css barcode w/ js
    // by rexfeng 2012

    $('#result').hide(); // set initially hidden
    $('#red-strike').hide(); // set initially hidden

    $('input[name=barcodenum]').keyup(function() {
        var bcnum = $('input[name=barcodenum]').val();
        var intcheck = /^\d+$/; // regex only 0-9
        
        if ( (intcheck.test(bcnum)) && (bcnum.length == 11) ) {

            // update graphics for first 11
                var elements = ['l1','l2','l3','l4','l5','l6','r1','r2','r3','r4','r5'];

                jQuery.each(elements, function(i, val) {
                    var code_update = bcnum.substring(i,i+1);
                    var bcx = eval("bc".concat(code_update));
                    $("#" + this).html(bcx);
                });

            // calculate last digit and update

                var bcdigits = bcnum.split('');

                var checksum_s1 = 0; //init odd holder
                var checksum_s2 = 0; //init even holder

                jQuery.each(bcdigits, function(i,val){
                    if(i%2 == 0) {
                        checksum_s1 += parseInt(val);
                    } else {
                        checksum_s2 += parseInt(val);
                    }
                });

                var checksum_s3 = checksum_s1*3 + checksum_s2;

                var s3_string = checksum_s3.toString();
                var s3_last = s3_string.substring(s3_string.length - 1);

                if (s3_last == "0") {
                    $("#r6").html(bc0);
                    var diff = 0;
                } else {
                    var diff = 10 - parseInt(s3_last);
                    var diff_bc = eval("bc".concat(diff));
                    $("#r6").html(diff_bc);
                };

            // update digits displayed
            // by rexfeng 2012
                $('#l-digits').text(bcnum.slice(1,6));
                $('#r-digits').text(bcnum.slice(6,11));

            // toggle hidden...