Neste tutorial, vamos criar um Simulador de Caixa Eletrônico utilizando tecnologias web básicas: HTML, CSS e JavaScript. Este projeto simula as operações de um caixa eletrônico real, como autenticação com senha, depósitos, saques, consulta de saldo e histórico de transações.
Veja o projeto em funcionamento neste link. Simulador de Caixa Eletrônico.
Veja o vídeo no YouTube:
1. Estrutura do Projeto
Crie uma estrutura básica para o seu projeto. Organize os arquivos como abaixo:
simulador-caixa-eletronico/ │ ├── index.html (Estrutura da aplicação) ├── styles.css (Estilos para o design) └── script.js (Lógica da aplicação)
2. Desenvolvendo o HTML
O arquivo index.html é responsável pela estrutura básica da aplicação. Ele define o layout das telas de login, transações e exibição de saldo.
Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulador de Caixa Eletrônico</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="atm-container">
<h1>Caixa Eletrônico</h1>
<div id="login-screen">
<input type="password" id="password" placeholder="Digite sua senha">
<button onclick="login()">Entrar</button>
<p id="login-message"></p>
</div>
<div id="atm-screen" style="display: none;">
<div id="balance-display">Saldo: R$ <span id="balance">0.00</span></div>
<input type="number" id="amount" placeholder="Digite o valor">
<button onclick="deposit()">Depositar</button>
<button onclick="withdraw()">Sacar</button>
<button onclick="checkBalance()">Consultar Saldo</button>
<button onclick="showHistory()">Ver Histórico</button>
<button onclick="logout()">Sair</button>
<p id="message"></p>
<div id="transaction-history" style="display: none;">
<h2>Histórico de Transações</h2>
<ul id="history-list"></ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
3. Estilizando com CSS
O arquivo styles.css cuida do design do simulador, tornando-o visualmente mais realista e agradável.
Código:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #d3d3d3;
}
.atm-container {
background-color: #f5f5f5;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.2);
text-align: center;
width: 340px;
max-width: 100%;
}
h1 {
color: #333;
font-size: 1.8em;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
#balance-display {
background-color: #333;
color: #fff;
padding: 15px;
border-radius: 10px;
margin-bottom: 25px;
font-size: 1.3em;
font-weight: bold;
}
input[type="number"],
input[type="password"] {
width: 80%;
padding: 12px;
margin: 10px 0;
border-radius: 8px;
border: 1px solid #bbb;
font-size: 1em;
}
button {
width: 80%;
padding: 12px;
margin-top: 10px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
color: #fff;
}
button:nth-child(1) {
background-color: #007bff;
}
button:nth-child(2) {
background-color: #28a745;
}
button:nth-child(3) {
background-color: #dc3545;
}
button:nth-child(4) {
background-color: #ffc107;
}
button:nth-child(5) {
background-color: #6c757d;
}
button:nth-child(6) {
background-color: #343a40;
}
button:hover {
opacity: 0.9;
}
#message,
#login-message {
margin-top: 20px;
color: #dc3545;
font-weight: bold;
}
#transaction-history {
margin-top: 20px;
text-align: left;
color: #333;
}
#history-list {
list-style-type: none;
padding: 0;
}
#history-list li {
padding: 8px;
margin: 5px 0;
background-color: #e9ecef;
border-radius: 5px;
font-size: 0.9em;
}
4. Criando a Lógica com JavaScript
O arquivo script.js contém a lógica principal do simulador, gerenciando o saldo, as transações e a autenticação.
Código:
let balance = 0;
let transactionHistory = [];
let dailyWithdrawLimit = 1000;
let dailyWithdrawn = 0;
const correctPassword = "1234";
function login() {
const password = document.getElementById("password").value;
if (password === correctPassword) {
document.getElementById("login-screen").style.display = "none";
document.getElementById("atm-screen").style.display = "block";
showMessage("Bem-vindo!", false);
} else {
showLoginMessage("Senha incorreta. Tente novamente.");
}
}
function logout() {
document.getElementById("login-screen").style.display = "block";
document.getElementById("atm-screen").style.display = "none";
document.getElementById("password").value = "";
showMessage("", false);
}
function deposit() {
const amount = parseFloat(document.getElementById("amount").value);
if (isNaN(amount) || amount <= 0) {
showMessage("Por favor, insira um valor válido para depósito.");
return;
}
balance += amount;
updateBalance();
addTransaction("Depósito", amount);
showMessage(`Depósito de R$ ${amount.toFixed(2)} realizado com sucesso!`);
}
function withdraw() {
const amount = parseFloat(document.getElementById("amount").value);
if (isNaN(amount) || amount <= 0) {
showMessage("Por favor, insira um valor válido para saque.");
return;
}
if (amount > balance) {
showMessage("Saldo insuficiente para essa operação.");
return;
}
if (dailyWithdrawn + amount > dailyWithdrawLimit) {
showMessage("Limite diário de saque excedido.");
return;
}
balance -= amount;
dailyWithdrawn += amount;
updateBalance();
addTransaction("Saque", amount);
showMessage(`Saque de R$ ${amount.toFixed(2)} realizado com sucesso!`);
}
function checkBalance() {
showMessage(`Seu saldo atual é R$ ${balance.toFixed(2)}`);
}
function updateBalance() {
document.getElementById("balance").textContent = balance.toFixed(2);
}
function addTransaction(type, amount) {
const now = new Date();
transactionHistory.push({
type: type,
amount: amount,
date: now.toLocaleString()
});
}
function showHistory() {
const historyList = document.getElementById("history-list");
historyList.innerHTML = "";
transactionHistory.forEach(transaction => {
const listItem = document.createElement("li");
listItem.textContent = `${transaction.date} - ${transaction.type}: R$ ${transaction.amount.toFixed(2)}`;
historyList.appendChild(listItem);
});
document.getElementById("transaction-history").style.display = "block";
}
function showMessage(message, isError = true) {
const messageElement = document.getElementById("message");
messageElement.textContent = message;
messageElement.style.color = isError ? "#dc3545" : "#28a745";
}
function showLoginMessage(message) {
const loginMessageElement = document.getElementById("login-message");
loginMessageElement.textContent = message;
}
5. Testando o Simulador
Abra o arquivo index.html no navegador e teste todas as funcionalidades:
- Faça login com a senha 1234.
- Teste operações de depósito e saque.
- Consulte o saldo e veja o histórico de transações.
- Use a opção de logout para encerrar a sessão.
6. Personalizações
- Altere a senha padrão no arquivo
script.jspara personalizar o simulador.
- Adicione validações adicionais, como limites de depósito e saque.
- Experimente integrar uma API para registrar as transações em um banco de dados real.
Se preferir, os códigos estão no meu Repositório no GitHub.
Com isso, você tem um simulador funcional e esteticamente agradável! Use-o como base para explorar mais funcionalidades ou para ensinar conceitos de programação a iniciantes.
Comentários
Postar um comentário
Obrigado pelo seu feedback!