Gerador Placa de Preço:
Descubra como criar um gerador de placas de preço dinâmico com este tutorial passo a passo.
Este projeto consiste em uma sistema que gera placas de preços, ideal para supermercados e etc... O usuário pode preencher os dados e atualizar conforme sua necessidade, no final você terá uma placa de preço linda e funcional, depois da placa gerada você pode baixar a placa no formato PNG.
Este é um projeto de código aberto onde qualquer pessoa pode modificar, fazer melhorias. por fim este projeto usa somente as linguagens HTML, CSS e JavaScript.
Veja o Gerador de Placas de Preço em funcionamento neste link. Gerador de Placas de Preço.
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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Placas de Preço</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="pricePlate" class="price-plate">
<div id="promoText" class="promo">PROMOÇÃO</div>
<div class="details">
<div id="productTypeText" class="product">ASINHA DE PORCO</div>
<div id="productText" class="highlight">DESTAQUE</div>
<div id="extraText" class="extra">ORELHA DE GALINHA</div>
</div>
<div class="price" id="priceContainer">
<div class="currency">R$:</div>
<div id="priceText" class="amount">10,99</div>
<div id="unitText" class="unit">Kg</div>
</div>
</div>
<div class="form-container">
<form id="priceForm">
<label for="promo">Personalizar:</label>
<select id="promo" name="promo" required>
<option value="PROMOÇÃO">Promoção</option>
<option value="OFERTA">Oferta</option>
</select><br>
<label for="productType">Tipo de Produto:</label>
<input type="text" id="productType" name="productType" placeholder="Ex: Carne Bovina" required><br>
<label for="product">Produto:</label>
<input type="text" id="product" name="product" placeholder="Ex: Rabada" required><br>
<label for="extra">Descrição do Produto:</label>
<input type="text" id="extra" name="extra" placeholder="Ex: Parte Traseira(opcional)" required><br>
<label for="price">Preço:</label>
<input type="text" id="price" name="price" placeholder="Ex: 10,99" required><br>
<label for="unit">Unidade:</label>
<select id="unit" name="unit" required>
<option value="Kg">Kg</option>
<option value="ml">ml</option>
</select><br>
<div class="button-container">
<button type="button" class="button" onclick="updatePricePlate()">Atualizar</button>
<button type="button" class="button" onclick="downloadImage()">Baixar Placa</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.form-container {
margin-top: 20px;
width: 300px;
}
form {
display: flex;
flex-direction: column;
align-items: flex-start;
}
label, input, select {
margin: 5px 0;
}
.button-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background-color: #45a049;
}
.price-plate {
position: relative;
width: 400px;
height: 560px;
text-align: center;
background-color: #ffffff;
padding: 20px;
box-sizing: border-box;
}
.promo {
font-size: 42px;
font-weight: bold;
background-color: red;
color: white;
padding: 10px 0;
margin-bottom: 20px;
border-radius: 20px;
}
.details {
margin-bottom: 20px;
}
.product, .highlight, .extra {
font-size: 38px;
margin: 20px 0;
}
.highlight {
font-weight: bold;
}
.price {
display: flex;
justify-content: center;
align-items: baseline;
background-color: yellow;
padding: 20px;
border-radius: 20px;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 40px);
}
.currency, .unit {
font-size: 32px;
}
.amount {
font-size: 84px;
font-weight: bold;
margin: 0 10px;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function updatePricePlate() {
const promo = document.getElementById('promo').value;
const productType = document.getElementById('productType').value;
const product = document.getElementById('product').value;
const extra = document.getElementById('extra').value;
const price = document.getElementById('price').value;
const unit = document.getElementById('unit').value;
const pricePattern = /^\d{1,3},\d{2}$/;
if (!pricePattern.test(price)) {
alert("Por favor, insira o preço no formato 99,99");
return;
}
document.getElementById('promoText').textContent = promo;
document.getElementById('productTypeText').textContent = productType;
document.getElementById('productText').textContent = product;
document.getElementById('extraText').textContent = extra;
document.getElementById('priceText').textContent = price;
document.getElementById('unitText').textContent = unit;
}
function downloadImage() {
html2canvas(document.getElementById('pricePlate')).then(canvas => {
let link = document.createElement('a');
link.download = 'placa_de_preco.png';
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}).catch(err => {
console.error("Erro ao gerar a imagem: ", err);
});
}
4° Passo: Testar o Projeto!
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!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!