Create scripts.js

scripts.js

@@ -0,0 +1,100 @@
+let currentAction = '';
+
+function enterApp() {
+  document.getElementById('splash').style.display = 'none';
+  document.getElementById('dashboard').style.display = 'block';
+}
+
+function showModal(action) {
+  currentAction = action;
+  document.getElementById('modal').style.display = 'flex';
+  document.getElementById('modalTitle').innerText =
+    action === 'pay' ? 'Send Payment' :
+    action === 'add' ? 'Add Cash' : 'Cash Out';
+  document.getElementById('input1').value = '';
+  document.getElementById('input2').value = '';
+  document.getElementById('input2').style.display = action === 'pay' ? 'block' : 'none';
+  document.getElementById('bankSelect').style.display = action === 'pay' ? 'none' : 'block';
+  document.getElementById('paymentStatus').style.display = action === 'pay' ? 'block' : 'none';
+}
+
+function closeModal() {
+  document.getElementById('modal').style.display = 'none';
+}
+
+function performAction() {
+  let amount = parseFloat(document.getElementById('input1').value);
+  let balance = parseFloat(document.getElementById('balance').innerText.replace('$','').replace(',',''));
+  let receiver = document.getElementById('input2').value;
+  let selectedBank = document.getElementById('bankSelect').value;
+  let status = document.getElementById('paymentStatus').value;
+
+  if (isNaN(amount) || amount <= 0) {
+    alert("Enter a valid amount.");
+    return;
+  }
+
+  if ((currentAction === 'add' || currentAction === 'cashout') && !selectedBank) {
+    alert("Please select a bank.");
+    return;
+  }
+
+  if (currentAction === 'add') {
+    balance += amount;
+    showReceipt(selectedBank, 'Bank', amount, 'Funds Added', 'Just now');
+  } else if (currentAction === 'cashout') {
+    if (amount <= balance) {
+      balance -= amount;
+      showReceipt(selectedBank, 'Bank', amount, 'Cash Out', 'Just now');
+    } else {
+      alert("Insufficient funds!");
+      return;
+    }
+  } else if (currentAction === 'pay') {
+    if (amount <= balance && receiver) {
+      if (status !== 'Rejected') balance -= amount;
+      const history = document.getElementById('history');
+      history.innerHTML += `
+        <div class="history-item" onclick="showReceipt('${receiver}', 'You', ${amount}, '${status}', 'Just now')">
+          Payment to ${receiver} — $${amount} (${status})
+        </div>`;
+      showReceipt(receiver, 'You', amount, status, 'Just now');
+    } else {
+      alert("Enter valid amount and receiver.");
+      return;
+    }
+  }
+
+  document.getElementById('balance').innerText = '$' + balance.toFixed(2);
+  closeModal();
+}
+
+function showReceipt(to, from, amount, status, time) {
+  document.querySelector('.receipt-content h2').innerText = to;
+  document.querySelector('.receipt-content p').innerHTML = `${status} with <strong>${to}</strong>`;
+  document.getElementById('receiptAmount').innerText = '$' + amount;
+  document.getElementById('receiptTime').innerText = time;
+
+  let checkEl = document.querySelector('.check');
+  if (status === 'Successful') {
+    checkEl.innerText = '✔️ Received';
+    checkEl.style.color = 'green';
+  } else if (status === 'Pending') {
+    checkEl.innerText = '⏳ Pending';
+    checkEl.style.color = 'orange';
+  } else {
+    checkEl.innerText = '❌ Rejected';
+    checkEl.style.color = 'red';
+  }
+
+  document.querySelector('.receipt-details').innerHTML = `
+    <p>Type: <span>${status}</span></p>
+    <p>Amount: <span>$${amount}</span></p>
+    <p>To: <span>${to}</span></p>
+    <p>From: <span>${from}</span></p>`;
+  document.getElementById('receipt').style.display = 'flex';
+}
+
+function closeReceipt() {
+  document.getElementById('receipt').style.display = 'none';
+}