Features
User Input:
- Text input field for entering barcode content
- Supports both numbers and text
Barcode Generation:
- Uses JsBarcode library to generate CODE128 format barcodes
- Displays the barcode in SVG format
- Shows the input text below the barcode
Download Functionality:
- Converts SVG to PNG for download
- Generates a filename based on the input text
- Uses canvas to render the PNG
Responsive Design:
- Works on mobile and desktop devices
- Buttons stack vertically on small screens
- Clean, centered layout
User Experience:
- Instant feedback when generating barcodes
- Clear instructions
- Error handling for invalid input
- Modern styling with Poppins font
The code includes all necessary CDN links for JsBarcode and canvg (for SVG to PNG conversion). The interface is clean, intuitive, and follows modern web design principles.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 100%;
max-width: 600px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
font-weight: 600;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
input[type="text"] {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus {
border-color: #4CAF50;
outline: none;
}
.button-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
button {
flex: 1;
padding: 12px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
#generateBtn {
background-color: #4CAF50;
color: white;
}
#generateBtn:hover {
background-color: #45a049;
}
#downloadBtn {
background-color: #2196F3;
color: white;
display: none;
}
#downloadBtn:hover {
background-color: #0b7dda;
}
.barcode-container {
margin-top: 20px;
padding: 20px;
border: 1px dashed #ddd;
border-radius: 5px;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
#barcode {
max-width: 100%;
height: auto;
}
.instructions {
margin-top: 20px;
color: #666;
font-size: 14px;
text-align: left;
}
@media (max-width: 480px) {
.button-group {
flex-direction: column;
}
button {
width: 100%;
}
}
document.addEventListener('DOMContentLoaded', function() {
const barcodeText = document.getElementById('barcodeText');
const generateBtn = document.getElementById('generateBtn');
const downloadBtn = document.getElementById('downloadBtn');
const barcodeSvg = document.getElementById('barcode');
// Generate barcode on page load
generateBarcode();
// Generate barcode when button is clicked
generateBtn.addEventListener('click', generateBarcode);
// Generate barcode when Enter key is pressed
barcodeText.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
generateBarcode();
}
});
// Download barcode as PNG
downloadBtn.addEventListener('click', downloadBarcode);
function generateBarcode() {
const text = barcodeText.value.trim();
if (!text) {
alert('Please enter some text to generate a barcode');
return;
}
try {
JsBarcode(barcodeSvg, text, {
format: "CODE128",
lineColor: "#000000",
width: 2,
height: 100,
displayValue: true,
fontSize: 16,
margin: 10
});
downloadBtn.style.display = 'block';
} catch (e) {
alert('Error generating barcode: ' + e.message);
console.error(e);
}
}
function downloadBarcode() {
const svg = document.getElementById('barcode');
const svgData = new XMLSerializer().serializeToString(svg);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
try {
const pngFile = canvas.toDataURL('image/png');
const downloadLink = document.createElement('a');
const fileName = 'barcode_' + barcodeText.value.trim().substring(0, 20) + '.png';
downloadLink.download = fileName;
downloadLink.href = pngFile;
downloadLink.click();
} catch (e) {
alert('Error generating PNG: ' + e.message);
console.error(e);
}
};
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
}
});
Post a Comment
Thank you
Learning robo team