Skip to content

Instantly share code, notes, and snippets.

@jhass jhass/barcode.html
Last active Feb 12, 2019

Embed
What would you like to do?
Simple Barcode generator
<!DOCTYPE html>
<html>
<head>
<title>Barcode generator</title>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.5.8/JsBarcode.all.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
window.eanHistory = [];
function loadHistory() {
var serializedHistory = localStorage.history;
if (serializedHistory !== undefined) {
eanHistory = JSON.parse(serializedHistory);
}
if (eanHistory.length > 0) {
setEan(eanHistory[0]);
}
}
function updateHistory() {
localStorage.history = JSON.stringify(eanHistory);
$("#history").empty();
eanHistory.forEach(function(item) {
$("#history").append("<li>" + item + "</li>");
});
}
function setEan(ean) {
$("#ean").val(ean);
updateEan(ean);
}
function updateEan(ean) {
ean = ean.trim();
if (ean.length == 0) {
return;
}
if (eanHistory.includes(ean)) {
eanHistory.splice(eanHistory.indexOf(ean), 1);
}
var format = ean.length == 7 || ean.length == 8 ? "EAN8" :
ean.length == 12 || ean.length == 13 ? "EAN13" : "CODE128";
try {
JsBarcode("#barcode", ean, {format: format});
} catch (e) {
console.log(e);
updateHistory();
return;
}
eanHistory.unshift(ean);
if (eanHistory.length > 50) {
eanHistory.splice(50);
}
updateHistory();
}
$(document).ready(function() {
loadHistory();
updateHistory();
$("#ean").on("keyup", function() {
updateEan($(this).val());
});
$("#ean").on("focus", function() {
$(this).select();
});
$("#history").on("click", "li", function() {
setEan($(this).text());
});
});
</script>
<style type="text/css">
#ean {
width: 15em;
margin: 1em auto;
display: block;
text-align: center;
font-size: 2em;
}
#barcode {
margin: 1em auto;
padding: 0.5em;
border: 1px solid black;
display: block;
}
#history {
width: 15em;
font-size: 2em;
margin: 1em auto;
font-size: 2em;
list-style: none;
text-align: center;
cursor: pointer;
line-height: 2em;
padding: 0;
}
</style>
</head>
<body>
<svg id="barcode" />
<input autofocus id="ean" placeholder="EAN" />
<ul id="history"></ul>
</body>
</html>
@brianme84

This comment has been minimized.

Copy link

brianme84 commented Nov 15, 2018

how can i change the font size of the font right under the barcode?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.