dom.js

'use strict';

//bankist app

//DATA
const account1 = {
  owner: 'Jay Vekariya',
  movements: [200, 50, -400, 3000, -650, -130, 70, 1300],
  interestRate: 1.2, // %
  pin: 1111,
};

  const account2 = {
    owner: 'Kartik Vaghsiya',
    movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
    interestRate: 1.5,
    pin: 2222,
  };
  
  const account3 = {
    owner: 'Sidhdhant Chavadiya',
    movements: [200, -200, 340, -300, -20, 50, 400, -460],
    interestRate: 0.7,
    pin: 3333,
  };
  
  const account4 = {
    owner: 'Apurv Akbari',
    movements: [430, 1000, 700, 50, 90],
    interestRate: 1,
    pin: 4444,
  };
const accounts=[account1,account2,account3,account4];

//Elements
const labelWelcome = document.querySelector('.welcome');
const labelDate = document.querySelector('.date');
const labelBalance = document.querySelector('.balance__value');
const labelSumIn = document.querySelector('.summary__value--in');
const labelSumOut = document.querySelector('.summary__value--out');
const labelSumInterest = document.querySelector('.summary__value--interest');
const labelTimer = document.querySelector('.timer');

const containerApp = document.querySelector('.app');
const containerMovements = document.querySelector('.movements');

const btnLogin = document.querySelector('.login__btn');
const btnTransfer = document.querySelector('.form__btn--transfer');
const btnLoan = document.querySelector('.form__btn--loan');
const btnClose = document.querySelector('.form__btn--close');
const btnSort = document.querySelector('.btn--sort');

const inputLoginUsername = document.querySelector('.login__input--user');
const inputLoginPin = document.querySelector('.login__input--pin');
const inputTransferTo = document.querySelector('.form__input--to');
const inputTransferAmount = document.querySelector('.form__input--amount');
const inputLoanAmount = document.querySelector('.form__input--loan-amount');
const inputCloseUsername = document.querySelector('.form__input--user');
const inputClosePin = document.querySelector('.form__input--pin');


//function for diplay account statastics
const displayMovements=function(movements,sort = false){
    
  containerMovements.innerHTML='';
//textContent 0
    const movs= sort ? movements.slice().sort((a,b)=> a - b ) : movements;

    movs.forEach(function(mov ,i){

        const type = mov > 0 ? 'deposit' : 'withdrawal';

        const html = `
          <div class="movements__row">
            <div class="movements__type movements__type--${type}">${
          i + 1} ${type}</div>
            <div class="movements__value">${mov}$</div>
          </div>
        `;
    
        containerMovements.insertAdjacentHTML('afterbegin', html);

    });
};


const calcDisplayBalance=function(acc){
   acc.balance=acc.movements.reduce((acc,mov)=>
  acc+mov,0
  );
  labelBalance.textContent=`${acc.balance} $   `
}


//summary
const calcDisplaySummary=function(acc){
  const income=acc.movements
  .filter(mov=> mov>0)
  .reduce((acc,mov)=> acc+mov,0)
    
  labelSumIn.textContent=`${income}`

  const out=acc.movements
  .filter(mov=> mov<0)
  .reduce((acc,mov)=> acc+mov,0)
  labelSumOut.textContent=`${Math.abs(out)}`  

  const interest=acc.movements
  .filter(mov=>mov>0)
  .map(deposite=> (deposite * acc.interestRate) /100)
  .filter((int ,i,arr)=>{
    
    return int>=1
  })
  .reduce((acc,int)=>acc+int,0)
  labelSumInterest.textContent=`${interest}`
}



const createUsernames=function(accs){
  accs.forEach(function(acc){
  acc.username= acc.owner
.toLowerCase()
.split(' ')
.map(name=>name[0])
.join('');
  })
};
createUsernames(accounts);
//console.log('shiroya priyank maheshbhai');

const updateUI=function(acc){

  //display movement
  displayMovements(acc.movements);

  //display balance
  calcDisplayBalance(acc);

 //display summury
 calcDisplaySummary(acc);
};



let currentAcount;
//event handler

btnLogin.addEventListener('click',function(e){
  //prevent submitting
  e.preventDefault();
  
currentAcount=  accounts.find(acc=> acc.username === inputLoginUsername.value);
console.log(currentAcount);  

if(currentAcount?.pin=== Number(inputLoginPin.value)){
  //display UI welcome massage

  labelWelcome.textContent=`Welcome Back,${currentAcount.owner.split(' ')[0]}`; 
  containerApp.style.opacity=100;

  //clear user input field
  inputLoginUsername.value= inputLoginPin.value='';
  inputLoginPin.blur();
  
 //update ui
 updateUI(currentAcount)

}
else{
  alert('Check Username and Password')
}

}) ;

//button transfer money

btnTransfer.addEventListener('click',function(e){
   e.preventDefault();
  
   
  const amount=Number(inputTransferAmount.value);
  const receiverAcc=accounts.find(acc=>acc.username === inputTransferTo.value)
  
  inputTransferAmount.value = inputTransferTo.value = ' ';


   if(
    amount>0 &&
    receiverAcc && currentAcount.balance >= amount && 
    receiverAcc?.username !== currentAcount.username
   ){
       //doing transfer
       currentAcount.movements.push(-amount);
       receiverAcc.movements.push(amount);
       
   }
   
   
   //update ui
   updateUI(currentAcount)

});

btnLoan.addEventListener('click',function(e){
  e.preventDefault();
 
  const amount=Number(inputLoanAmount.value)
  if(amount>0 && currentAcount.movements.some(mov=> 
    mov >= amount*0.1 )){
      //add movements

      currentAcount.movements.push(amount);
      //update UI
      updateUI(currentAcount);
    }
    inputLoanAmount.value=' ';

})


//Delete Account
btnClose.addEventListener('click',function(e){
  e.preventDefault();

  
  if(inputCloseUsername.value === currentAcount.username && Number(inputClosePin.value) === currentAcount.pin){
     
    const index=accounts.findIndex(acc=> acc.username === currentAcount.username)
  console.log(index);
    
   
  accounts.splice(index,1)
  //invisible
   containerApp.style.opacity=0;

  }
});


//add current date in 
let curentDate=document.getElementById('updateTime');
 function add(){
  setInterval(()=>{
    let dt=new Date();
    dt.setDate(dt.getDate());
    curentDate.innerHTML=dt.toLocaleDateString();
  },1000)
 };
add();


//btn shorting 
let sorted=false;
btnSort.addEventListener('click',function(e){
  e.preventDefault();
  displayMovements(currentAcount.movements, !sorted);
  sorted = !sorted;
});