ANK Bank - A virtual ATM

Devlog 9

Created README.md file with i included the brief description. And also mentioned that need more to work on CSS!

And also i included the use of each and main functions using table in md file . It is my first time ever using table in md file

Also mentioned the details of each frame as in a table!

Devlog 8 - Frame 17 & Frame 18

In frame 17, It will just a loading screen with text quiting…

In frame 18, It is page that will shows after frame 17. And It is the last frame of this project!

when the user clicks on quit button from homepage menu it will trigger the function optQuit(), then it will show up the frame 17 for 2.5 second then it will show frame 18 as the last frame!

After all i created a another function called loadingWindow() which is the frame 11. I called this function everywhere as a processing windows as loading screen for 2 second.

Now the project has been completed but it just looks like a template and only backend project, i need to wokr on CSS file to make this project more attractive!

Devlog 7 - Frame 14 & Frame 16

In frame 14, It is the window that shows the user when the user select Change PIN option from home page. Then the user need to enter the current PIN (frame 6) then it will show up the frame 14.

There the user needs to enter new 4 digit PIN as well as need to conform that!

In frame 16, it is shows when the New pin and conform PIN are matching, This windows shows the user that PIN has been changed successfully with a button that direct to home page menu.

In here i created a function optPIN() which will direct to enter the current PIN and then it direct to changePinWindo() it will shows up the frame 14 with a dial pad the user can enter new PIN using the dial pad. Then created changePinInputFun() with one parameter which will the clicked number will enter in the first input box. After the 4 digits in the first input box it will direct to next input box. After both input boxes attain 4 digit and matching digits it will show up the changePinSuccess() (frame 16). Otherwise users can also click the update button from the frame 14, that will trigger updatePIN(), it will do the same thing!

After all PIN changing option is completed!

Devlog 6 - Frame 10 & Frame 11 & Frame 12 & Frame 13

In frame 10, when the user clicks on withdraw button from the home page menu. First it will direct towards a PIN entering page (frame 6). Then if the user enters the PIN correctly then frame 10 will show up!

In this frame the user can select few buttons with amount and also user can enter when the user clicks on custom button then it will show up a input that can user enter custom amount using the Dialpad. And added a same condition error as well as the deposit amount section.

In frame 11, It is just a loading frame with the text processing. I added this frame to add a time between the processing of the ATM!

In frame 12, In this frame will show up when the user withdraw the amount successfully. In this page it shows the amount user withdrawn and the balance after that and as well as there is button to back to the home page.

In frame 13, Similarly in this frame it will show up when withdraw is failed.

I created a function called customAmountWindow() which will trigger when the user clicks on the button ‘other’ from the withdraw window. When this function triggers it show frame 10. And also created another function called withdrawAmount() with one parameter. It will check that the user entered amount is less than or equal to the current balance using if-else condition. If the user entered amount is greater than that of the current balance it will show up the frame 13 otherwise it will show the frame 12. Both frames had the back to home button. I also added this function trigger when the user using the buttons at frame 10 for fixed amount.

Now withdraw section is Completed!

Devlog 5 - Frame 8 & Frame 9

In Frame 8, it is the entering amount window of the deposit option but before accessing that need to verify the PIN so PIN entering screen (frame 6) before frame 8. created function optDepo() to view the keypad when user clicks deposit button from homepage.

When user enters the PIN correctly it direct towards the exact frame 8 which is the window for the user can enter the amount to be deposited.

So i created the dial with a function called moneyInputFun() with two parameters as same as the function pinInputFun(), thus moneyInputFun() helps the user to enter the amount using the Dialpad, In this window i also added a condition that only allows the user to enter x100 otherwise it shows an error for which i added, event dispatch when every button clicks, it may checks the error condition for each letter is clicks.!

In frame 9, It is the window that shows after the user enter the deposit money which shows the successful window that shows the amount that the user deposited and also the shows the balance amount. At last added button that direct towards the main menu

After all deposit option is completed!

Devlog 4 - Frame 6 & Frame 7

In frame 6, It is pin entering window which will allow or disallow the user for the next action based on the correct PIN or not!

I am working on the balance btn, that for i created a function called ‘optBal()’ which will trigger when the user clicks on the balance button from the home page. On optBal() added Dialpad in sub-section to display it. I got an idea put this Dialpad function in a another function with a parameter, which may help to remove static coding for the future PIN entering window for other button actions. So i created a another function with two parameters one is to focus the which input is and another is which number is user pressed on Dialpad - ‘pinInputFun(Xinput, num)’ This is function is only tigger when the user clicks buttons on the dial pad!

In frame 7, It is the main window that shows the balance amount to the user. btw this window only shows when the user enter PIN correctly. For that in the pinInputFun() inside that another function called checkPin(), i added a another if condition if the user enters the password correctly it checks that which input it was because i thought  use the pinInputFun() for all the Pin entering window, so the function need understand which function is to be triggered next. So that if the input is balance input then show the function showBal().

In showBal(), i designed simply without any much styling because now it is testing phase. btw i added a button with action showMenu() which will move to homepage!

Devlog 3 - Frame 5

Now iam working on Frame 5, which is the real interface of the ATM. At first i converted this whole page into main-section and sub-section with 3:2 width.

In main-section i would like to display the text and options in ATM as main window, and in sub-section it only for keypad to enter values and numbers…

So i created two section at frame5. In main window there is no need of keypad i hide sub-section.

And also added to welcome with name of the user and below that i added account number then it will shows the buttons of function which are user can choose the options such as Balance, Deposit, Withdraw, Change PIN, Quit.

I made whole this mainWindow in a function called ‘showMenu()’ which will help to call the homepage from everywhere in the future!

And as well as, iam very lazy to type name, pin and conform each time i debugging or running the website again and again so i currently initialized each values.

Devlog 2 - Frame 3 & Frame 4

Today, iam continue making frames one by one!

So i added frame 3 which is the fill form of the user account with Form name, account number, initial balance amount and 4 digit PIN and conforming again PIN and a submit button..

I thought that the account number must random which is more attractive and realistic. otherwise the user need to enter something boring numbers. So i created function ‘AccountNum()’ which collect two type of digits, i mean i thought that there is a professional look in the account number So first bank code (“ANK”) then a 4 digit random number between 1000 and 1019 which is a model of user branch number and other 4 digit is section 1000 to 9999 which is unique for each user. Btw i added a perfect if else condition for the submit button on the form to make sure that the user entered all the values and made perfect.

In frame 4, it is notification loading which will summarise the data the user entered in the fill form. It will hide automatically in 3 seconds.

In this project iam planning to create a virtual simulation of ATM! using HTML, CSS and JavaScript, From BluePrint/Scratch

I had plan for this project in my mind for few months. But now its the suitable time for that!

On my free time, i planned the project roughly and noted everything and created my own blueprint with about 18 frames and i written whole plan as algorithm (As in my own words and shortform :) ).

Devlog 1 - Frame 1 & Frame 2

Today i created files such as script.js, style.css and index.html and also a folder ‘frames’. I thought it would be easy to create frames one by one as matching to my blue print, so i decided to create each file as each frame then join together which make debugging and styling more easier. But my first time ever i coding by this approach.

Btw, i completed first 2 frames which are both welcoming animation first is a warning animation like “Use desktop for better experience” and second is main welcoming to the project i also made animation with suitable hiding using a function welcomeLoad()