add a code that shows the username on the right corner shows the username , put mouse on it will shows "logout:click logout will go back to the login page .
this is the "index page "code
index .hbs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./data/l.css">
</head>
<body>
<div class="flex">
<div class="element-center">
<div id="acctBalance">
<span class="wrap"></span>
</a>
<h1>
Total Balance
</h1>
<label id="acctBalanceLbl"></label>
<input id="txtid" name="txtid" type="text" maxlength="10" placeholder="Accountnumber"><br><br>
</div>
<div id="inputs">
<h2>
Deposit
</h2>
<input type="text" id="userDeposit" required>
<button id="btnDeposit">Deposit</button>
<h2>
Withdraw
</h2>
<input type="text" id="userWithdraw" required>
<button id="btnWithdraw">Withdraw</button>
<label id="usernameLb2"></label>// add label for displaying user name
</div>
</div>
</div>
<script type="text/javascript" src="bank_account_script.js"></script>
<script type="text/javascript" src="typewriter_script.js"></script>
<script src="./data/2.js."></script>
</body>
</html>
2.js
const acctBalanceLbl = document.getElementById("acctBalanceLbl");
const deposits = [];
const withdrawals = [];
let totalBalance = 25;
const userDeposit = document.getElementById("userDeposit");
const btnDeposit = document.getElementById("btnDeposit");
const userWithdraw = document.getElementById("userWithdraw");
const btnWithdraw = document.getElementById("btnWithdraw");
// Create our number formatter.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
/*
the default value for minimumFractionDigits depends on the currency
and is usually already 2
*/
});
// accept deposits from user, store deposits in array
btnDeposit.addEventListener('click', () => {
// checks if deposit is a number
if (isNaN(userDeposit.value)) {
alert("Please enter a number.");
return userDeposit.value = '';
} else {
// checks if deposit meets parameters
if (userDeposit.value < 0.01 || userDeposit.value > 10000) {
alert("You can only deposit between $0.01 and $10,000.")
return userDeposit.value = '';
} else {
// push deposit to array
deposits.push(Number(userDeposit.value));
// calculate Total Balance
totalBalance += (Number(userDeposit.value));
// format TotalBalance to show $ XX.XX (2 decimal places)
let totalBalanceFormatted = formatter.format(totalBalance);
document.getElementById("acctBalanceLbl").innerHTML = totalBalanceFormatted;
// print deposit to console to verify success
console.log("$" + userDeposit.value);
return userDeposit.value = '';
}
}
});
// accept withdrawals from user, store withdrawals in array
btnWithdraw.addEventListener('click', () => {
// checks if withdrawal is a number
if (isNaN(userWithdraw.value)) {
alert("Please enter a number.");
return userWithdraw.value = '';
} else {
// checks if withdrawal meets parameters
if (userWithdraw.value > totalBalance - 5) {
alert("Your total balance cannot drop below $5.");
return userWithdraw.value = '';
} else {
// push withdrawal to array
withdrawals.push(Number(userWithdraw.value));
// calculate Total Balance
totalBalance -= (Number(userWithdraw.value));
// format TotalBalance to show $ XX.XX (2 decimal places)
let totalBalanceFormatted = formatter.format(totalBalance);
document.getElementById("acctBalanceLbl").innerHTML = totalBalanceFormatted;
// print withdrawal to console to verfify success
console.log("$" + userWithdraw.value);
return userWithdraw.value = '';
}
}
});
// format TotalBalance to show $ XX.XX (2 decimal places)
let totalBalanceFormatted = formatter.format(totalBalance);
document.getElementById("acctBalanceLbl").innerHTML = totalBalanceFormatted;
------------------------------
it runs like this
how could i add a code that shows the username on the right corner shows the username , put mouse on it will shows "logout:click logout will go back to the login page .
Step by step
Solved in 2 steps
