<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39&family=Libre+Barcode+128&family=Libre+Barcode+39+Text&display=swap" rel="stylesheet">
<div class="container">
<div class="header">
<h1>Barcode Font Generator</h1>
<p>Generate barcode-style text with different fonts</p>
</div>
<div class="input-section">
<div class="input-group">
<label for="textInput">Enter Text or Number</label>
<input type="text" id="textInput" placeholder="Enter text to convert to barcode style..." maxlength="50">
</div>
<div class="input-group">
<label>Select Barcode Font Style</label>
<div class="font-selector">
<label class="font-option active">
<input type="radio" name="font" value="barcode-39" checked>
<div class="font-name">Barcode 39</div>
<div class="font-preview-small barcode-39">*ABC123*</div>
</label>
<label class="font-option">
<input type="radio" name="font" value="barcode-128">
<div class="font-name">Barcode 128</div>
<div class="font-preview-small barcode-128">ABC123</div>
</label>
<label class="font-option">
<input type="radio" name="font" value="barcode-39-text">
<div class="font-name">Barcode 39 Text</div>
<div class="font-preview-small barcode-39-text">*ABC123*</div>
</label>
</div>
</div>
<button class="generate-btn" id="generateBtn">Generate Barcode</button>
</div>
<div class="output-section" id="outputSection">
<div class="barcode-display">
<div class="barcode-text" id="barcodeOutput"></div>
<div class="human-readable" id="humanReadable"></div>
</div>
<div class="actions">
<button class="action-btn" id="copyBtn">📋 Copy Text</button>
<button class="action-btn" id="downloadBtn">💾 Download Image</button>
</div>
<div class="info-box">
<h3>📌 Tips for Best Results:</h3>
<ul>
<li><strong>Barcode 39:</strong> Wrap text with asterisks (*TEXT*) for proper format</li>
<li><strong>Barcode 128:</strong> Works best with alphanumeric characters</li>
<li><strong>Barcode 39 Text:</strong> Shows human-readable text below bars</li>
<li>Use uppercase letters for better readability</li>
<li>Avoid special characters for cleaner output</li>
</ul>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #fca311 0%, #cc8308 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
max-width: 800px;
width: 100%;
padding: 40px;
}
.header {
text-align: center;
margin-bottom: 35px;
}
.header h1 {
color: #fca311;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 10px;
}
.header p {
color: #666;
font-size: 1rem;
}
.input-section {
margin-bottom: 30px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
color: #333;
font-weight: 600;
margin-bottom: 10px;
font-size: 0.95rem;
}
input[type="text"] {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
input[type="text"]:focus {
border-color: #fca311;
box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.1);
}
.font-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.font-option {
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
background: white;
}
.font-option:hover {
border-color: #fca311;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(252, 163, 17, 0.2);
}
.font-option.active {
border-color: #fca311;
background: linear-gradient(135deg, #fff8eb 0%, #ffe5b8 100%);
}
.font-option input[type="radio"] {
display: none;
}
.font-name {
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.font-preview-small {
font-size: 1.5rem;
color: #fca311;
margin-top: 5px;
}
.generate-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #fca311 0%, #cc8308 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(252, 163, 17, 0.4);
}
.generate-btn:active {
transform: translateY(0);
}
.output-section {
margin-top: 35px;
padding: 30px;
background: linear-gradient(135deg, #fff8eb 0%, #ffe5b8 100%);
border-radius: 15px;
border: 3px solid #fca311;
display: none;
}
.output-section.show {
display: block;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.barcode-display {
background: white;
padding: 40px 20px;
border-radius: 10px;
text-align: center;
margin-bottom: 20px;
overflow-x: auto;
}
.barcode-text {
font-size: 4rem;
line-height: 1.2;
color: #000;
word-break: break-all;
}
.barcode-39 {
font-family: 'Libre Barcode 39', cursive;
}
.barcode-128 {
font-family: 'Libre Barcode 128', cursive;
}
.barcode-39-text {
font-family: 'Libre Barcode 39 Text', cursive;
}
.human-readable {
margin-top: 15px;
font-size: 1rem;
color: #666;
font-family: 'Courier New', monospace;
letter-spacing: 2px;
}
.actions {
display: flex;
gap: 15px;
justify-content: center;
}
.action-btn {
padding: 12px 25px;
background: #fca311;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.action-btn:hover {
background: #cc8308;
transform: translateY(-2px);
}
.info-box {
margin-top: 25px;
padding: 20px;
background: white;
border-radius: 10px;
border-left: 4px solid #fca311;
}
.info-box h3 {
color: #fca311;
margin-bottom: 10px;
font-size: 1rem;
}
.info-box ul {
margin-left: 20px;
color: #666;
font-size: 0.9rem;
line-height: 1.8;
}
@media (max-width: 600px) {
.container {
padding: 25px;
}
.header h1 {
font-size: 1.8rem;
}
.barcode-text {
font-size: 2.5rem;
}
.actions {
flex-direction: column;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
const textInput = document.getElementById('textInput');
const generateBtn = document.getElementById('generateBtn');
const outputSection = document.getElementById('outputSection');
const barcodeOutput = document.getElementById('barcodeOutput');
const humanReadable = document.getElementById('humanReadable');
const copyBtn = document.getElementById('copyBtn');
const downloadBtn = document.getElementById('downloadBtn');
const fontOptions = document.querySelectorAll('.font-option');
let selectedFont = 'barcode-39';
// Font selection
fontOptions.forEach(option => {
option.addEventListener('click', () => {
fontOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
selectedFont = option.querySelector('input').value;
});
});
// Generate barcode
generateBtn.addEventListener('click', () => {
const text = textInput.value.trim();
if (!text) {
alert('Please enter some text to generate barcode');
return;
}
let formattedText = text.toUpperCase();
// Add asterisks for Code 39 if not present
if ((selectedFont === 'barcode-39' || selectedFont === 'barcode-39-text') &&
!formattedText.startsWith('*')) {
formattedText = '*' + formattedText + '*';
}
barcodeOutput.className = 'barcode-text ' + selectedFont;
barcodeOutput.textContent = formattedText;
humanReadable.textContent = text;
outputSection.classList.add('show');
});
// Copy to clipboard
copyBtn.addEventListener('click', () => {
const textToCopy = barcodeOutput.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '✅ Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalText;
}, 2000);
});
});
// Download as image
downloadBtn.addEventListener('click', () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const text = barcodeOutput.textContent;
canvas.width = 1000;
canvas.height = 300;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.font = '80px "' + barcodeOutput.style.fontFamily + '"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
const link = document.createElement('a');
link.download = 'barcode.png';
link.href = canvas.toDataURL();
link.click();
});
// Enter key support
textInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
generateBtn.click();
}
});
No comments yet. Be the first!