Creating a Code 39 Barcode using HTML, CSS, and JavaScript

Barcodes are ubiquitous in modern life, used for inventory management, product identification, and more. Code 39 is one of the most widely used barcode symbologies due to its simplicity and versatility. In this blog post, we'll explore how to create a Code 39 barcode using HTML, CSS, and JavaScript. This approach allows you to generate barcodes directly in the browser, making it suitable for web-based applications.

Table of Contents#

  1. What is Code 39 Barcode?
  2. Fundamental Concepts of Creating a Code 39 Barcode
  3. Usage Methods
  4. Common Practices
  5. Best Practices
  6. Code Examples
  7. Conclusion
  8. References

What is Code 39 Barcode?#

Code 39 is a variable-length, discrete barcode symbology. It can encode uppercase letters (A - Z), digits (0 - 9), and a few special characters such as -, ., $, /, +, %, and space. Each character in the Code 39 barcode is represented by a series of bars and spaces of varying widths. The barcode always starts and ends with an asterisk (*).

Fundamental Concepts of Creating a Code 39 Barcode#

Encoding#

The first step in creating a Code 39 barcode is to encode the input data. Each character has a corresponding pattern of wide and narrow bars and spaces. For example, the digit 0 is represented by the pattern NnNwWnWnN where N stands for a narrow bar or space and W stands for a wide bar or space.

Rendering#

After encoding the data, we need to render the barcode on the web page. We can use HTML to create the structure, CSS to style the bars and spaces, and JavaScript to generate the barcode based on the input data.

Usage Methods#

Input Data#

The user needs to provide the data to be encoded. This data should only contain characters that are supported by the Code 39 symbology.

Generating the Barcode#

The JavaScript code will take the input data, encode it, and then create HTML elements representing the bars and spaces of the barcode. The CSS will then style these elements to make them visible as a barcode.

Common Practices#

Error Handling#

It's important to handle errors when the input data contains unsupported characters. You can display an error message to the user and prevent the barcode from being generated.

Styling#

Use CSS to style the barcode to make it look presentable. You can adjust the width, height, and color of the bars and spaces.

Best Practices#

Performance#

Minimize the use of DOM manipulation in JavaScript as it can be slow. Instead, generate the HTML string in JavaScript and then insert it into the DOM at once.

Accessibility#

Add alternative text to the barcode image for users who use screen readers. This can be done by adding an alt attribute to the HTML element representing the barcode.

Code Examples#

HTML#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <title>Code 39 Barcode Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body>
    <input type="text" id="inputData" placeholder="Enter data to encode">
    <button onclick="generateBarcode()">Generate Barcode</button>
    <div id="barcode"></div>
    <script src="script.js"></script>
</body>
 
</html>

CSS (styles.css)#

.bar {
    display: inline - block;
    background - color: black;
    margin - right: 1px;
}

JavaScript (script.js)#

// Code 39 character encoding patterns
const code39Map = {
    '0': 'NnNwWnWnN',
    '1': 'WnNwNnNnW',
    '2': 'NnWwNnNnW',
    //... other characters mapping
    '*': 'NnWnWnWnN'
};
 
function generateBarcode() {
    const input = document.getElementById('inputData').value;
    const barcodeDiv = document.getElementById('barcode');
    let encodedData = '*' + input + '*';
    let barcodeHTML = '';
 
    for (let i = 0; i < encodedData.length; i++) {
        const char = encodedData[i];
        if (!code39Map[char]) {
            alert('Invalid character in input data');
            return;
        }
        const pattern = code39Map[char];
        for (let j = 0; j < pattern.length; j++) {
            const width = pattern[j] === 'W'? 3 : 1;
            if (j % 2 === 0) {
                barcodeHTML += `<div class="bar" style="width: ${width}px;"></div>`;
            }
        }
    }
 
    barcodeDiv.innerHTML = barcodeHTML;
}

Conclusion#

Creating a Code 39 barcode using HTML, CSS, and JavaScript is a practical way to generate barcodes in web-based applications. By understanding the fundamental concepts, following common and best practices, and using the provided code examples, you can easily implement a barcode generator in your project. This approach offers flexibility and the ability to customize the appearance of the barcode according to your needs.

References#

2025-10