Skip to content

Revert "Added local Storage to form data" #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TeriJacobs merged 1 commit into from
Jul 30, 2022
Merged

Revert "Added local Storage to form data" #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 27 additions & 34 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,36 +100,29 @@ <h4 class="welcome-message" style="margin-left:0">Welcome to your Expense Tracke
<div class="row mb-2 ml-2">
<h4 class="text-muted text-uppercase small">All Transactions</h4>
</div>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Type</th>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody class="tbody container movements container-movements card-body pt-0">
<tr class="table-row-height">
<th scope="row">1</th>
<td class="col movements-type movements-type-deposit">Income</td>
<td class="col movements-date">2 Jan</td>
<td class="col movements-category">Income</td>
<td class="col movements-value">R 500</td>
</tr>
<tr class="table-row-height">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="table-row-height">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="container">
<div class="row thead-dark">
<div class="col-md-2 offset-md-3">Category</div>
<div class="col-md-3 offset-md-1 transaction-header">Date</div>
<div class="col-md-3 transaction-header">Amount</div>
</div>
</div>
<div class="container movements container-movements card-body pt-0">
<div class="card-widget-body h-100">
<div class="row my-1">
<div class="col movements-type movements-type-deposit">2 deposit</div>
<div class="col movements-date">3 days ago</div>
<div class="col movements-category">Food</div>
<div class="col movements-value">R4 000</div>
</div>
<div class="row my-1">
<div class="col movements-type movements-type--withdrawal">1 withdrawal</div>
<div class="col movements-date">24/01/2037</div>
<div class="col movements-category">Petrol</div>
<div class="col movements-value col-auto col-ms-auto">R -R378</div>
</div>
</div>
</div>
</div>

</div>
Expand All @@ -144,10 +137,10 @@ <h4 class="text-muted text-uppercase small">Deposit income into account</h4>
<form id="form-deposits">
<div class="form-row align-items-center input-group input-group-sm">
<div class="col">
<input type="date" class=" form-control input-date-income input-income-border" placeholder="Date" required />
<input type="date" class=" form-control input-date-income input-income-border" placeholder="Date" aria-required="true">
</div>
<div class="col mx-2">
<input type="amount" class=" form-control input-amount-income input-income-border" placeholder="R400" required />
<input type="amount" class=" form-control input-amount-income input-income-border" placeholder="R400" aria-required="true">
</div>
<div class="col">
<button type="button" class="btn btn-outline-dark submit-income" style="width:100%">Submit</button>
Expand Down Expand Up @@ -204,10 +197,10 @@ <h4 class="text-muted text-uppercase small">Close your account</h4>
<form>
<div class="form-row align-items-center input-group input-group-sm">
<div class="col">
<input type="text" class="form-control input-account-username input-account-border" placeholder="username" required />
<input type="text" class=" form-control input-account-username input-account-border" placeholder="username">
</div>
<div class="col mx-2">
<input type="password" class=" form-control input-account-password input-account-border" placeholder="password" required />
<input type="password" class=" form-control input-account-password input-account-border" placeholder="password">
</div>
<div class="col">
<button type="button" class="btn btn-outline-dark submit-delete-account" style="width:100%">Submit</button>
Expand Down
216 changes: 99 additions & 117 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,20 @@ const inputAccountUsername = document.querySelector('.input-account-username');
const inputAccountPassword = document.querySelector('.input-account-password');

/////////////////// Functions ///////////////////
const greeting = function(){
console.log('upon time of day - greet user with name and evening/moring/afternoon');
}
greeting();

