Submit
diff --git a/script.js b/script.js
index 8c99616..e4602db 100644
--- a/script.js
+++ b/script.js
@@ -1,8 +1,8 @@
// 'use strict';
-/////////////////// Expense Tracker /////////////////
-
-/////////////////// Data ///////////////////
+///////////// Expense Tracker ///////////
+// ======================================
+///////////// Data //////////////////////
const teri = {
owner: 'teri jacobs',
movements: [600, 9000, -4000, 6000, -200, -50, -600],
@@ -33,7 +33,6 @@ const guest = {
],
pin: 222,
}
-
const accounts = [teri, guest];
/////////////////// Elements ///////////////////
@@ -68,20 +67,13 @@ 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
+// =============================================
+// date and greeting 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`;
@@ -94,59 +86,99 @@ const formatMovementDate = function(date){
}
}
-
-const transactions = function(acc, sort = false)
-{
- containerMovements.innerHTML = '';
-
- const movs = sort ? acc.movements.slice().sort((a, b) => a - b) : acc.movements;
-
- movs.forEach(function(mov, i)
- {
- const type = mov > 0 ? `
deposit`: `
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);
+// placeholder transaction data
+// const transactions = function(acc, sort = false)
+// {
+// containerMovements.innerHTML = '';
+// const movs = sort ? acc.movements.slice().sort((a, b) => a - b) : acc.movements;
+
+// movs.forEach(function(mov, i)
+// {
+// const type = mov > 0 ? `
deposit`: `
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 =
- `
-
-
- ${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
+ });
diff --git a/styles.css b/styles.css
index 22f0abb..185a410 100644
--- a/styles.css
+++ b/styles.css
@@ -5,33 +5,63 @@
.input-logout-btn{
opacity: 0;
}
+.transaction-summary-text{
+ font-size:28px;
+}
.dot {
- width: 10px;
- height: 10px;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+.income-icon-background{
+ width: 55px;
+ height: 55px;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
+ background-color: rgb(129,171,221);
+}
+.expense-icon-background{
+ width: 55px;
+ height: 55px;
+ border-radius: 50%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ background-color: rgb(197,114,194);
+}
+.balance-icon-background{
+ width: 55px;
+ height: 55px;
+ border-radius: 50%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ background-color: #35b653;;
+}
+.bi{
+ font-size:33px;
}
.bg-indigo {
- background-color: #6610f2;
+ background-color: rgb(129,171,221);
}
.bi-wallet{
- color:#6610f2;
- font-size: x-large;
+ color:#fff;
+ margin-left: 10px;
}
.bg-red {
- background-color: #dc3545;
+ background-color: rgb(197,114,194);
}
.bi-cash-coin{
- color:#dc3545;
- font-size: x-large;
+ color:#fff;
+ margin-left: 10px;
}
.bg-green {
background-color: #35b653;
}
.bi-wallet2{
- color:#35b653;
- font-size: x-large;
+ color:#fff;
+ margin-left: 10px;
}
.me-3 {
margin-right: 1rem !important;
@@ -39,6 +69,7 @@
.card-widget {
padding: 1.5rem;
border-radius: 50rem;
+ /* border: solid #6610f2; */
background: #fff;
-webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
@@ -50,13 +81,20 @@
align-items: center;
}
.card-widget-income{
- background-color:rgb(102 16 242 / 5%);
+ /* background-color:rgb(102 16 242 / 5%); */
+ border: solid rgb(129,171,221) !important;
}
.card-widget-expenses{
- background-color:rgb(220 53 69/ 5%);
+ /* background-color:rgb(220 53 69/ 5%); */
+ border: solid rgb(197,114,194) !important;
+}
+.card-widget-close{
+ /* background-color:rgb(53 182 83 / 5%); */
+ border: solid rgb(220 53 69)!important;
}
-.card-widget-balance{
- background-color:rgb(53 182 83 / 5%);
+.card-widget-transactions{
+ /* background-color:rgb(53 182 83 / 5%); */
+ border: solid rgb(53 182 83 / 45%);
}
.card {
position: relative;
@@ -89,7 +127,15 @@
flex: 1 1 auto;
padding: 2rem;
}
-
+.input-income-border{
+ border: solid rgb(129 171 221 / 85%) !important;
+}
+.expense-income-border{
+ border: solid rgb(197,114,194) !important;
+}
+.input-account-border{
+ border: solid rgb(220 53 69)!important;
+}
/* Listed Transactions on Account */
.container-movements {
overflow: auto;