jhass/barcode.html

## barcode.html
<!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>
	<!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>