25-1 Project overview, Tailwind review, text align, text color
● Tailwind Recap
25-2 Login form, input field, password text field, submit
● If <form> tag has a submit button inside it, it always wants to send data to the destination
when it is clicked that results in reloading the page. If we replace the <form> tag with
<div>, the page will not be reloaded anymore when the button is clicked.
● Recapping Tailwind
25-3 Add event listener navigate to another page
● We can redirect one webpage to another webpage by implementing Javascript.
Previously we did this with HTML <a> anchor tag. To do this with javascript, write the
below code in the script file.
[Link] = 'webpageLink/directory';
This can be implemented with conditions and others javascript events.
● Practice Code is given below:
[Link]('login-submit').addEventListener('click',
function() {
// get user email
const emailField = [Link]('user-email');
const userEmail = [Link];
// get user password
const passwordField = [Link]('user-password');
const userPassword = [Link];
if (userEmail == 'kawsar@[Link]' && userPassword == 'secret') {
[Link] = '../[Link]';
}
});
This code is implementing an input form userID and userPassword.
When a user enters the correct password and submit it, the page will redirect to another
page.
25-4 Deposit, withdraw, balance area using grid layout
● Recapping Tailwind.
● Practice Code:
<header>
<h1 class="text-5xl text-center mt-16">Let's get some <span
class="font-semibold
text-purple-600">Mooooooney</span></h1>
</header>
<main>
<section class="mt-8">
<div class="grid grid-cols-3 gap-4 w-3/4 mx-auto text-white">
<div class="bg-blue-300 p-8 rounded">
<h3 class="text-2xl">Deposite</h3>
<h4 class="text-4xl">$00</h4>
</div>
<div class="bg-green-300 p-8 rounded">
<h3 class="text-2xl">Withdraw</h3>
<h4 class="text-4xl">$00</h4>
</div>
<div class="bg-yellow-300 p-8 rounded">
<h3 class="text-2xl">Balance</h3>
<h4 class="text-4xl">$1240</h4>
</div>
</div>
</section>
</main>
25-5 Create Deposit and withdraw amount Input Fields
● Recapping Tailwind
25-6 Get User deposit and set deposit total value
● Problem: When I linked [Link] and [Link] to a single JS file, the second
HTML did not work according to the script. But, When create 2 different JS files for
2 different HTML pages, it worked.
Go to support session to get it fixed.
● Practice Code:
// Handle deposit button event
[Link]('deposit-button').addEventListener('click',
function () {
// get the amount deposited.
const depositInput = [Link]('deposit-input');
const depositAmount = [Link];
[Link](depositAmount);
const depositTotal = [Link]('deposit-total');
[Link] = depositAmount;
// Clearing the deposit input field
[Link] = '';
});
25-7 Update deposit and balance and handle string add
● Practice code:
// Handle deposit button event
[Link]('deposit-button').addEventListener('click',
function () {
// get the amount deposited.
const depositInput = [Link]('deposit-input');
const newDepositAmount = parseFloat([Link]);
// update deposit total
const depositTotal = [Link]('deposit-total');
const previousDepositText = [Link];
const previousDepositAmount = parseFloat(previousDepositText);
const newDepositTotal = previousDepositAmount + newDepositAmount;
[Link] = newDepositTotal;
// update account balance
const balanceTotal = [Link]('balance-total');
const previousBalanceTotal = parseFloat([Link]);
const newBalanceTotal = previousBalanceTotal + newDepositAmount;
[Link] = newBalanceTotal;
// Clearing the deposit input field
[Link] = '';
});
25-8 Money withdraw and reduce balance for withdraw
● Module Final Code:
// Handle deposit button event
[Link]('deposit-button').addEventListener('click',
function () {
// get the amount deposited.
const depositInput = [Link]('deposit-input');
const newDepositAmount = parseFloat([Link]);
// update deposit total
const depositTotal = [Link]('deposit-total');
const previousDepositAmount = parseFloat([Link]);
const newDepositTotal = previousDepositAmount + newDepositAmount;
[Link] = newDepositTotal;
// update account balance
const balanceTotal = [Link]('balance-total');
const previousBalanceTotal = parseFloat([Link]);
const newBalanceTotal = previousBalanceTotal + newDepositAmount;
[Link] = newBalanceTotal;
// Clearing the deposit input field
[Link] = '';
});
// handle withdraw event handler
[Link]('withdraw-button').addEventListener('click',
function() {
// get the amount withdrawn
const withdrawInput = [Link]('withdraw-input');
const newWithdrawAmount = parseFloat([Link]);
// update Withdraw total
const withDrawTotal = [Link]('withdraw-total');
const previousWithdrawAmount = parseFloat([Link]);
const newWithdrawTotal = previousWithdrawAmount + newWithdrawAmount;
[Link] = newWithdrawTotal;
// update account balance
const balanceTotal = [Link]('balance-total');
const previousBalanceTotal = parseFloat([Link]);
const newBalanceTotal = previousBalanceTotal - newWithdrawAmount;
[Link] = newBalanceTotal;
// clearing the deposit input field
[Link] = '';
});
● Module Summary