datalog
How to run it?
Hello sir, I've been searching for something like this and I'm thrilled to have found it. Thank you so much! As a newcomer to coding, I tried searching on Google for instructions on running a JS code, but I'm having difficulty. Could you please help me with running this data matrix code generator? I would greatly appreciate your assistance. Thank you in advance!
Hello @ZAWYED, what's up? I just implemented it, it's actually pretty simple to use. Take a look at the example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datamatrix test</title>
</head>
<body>
<div id="datamatrix-container">
</div>
<p>Your content...</p>
<!-- Remember import datamatrix script before your scripts -->
<script src="datamatrix.min.js"></script>
<script>
const datamatrixContainer = document.querySelector("#datamatrix-container");
const datamatrixNode = DATAMatrix("1234");
datamatrixContainer.appendChild(datamatrixNode);
</script>
</body>
</html>
The DATAMatrix function returns an svg Element that you can use for any purpose. In the previous example I simply created a datamatrix and displayed it inside the div with the id "datamatrix-container".
Don't forget to download datamatrix.min.js and place it in the correct folder.
@ZAWYED - What exactly are you trying to accomplish? Here's a remix of @0horaa 's reply that adds an input textarea, button, and event listener, if that helps out any.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datamatrix test</title>
</head>
<body>
<div id="datamatrix-container"></div>
<textarea id="input-string">Text to Encode</textarea>
<button type="button" id="encode">Encode</button>
<!-- Remember import datamatrix script before your scripts -->
<script src="https://cdn.jsdelivr.net/gh/datalog/datamatrix-svg@latest/datamatrix.min.js"></script>
<script>
document.querySelector('#encode').addEventListener('click', () => {
const datamatrixContainer = document.querySelector('#datamatrix-container');
const string = document.querySelector('#input-string').value;
const datamatrixNode = DATAMatrix(string);
datamatrixContainer.appendChild(datamatrixNode);
});
</script>
</body>
</html>
