Simulação de sistema bancário armazenando dados localmente no dispositivo feito com html css e javascript JSON
CÓDIGO FONTE :
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Controle de despesas</title>
<style>
/*@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');*/
:root {
--box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
* {
box-sizing: border-box;
color: #ffffff;
}
body {
background-color: #202033;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'Lato', sans-serif;
}
.container {
margin: 0px auto;
width: 80%;
}
.mai{
position: relative;
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
}
.form-control{
background-color: #38364b;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
border-radius: 20px;
}
.form1{
position: relative;
background-color: #38364b;
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 100%;
border-radius: 20px;
}
#text,#amount{
width: 300px;
display: flex;
}
h1 {
letter-spacing: 1px;
margin: 0;
color: #2e75cc;
}
h3 {
border-bottom: 1px solid #bbb;
padding-bottom: 10px;
margin: 20px 0 10px;
}
h4 {
margin: 0;
text-transform: uppercase;
}
.inc-exp-container{
background-color:#38364b;
box-shadow: var(--box-shadow);
padding: 30px;
display: flex;
justify-content: space-between;
margin: 10px 0;
width: 50%;
}
.inc-exp-container > div {
flex: 1;
text-align: center;
}
.inc-exp-container,mai > div:first-of-type {
border-right: 1px solid #dedede;
}
.money {
font-size: 20px;
letter-spacing: 1px;
margin: 5px 0;
}
.money.plus {
color: #2ecc71;
}
.money.minus {
color: #c0392b;
}
label {
display: inline-block;
margin: 10px 0;
}
input[type='text'],
input[type='number'] {
border: 1px solid #222224;
border-radius: 2px;
display: block;
font-size: 16px;
padding: 10px;
width: 100%;
background:#38364b;
outline: none;
border-radius: 20px;
}
.btn {
cursor: pointer;
background-color: #9c88ff;
box-shadow: var(--box-shadow);
color: #fff;
border: 0;
display: block;
font-size: 16px;
margin: 10px 0 20px;
padding: 10px;
width: 100%;
border-radius: 20px;
}
.btn:hover{
box-shadow: rgb(73, 75, 94) 1px 1px 5px;
}
.btn:focus,
.delete-btn:focus {
outline: 0;
}
.transactions {
list-style-type: none;
padding: 0;
margin-bottom: 40px;
}
.transactions li {
background-color: #fff;
box-shadow: var(--box-shadow);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
}
.transactions li.plus {
border-right: 5px solid #00ff6a;
}
.transactions li.minus {
border-right: 5px solid #c0392b;
}
.delete-btn {
cursor: pointer;
background-color: #e74c3c;
border: 0;
color: #fff;
font-size: 20px;
line-height: 20px;
padding: 2px 5px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.transactions li:hover .delete-btn {
opacity: 1;
}
</style>
</head>
<body>
<h2>Controle de despesas</h2>
<div class="container">
<h4>Saldo atual</h4>
<h1 id="balance" class="balance">KZ 0.00</h1>
<div class="mai"><!--#####################1-->
<div class="inc-exp-container">
<div>
<h4>Receitas</h4>
<p id="money-plus" class="money plus">+KZ0.00</p>
</div>
<div>
<h4>Despesas</h4>
<p id="money-minus" class="money minus">-KZ0.00</p>
</div>
</div>
</div><!--#####################1-->
<h3>Transações</h3>
<br>
<ul id="transactions" class="transactions"> </ul>
<h3>Adicionar transação</h3>
<form id="form" >
<div class="form1"><!--#####################2-->
<div class="form-control">
<label for="text">Nome </label>
<input autofocus type="text" id="text" placeholder="Nome da transação" />
</div>
<div class="form-control">
<label for="amount">Valor </label>
<input type="number" id="amount" placeholder="Valor da transação" />
</div>
</div><!--##################### 2-->
<button class="btn">Adicionar</button>
</form>
</div>
<script>
const transactionUl = document.querySelector('#transactions')
const incomeDisplay = document.querySelector('#money-plus')
const expenseDisplay = document.querySelector('#money-minus')
const balanceDisplay = document.querySelector('#balance')
const form = document.querySelector('#form')
const inputTransactionNome = document.querySelector('#text')
const inputTransactionAmount = document.querySelector('#amount')
/*let transactions =
[
{ id: 1, nome: 'bolo de brigadeiro', amount: -20 },
{ id: 2, nome: 'salário ', amount: 300 },
{ id: 3, nome: 'torta de frango', amount: -10 },
{ id: 4, nome: 'violão', amount: 150 }
]
*/
const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'))
let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions:[]
const removeTransaction = ID =>
{
transactions = transactions.filter(transaction => transaction.id !== ID)
updateLocalStorage()
init()
}
const addTransactionIntDOM = transaction =>
{
const operator = transaction.amount < 0 ? '-' : '+'
const CSSClass = transaction.amount < 0 ? 'minus' : 'plus'
const amountWithouOperator = Math.abs(transaction.amount)
const li = document.createElement('li')
li.classList.add(CSSClass)
li.innerHTML = `
${transaction.nome} <span style="color: black;">${operator} kz ${amountWithouOperator}</span>
<button class="delete-btn" onclick="removeTransaction(${transaction.id})" >x</button>
`
transactionUl.prepend(li)
}
const updateBalanceValue = () =>
{
const transactionAmounts = transactions.map(transaction => transaction.amount)
const total = transactionAmounts.reduce((accumulator, transaction) => accumulator + transaction,0).toFixed(2)
const income = transactionAmounts.filter(value => value > 0).reduce((accumulator, value) => accumulator + value, 0).toFixed(2)
const expense = transactionAmounts.filter(value => value < 0).reduce((accumulator, value) => accumulator + value, 0).toFixed(2)
balanceDisplay.textContent = `KZ ${total}`
incomeDisplay.textContent = `KZ ${income}`
expenseDisplay.textContent = `KZ ${Math.abs(expense)}`
}
const init = () =>
{
transactionUl.innerHTML = ' '
transactions.forEach(addTransactionIntDOM)
updateBalanceValue()
}
init()
const updateLocalStorage = () =>
{
localStorage.setItem('transactions', JSON.stringify(transactions))
}
const generateID = () =>Math.round(Math.random() * 1000)
form.addEventListener('submit', event =>
{
event.preventDefault()
const transictionNome = inputTransactionNome.value.trim()
const transictionAmount = inputTransactionAmount.value.trim()
if ( transictionNome === '' || transictionAmount === '')
{
return
}
const transaction = { id: generateID(), nome: transictionNome, amount: Number(transictionAmount)}
transactions.push(transaction)
init()
updateLocalStorage()
inputTransactionAmount.value = ''
inputTransactionNome.value = ''
})
</script>
</body>
</html>
0 Comentários