Gerador de Código de Barras:
Aprenda a construir um gerador de código de barras com este tutorial passo a passo.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 3 linguagens: HTML, CSS e JavaScript.
Este projeto consiste em um Sistema que gera códigos de barras e ainda pode baixar.
Veja o Gerador de Código de Barras em funcionamento neste link. Gerador de Código de Barras.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href="style.css">
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<title>Gerador de Código de Barras</title>
</head>
<body>
<div class="main">
<div class="container">
<h1>Gerador de Código de Barras</h1>
<input id="barcodeValue" type="text" placeholder="Digite um Valor para o Código">
<button id="generateBarcode" onclick="generateBarcode()">Gerar</button>
<div id="barcode">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #F0FFF0;
}
.main {
width: 80vw;
background-color: #00CED1;
padding: 40px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container > h1 {
font-size: 30px;
}
.container > input {
border: none;
background-color: transparent;
border-bottom: 1px solid;
margin: 20px;
width: 400px;
text-align: center;
outline: none;
padding: 5px;
font-size: 20px;
}
.container > button {
padding: 5px;
font-size: 20px;
width: 200px;
border-radius: 5px;
border: none;
background-color: gold;
cursor: pointer;
}
.container > button:hover {
background-color: #F0FFF0;
}
h1 {
text-align: center;
}
#barcode {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#barcode > svg {
margin: 20px;
}
#barcode > button {
padding: 5px;
font-size: 15px;
width: 180px;
border-radius: 5px;
border: none;
background-color: #228B22;
color: white;
cursor: pointer;
}
#barcode > button:hover {
background-color: #F0FFF0;
color: black;
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function generateBarcode() {
let barcodeValue = document
.getElementById('barcodeValue')
.value;
document.getElementById('barcode')
.innerHTML = "";
let svgElement = document
.createElementNS(
"http://www.w3.org/2000/svg", "svg"
);
let downloadButton = document
.createElement("button");
downloadButton.innerHTML = "Download";
downloadButton.setAttribute("id",
"downloadButton");
document.getElementById('barcode')
.appendChild(svgElement);
document.getElementById('barcode')
.appendChild(downloadButton);
JsBarcode(svgElement, barcodeValue, {
format: "CODE128",
displayValue: true
});
downloadButton.addEventListener(
"click",
function() {
downloadBarcode(barcodeValue);
});
}
function downloadBarcode(
barcodeValue) {
let svgContent = document
.getElementById('barcode')
.getElementsByTagName('svg')[0]
.outerHTML;
let dataUri =
'data:image/svg+xml;base64,' + btoa(
svgContent);
let link = document.createElement(
'a');
link.href = dataUri;
link.download = 'barcode_' +
barcodeValue + '.svg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Comentários
Postar um comentário
Obrigado pelo seu feedback!