diff --git a/index.html b/index.html
index d5c4516..7b897b5 100644
--- a/index.html
+++ b/index.html
@@ -101,27 +101,36 @@ Welcome to your Expense Tracke
All Transactions
-
-
-
-
2 deposit
-
3 days ago
-
Food
-
R4 000
-
-
-
1 withdrawal
-
24/01/2037
-
Petrol
-
R -R378
-
-
+
+
+
+ | Type |
+ Category |
+ Date |
+ Amount |
+
+
+
+
+
+
-
- | ${type}
- | ${name}
- | ${displayDate}
- | R ${mov}
- |
-
- `;
- containerMovements.insertAdjacentHTML('afterbegin', html);
+// const html =
+// `
+//
+//
+// | ${type}
+// | ${name}
+// | ${displayDate}
+// | R ${mov}
+// |
+//
+// `;
+// containerMovements.insertAdjacentHTML('afterbegin', html);
+// });
+// }
+
+// Summary functionality of the UI display
+//======================================
+const displayBalance = function(acc){
+ if(JSON.parse(localStorage.getItem('formData')) === null){
+ // acc.balance = acc.movements.reduce((accum, mov) => accum + mov, 0);
+ // transactionBalance.textContent = `R ${acc.balance}`;
+ transactionBalance.textContent = `R 0`;
+ } else {
+ let [{ amount }] = JSON.parse(localStorage.getItem('formData'));
+ let formDataLS = JSON.parse(localStorage.getItem('formData', amount));
+
+ let total = 0;
+ Object.values(formDataLS).forEach(val => {
+ total = total + val.amount;
+ transactionBalance.textContent = `R ${total}`
+ });
+ }
+};
+const displayIncome = function( acc) {
+ if(JSON.parse(localStorage.getItem('formData')) === null || JSON.parse(localStorage.getItem('formData')) === []){
+ // acc.income = acc.movements.filter((mov, i) => mov > 0)
+ // .reduce((accum, mov) => accum + mov, 0);
+ // transactionIncome.textContent = `R ${acc.income}`;
+ transactionIncome.textContent = `R 0`;
+ } else {
+ let { amount } = JSON.parse(localStorage.getItem('formData'));
+ formDataLS = JSON.parse(localStorage.getItem('formData', amount));
+
+ let total = 0;
+ Object.values(formDataLS).forEach(val => {
+ if(val.amount > 0){
+ total = total + val.amount;
+ transactionIncome.textContent = `R ${total}`
+ }
});
+ }
}
-//below now beng called in the displayUI function
-// transactions(teri.movements, teri.categoryType);
+const displayExpense = function(acc) {
+ if(JSON.parse(localStorage.getItem('formData')) === null || JSON.parse(localStorage.getItem('formData')) === [])
+ {
+ // acc.expense = acc.movements.filter((mov, i) => mov < 0)
+ // .reduce((accum, mov) => accum + mov, 0);
+ //transactionExpenses.textContent = `R ${acc.expense * -1}`;
+ transactionExpenses.textContent = `R ${0 * -1}`;
+ } else {
+ let { amount } = JSON.parse(localStorage.getItem('formData'));
+ let formDataLS = JSON.parse(localStorage.getItem('formData', 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}`;
- }
-// displayExpense(teri.movements);
-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}`;
+ let total = 0;
+
+ Object.values(formDataLS).forEach(val => {
+ if(val.amount < 0){
+ total = total + val.amount;
+ //console.log(total);
+ transactionExpenses.textContent = `R ${total}`
+ }
+ });
}
+}
+// =============================
// function creating the username
const createUserName = function(account){
account.forEach(function(accountHolder){
@@ -158,25 +190,25 @@ const createUserName = function(account){
})
};
createUserName(accounts);
-console.log(accounts);
-/////////////////////// Displaying purpose of the ui
+// =============================
+// Displaying all the data of the ui summary
const updateUI = function(acc) {
-
- //display and calculate the transactions via a call to funtion
- transactions(acc);
-
+ //displaying th JS hardcoded object transactions
+ // transactions(acc);
// display and call funct on balance
displayBalance(acc);
//display summary
displayExpense(acc);
displayIncome(acc);
-}
+ //new transaction table display
+ dispData(acc)
+}
+//=============================
///// Event Handlers ////
-let currentAccount; // for use on the login
-//fake account login
+let currentAccount;
currentAccount = teri;
updateUI(currentAccount);
displayContainerApp.style.opacity = 0;
@@ -186,7 +218,6 @@ 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();
@@ -197,6 +228,7 @@ inputLoginBtn.addEventListener('click', function(event){
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
+
//display ui and welcome message
welcomeMessage.textContent = `${greet}, ${currentAccount.owner.charAt(0).toUpperCase()+ currentAccount.owner.slice(1).split(' ')[0]}.`;
welcomeMessage.style.padding = "10px";
@@ -212,89 +244,110 @@ inputLoginBtn.addEventListener('click', function(event){
inputLoginUsername.style.display = 'none';
inputLoginPin.style.display = 'none';
inputLogoutBtn.style.opacity = 100;
- //alert('show')
}
updateUI(currentAccount);
}
});
+
//LOGOUT BUTTON AS TOGGLE
inputLogoutBtn.addEventListener('click', function(event){
event.preventDefault();
-
displayContainerApp.style.opacity = 0;
inputLogoutBtn.style.display = 'none';
- welcomeMessage.textContent = 'You have successfully logged out!'
-
-
+ welcomeMessage.textContent = 'You have successfully logged out!';
})
-
+// =======================
// 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 && 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;
- }
-
- if(date === ""){
- alert('Please enter a passed or current date');
- return false
- }
+ if(amount <= 0 || date === "") {
+ alert ('enter a number larger than 10')
+ } else {
+ 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));
+ } else {
+ alert('feild empty Select a date and enter a number greater than 0');
+ }
+ }
updateUI(currentAccount);
formDeposits.reset();
-
});
+// Updated transaction display of all deposits and withdrawals
+function dispData(){
+ if(localStorage.getItem('formData')){
+ containerMovements.innerHTML ="";
+ JSON.parse(localStorage.getItem('formData')).forEach(item=> {
+ const type = item.amount > 0 ? ` deposit `: ` expense `;
+ containerMovements.innerHTML += `
+
+
+ | ${type}
+ | ${item.categoryType}
+ | ${item.date}
+ | R ${item.amount}
+ |
+
+ `
+ })
+ };
+}
+
// tracking expenditure
submitExpenseBtn.addEventListener('click', function(event){
event.preventDefault();
const date = inputDateExpense.value;
const amount = Number(inputAmountExpense.value);
const categoryType = inputTypeExpense.value;
+ const trans = transactionIncome.innerHTML;
+ console.log(trans)
+ const myArray = trans.split(" ");
+ console.log(myArray)
- if(amount > 0 && currentAccount.balance >= amount)
- {
- 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
- }
+ if(amount <= 0 || date === "" || categoryType === "" )
+ {
+ alert('Please ensure all inputs have been added');
+ }else if ( myArray[1] < amount){
+ alert('Input amount must be less than the income')
+ } else{
+ 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();
@@ -317,7 +370,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";
@@ -326,4 +379,4 @@ submitDeleteBtn.addEventListener('click', function (e) {
}
inputAccountUsername.value = inputAccountPassword.value = '';
- });
\ No newline at end of file
+ });