Web Dev Streaks Day- 30 (Milestone 5: Integrate Javascript)
Module 25: Simple Bank Transaction
1. Tailwind Review text-align text-color, Login Form, Input Field, Password text-field, Submit
Create a project folder naming it “Bank” and then create a file named “index.html”. Add a heading using <h1> tag. Link the Tailwind CSS. Now start designing the heading using Tailwind CSS classes. If you have forgotten all of the classes which you had used earlier you may go to their website and try searching the classes with relevant keywords (Shortcut: Ctrl+K).
Now, As we are making a bank website so it’s necessary to put some security indeed at the first place. To do that you’ll be making a Login form where the user has to provide an e-mail and password for security purposes.
Add a form and inside the form add two input fields of text (for email field) and password (for password field) type. Now add background color, some margin, padding, and set the width of the section and field according to you.
Also, add a button to submit the provided information. Style it using the Tailwind CSS classes.
2. Add Event Listener Navigate to Another Page
Now you’ll be adding an event listener to the submit button to make it work. Add an id to the submit button. Create a javascript file in a separate folder and link it to the HTML file.
Now select the button using the document.getElementById(“login-button”) and add an click event listener which will take the value from the emailField and passwordField and then using an if condition match it with a specific set of userEmail and userPassword for now. If both of the condition matches then it will redirect to another page (Create a “banking.html” page with a heading for now).
Redirecting to another page will require a specific command “window.location.href = banking.hmtl;”
3. Deposit, Withdraw, Balance Area Using Grid Layout
Now, It’s time to redesign the “banking.html” file as user will hit this page after a successful login.
Create 3 block to display the deposit, withdraw, and balance of the bank using grid-layout of Tailwind CSS.
And, style them using background color, padding , margin, font-color to make it more lucrative.
4. Create Deposit & Withdraw Amount Input Fields
Create one more division where the user can insert the amount of withdrawal amount and the amount they wish to deposit.
For creating that section just creat a 2 grid column and in each grid add a title and a input field where the user will put the amount with a button.
Thus, your after-login page will be ready.
5. Get User Deposit & Set Deposit Total Value
Add an event Listener to the deposit button to make the deposit button working,
Now create a separate javascript file named “banking.js” and start adding an event listener for the “deposit-button”. The tasks are,
1. Get the amount from the deposit input field
2. Set it back to the depositTotal in the dashboard
3. Set the deposit input field empty.
It’s better to practice checking out your every step using console.log() to be sure of each and every step.
!Important Note:
You may be thinking why this hadn’t been added to the previous javascript file. It’s because it’s a good practice to have a separate javascript file for each task. Most importantly if you have added this event handler in the previous file then a TypeError would occur in there because it wouldn’t be able to find the first element (“login-button”) which isn’t a member of this HTML document.
6. Update Deposit, Balance & Handle String Add
You were just simply displaying the deposited amount in the dashboard. Every time you give some input to the field the previous amount vanishes and the new amount takes place.
Now the task is to update the depositTotal and the balanceTotal in the dashboard.
For that what you’ve to do is:
1. Convert the deposit input field value into float using paresFloat() and store it in a variable (newDepositAmount).
2. Do the same with depositTotal innerText and store it in previousDepositAmount.
3. Add both of them and store in the newDepositTotal.
4. Set the newDepositTotal in the depositTotal.innerText ( Deposit Dashboard).
5. Convert the balance innerText into float using paresFloat() and store it in a variable (previousBalanceTotal).
6. Add it with the newDepositAmount and store it in newBalanceTotal
7. Set the newBalanceTotal in the balanceTotal.innerText
(Balance Dashboard).
8 .Clear the deposit input field value using an empty string.
Now you can see the updated deposit amount and new balance amount while the user has inputted any deposit amount and clicked the deposit button.
7. Withdraw Money & Reduce Balance For Withdrawal
Do the same for withdrawals cases too. Though there’s a simple difference that’s the new withdrawal amount will be deducted from the account balance. The rest are the same. Have a look at the following code if you face any problem,
You’re done making a simple bank website. There are a few things left to do. Such as amount input validation, handle string inputs or empty input which can result in NaN (Not a Number) Do it by yourself.