// date functionality
const formatMovementDate = function(date){
const calcDaysPassed = (date1, date2) => Math.round(Math.abs(date2-date1)/ (1000 * 60 *60 *24));

const daysPassed = calcDaysPassed(new Date(), date);

// const now = new Date();
// const daysPassed = calcDaysPassed(new Intl.DateTimeFormat('en-GB').format(now));

if(daysPassed === 0) return 'Today';
if(daysPassed === 1) return 'Yesterday';
if(daysPassed <= 7) return `${daysPassed} days ago`;
Expand All @@ -87,61 +95,56 @@ const formatMovementDate = function(date){

}

const transactions = function(acc, sort = false)
{
containerMovements.innerHTML = '';

//below now beng called in the displayUI function

// displayBalance(teri.movements);
const displayBalance = function(acc){
let [{ amount }] = JSON.parse(localStorage.getItem('formData')) || [];
let formDataLS = JSON.parse(localStorage.getItem('formData', amount));
const movs = sort ? acc.movements.slice().sort((a, b) => a - b) : acc.movements;

let total = 0;
Object.values(formDataLS).forEach(val => {
movs.forEach(function(mov, i)
{
const type = mov > 0 ? `<i class="bi bi-wallet" style="font-size: initial;"></i> deposit`: `<i class="bi bi-cash-coin" style="font-size: initial;"></i> expense`;
const name = acc.categoryType[i];

const date = new Date(acc.date[i]); // create the new date object for a string method
const displayDate = formatMovementDate (date);

const html =
`
<table class="table table-striped">
<tr class="row">
<td class="col movements-type movements-type-deposit"> ${type}</div>
<td class="col movements-category">${name}</div>
<td class="col movements-date">${displayDate}</div>
<td class="col movements-value ml-2">R ${mov}</div>
</tr>
</table>
`;
containerMovements.insertAdjacentHTML('afterbegin', html);

total = total + val.amount;
console.log(total);
transactionBalance.textContent = `R ${total}`

});
};
}

const displayIncome = function( acc) {
let [{ amount }] = JSON.parse(localStorage.getItem('formData')) || [];
let formDataLS = JSON.parse(localStorage.getItem('formData', amount));
//below now beng called in the displayUI function
// transactions(teri.movements, teri.categoryType);

for(let incomes of formDataLS){
console.log(`${incomes.amount} : `);
// displayBalance(teri.movements);
const displayBalance = function(acc){
acc.balance = acc.movements.reduce((accum, mov) => accum + mov, 0);
transactionBalance.textContent = `R ${acc.balance}`;
};
//const displayIncome = function(movements){
const displayIncome = function(acc) {
acc.income = acc.movements.filter((mov, i) => mov > 0)
.reduce((accum, mov) => accum + mov, 0);
transactionIncome.textContent = `R ${acc.income}`;
}

let total = 0;
//Object.values(teri.movements).forEach(val => console.log(val));
Object.values(formDataLS).forEach(val => {
if(val.amount > 0){
//console.log(val.amount)
total = total + val.amount;
console.log(total);
transactionIncome.textContent = `R ${total}`
}
});

}
// displayExpense(teri.movements);
const displayExpense = function(acc) {
let [{ amount }] = JSON.parse(localStorage.getItem('formData')) || [];
let formDataLS = JSON.parse(localStorage.getItem('formData', amount));

let total = 0;

Object.values(formDataLS).forEach(val => {

if(val.amount < 0){
total = total + val.amount;
console.log(total);
transactionExpenses.textContent = `R ${total}`
}
});

}
const displayExpense= function(acc) {
acc.expense = acc.movements.filter((mov, i) => mov < 0)
.reduce((accum, mov) => accum + mov, 0);
transactionExpenses.textContent = `R ${acc.expense * -1}`;
}


// function creating the username
Expand All @@ -159,16 +162,15 @@ console.log(accounts);
/////////////////////// Displaying purpose of the ui
const updateUI = function(acc) {

//display and calculate the transactions via a call to funtion
transactions(acc);

// display and call funct on balance
displayBalance(acc);

//display summary
displayExpense(acc);
displayIncome(acc);

//new transaction table display
dispData(acc)
}


Expand All @@ -184,6 +186,7 @@ inputLoginBtn.addEventListener('click', function(event){
event.preventDefault();

currentAccount = accounts.find(acc => acc.username === inputLoginUsername.value);
console.log(currentAccount);
if(currentAccount?.pin === Number(inputLoginPin.value)){
let myDate = new Date();
let hrs = myDate.getHours();
Expand Down Expand Up @@ -225,63 +228,35 @@ inputLogoutBtn.addEventListener('click', function(event){

})


// transfering money logic
// tracking income earned
submitIncomeBtn.addEventListener('click', function(event){
event.preventDefault();

const date = inputDateIncome.value;
const amount = Number(inputAmountIncome.value);
const categoryType = 'income'

if(amount <= 0 || date === "") {
alert ('enter a number larger than 10')
} else {
if(amount > 0 && currentAccount.balance >= amount)
{
currentAccount.movements.push(amount);
currentAccount.categoryType.push(categoryType);
currentAccount.date.push(date);
// updateUI(teri.movements);
//updateUI(currentAccount);
} else if ((amount == 0 || amount <= -1 || isNaN(amount)) && (date === undefined || isNaN(date))){
alert('feild empty Select a date and enter a number greater than 0');
return false;
}

let formData = JSON.parse(localStorage.getItem('formData')) || [];
let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data => {
data.date === inputDateIncome.value &&
data.amount == Number(inputAmountIncome.value) &&
data.categoryType == 'income'
});
if(!exist){
formData.push({
date: inputDateIncome.value,
amount: Number(inputAmountIncome.value),
categoryType: 'income'
});
localStorage.setItem('formData', JSON.stringify(formData));
// dispData()
} else {
alert('feild empty Select a date and enter a number greater than 0');
}
}
if(date === ""){
alert('Please enter a passed or current date');
return false
}

updateUI(currentAccount);
formDeposits.reset();
});

function dispData(){
if(localStorage.getItem('formData')){
containerMovements.innerHTML ="";
JSON.parse(localStorage.getItem('formData')).forEach(item=> {
const type = item.amount > 0 ? `<i class="bi bi-wallet" style="font-size: initial; color:rgb(53, 182, 83);"></i> deposit `: `<i class="bi bi-cash-coin" style="font-size: initial; color:red;"></i> expense `;
containerMovements.innerHTML += `
<tbody class="table">
<tr class="table-row-height" >
<td class="col movements-type movements-type-deposit"> ${type}</div>
<td class="col movements-category">${item.categoryType}</div>
<td class="col movements-date">${item.date}</div>
<td class="col movements-value ml-2">R ${item.amount}</div>
</tr>
</tbody>
`
})

};
}
});

// tracking expenditure
submitExpenseBtn.addEventListener('click', function(event){
Expand All @@ -290,29 +265,36 @@ submitExpenseBtn.addEventListener('click', function(event){
const amount = Number(inputAmountExpense.value);
const categoryType = inputTypeExpense.value;

if(amount <= 0 || date === "" || categoryType === "" )
if(amount > 0 && currentAccount.balance >= amount)
{
alert('Please ensure all inputs have been added');
} else {
currentAccount.movements.push(-amount);
currentAccount.categoryType.push(categoryType);
currentAccount.date.push(date);
//updateUI(currentAccount);
}

if(currentAccount.balance < amount){
alert('Amount cannot exceed balance');
} else if(amount <= 0){
alert('Amount needs to be greater than 0');
}

// potential errors on user inputs
if(amount == 0 || amount <= -1 || isNaN(amount) ){
alert('feild empty Enter a number greater than 0');
return false
}

if(date === ""){
alert('Please enter a passed or current date');
return false
}

if(categoryType === "" || categoryType === "---please Select---"){
alert('Please select a category');
return false
}

let formData = JSON.parse(localStorage.getItem('formData')) || [];
let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data => {
data.date === inputDateExpense.value &&
data.amount == Number(inputAmountExpense.value) &&
data.categoryType == inputTypeExpense.value
});
if(!exist){
formData.push({
date: inputDateExpense.value,
amount: Number(inputAmountExpense.value * -1),
categoryType: inputTypeExpense.value
});
localStorage.setItem('formData', JSON.stringify(formData));
} else {
alert('feild empty Select a date and enter a number greater than 0');
}
}
updateUI(currentAccount);
formExpenses.reset();

Expand All @@ -335,7 +317,7 @@ submitDeleteBtn.addEventListener('click', function (e) {
// Hide UI
displayContainerApp.style.opacity = 0;
loginFormDisplay.style.opacity = 0;

//alert("The user account has successfully been deleted.")
successDeleteMessage = welcomeMessage;
successDeleteMessage.textContent = "The user account has been successfully been deleted."
successDeleteMessage.style.color = "green";
Expand All @@ -344,4 +326,4 @@ submitDeleteBtn.addEventListener('click', function (e) {
}

inputAccountUsername.value = inputAccountPassword.value = '';
});
});
Loading