ANK Bank - A virtual ATM

Devlog 2.0

Today i am planning to make important change in the website. I found that, the website is looking bad and not working the UI properly in mobile screens.

So i decided to make the website responsive and dynamic in mobile screens also as well as the desktop screens

So let start to design the whole webpage again!

Devlog 2.1 | Frame 1 - 5

First of all i made some research about making a webpage into a responsive one, and i found that we can simply edit the layout of the element according to screen width using @media function in CSS file. So i found that the maximum width of a mobile screen is 480px. So decided to adjust the @media function with screen width 480px.

In frame 1, i doesn’t made any changes for the mobile screen.

But in frame 2 i found that it doesn’t align the text exact that of the center of the screen height and width. And also find that the text typing animation is the issue regarding that! So i tried my maximum to solve that but unfortunately i couldn’t, So i decided to remove the animation in the mobile screen.

In frame 3, Then i moved into next frame. I made the main div into 100% width and height that of the screen. Also made the input box into a little smaller than that of the 100% width. Similarly also changed the width of the button.

In frame 4, I made everything exactly center to the whole screen. by making the layout position as absolute and then made top and left as 50% move.

Solving Bugs and logical errors. I found a bug in the animation period on the mobile screen. It has been working perfectly until the animation between frames 3 & 4. I found that the fade-out animation of frame 3 is working perfectly but the fade-in animation of frame 4 is working but placing the frame at the very bottom-right side. After a huge think i created a id tag for a this special animation issue which has the issue for these two frames only. Then i connected them using JS now its working perfectly.

Devlog 12 - Remaining frames

Today i decided to work all the remaining frames, which is almost 10+ frames. But it seems to be easy because i already setted the theme and colour palette now i just need to change accordingly.

In frame 8, I changed the font-size and colour of the heading and also changed the almost everything that of input field.

In frame 9, there are 2 main heading 2 big digits text and a button. first of all, i changed the colours and text font-size of all 4 texts into different ones. and made the button as other buttons with text “Back to Menu”.

In frame 10, There one heading and 6 buttons. i made the buttons as same as others and made the “Other” button with another text colour and border colour if the user clicks on that it will appear an input field and as well as dialpad.

In frame 11, Just created and made a animation which is changeing the opacity, and letterspacing as well as scale of the text which makes more interesting for the user as it will give a sign that it is under processing…

In frame 12, this frame is styled as everything same as that of the frame 9.

In frame 13, this frame is also same as that of frame 9 but there is some changes in font size and colour of text since it is for failure that for used red-shade colour text.

In frame 14, In this frame made the input section and text more styled adn also removed the outline of the input box if the user focus on the input box.

In frame 16, It is just a text with green coloured as indicating successful and a button with caption ‘Back to Menu’.

In frame 17, It is text with ‘Quitting…’ i added animation for that text which is changing its opacity, and motion of y-axis.

In frame 18, This is the last frame of this project it is as shows as the conclusion of the project. I added a span tag in-between the text for changeing colour of ‘ANK’ only into blue.

After all these the basic styling is completed!

Final Changed

I noticed that it is very boring and showing separately that the default js alert() is function to change that i decided to make more attractive and simple one. So i created another div called ‘error_alert’ which is similarly show up the notification at top-right of the screen when there is any error or alert occurs. I added showing animation which is changed the x-axis and opacity of the div and as well as the hideing animation. For make this dynamically i created a new function called ‘errorAlert()’ with one parameter which is function as this div is displayed with the text that in parameter whenever the function is called. And also made that it need to hide automatically after 3 seconds with hideing animation.

Then i changed the alert() into errorAlert({text}) which made more interesting for the website and ATM simulation.

Solving Bugs

I found i bug that in the section ‘change PIN’ there is a major bug which is like these, if the user enters ‘2222’ in the first input field and ‘1111’ in the second one then the user clicks on the update button it will update the PIN as ‘2222’ but the conform PIN and entered PIN are not same after a detailed look through my JS code i found the error at the function updatePIN() then i solved that bug. Iam proud that i solved this bug without help any resources.

Devlog 11 - Frame 5 & Frame 6 & Frame 7

In these days, i made a lot of changes in the project. I started to make the project more attractive and i need to be show up this project as 100% simulation design of ATM Machine. So i decided to use font-family of inter and selected a dark-shade background and theme for the whole project though out the entire project!

In frame 5, As we know this frame is the main frame and important frame which is showing the main options and homepage of this simulation. For that i changed the text interface into more useful and attractive. Currently the text at the top is just “Welcome, {username}” below that “{accountnumber}” just these only, which gives a normal and booring look and not much branding look. I need to make sure that to look and design like a branding project! For that i changed the text into like these “Welcome Back, {username}” then “{accountnumber}” below that i added another text “What would you like to do?”. At last for these texts i added different colour pattern and size according to text importance!

then i spend time to work on the section of buttons, first of all i changed the texts from “Balance” into “Check Balance”, “Deposit” to “Deposit Money”, “Withdraw” to “Withdraw money” and “Quit” into “Exit”. As well as i changed the button background colour and border colours and removes the default border-radius and also added hovering animation which made the buttons more like a ATM.

In frame 6, I added another text below the current text and also changed the input box size and colour as well as the border and background colour and given the same button effects that of the main menu buttons (in frame 5). At there i added few more features - I updated pinInputFun() which is the user enters input with length of 4 letters then the dial-pad’s “Check” button will automatically highlights which the user can understand it time to enter that button and check the PIN. Then also removed the alert notification into that when the user enters wrong password the input password’s colour will change into red and then back to normal after 2 seconds.

In frame 7, I added another text below the current text and changed the button caption. And also designed the texts in different font size and font colour. and Addded the button style as in frame 5.

NB: Tried out a lot of animations and styling ways to occur this output which wasted me a much time to spend on it and need to remove into trash :)

Lets continue on this project more! I decided to change the colours and themes into a single UI design. I choose dark blue colour and planned to remove bright colours such as yellow, green etc which makes the user more distraction from the website (not suitable for ATM Simulation). So lets redesign the whole webpage frame by frame again

Devlog 10 - Frame 1 & Frame 2 & Frame 3 & Frame 4

First of all, i created a var css function of :root of colors i used in the website for making easy to reuse the color all over the website.

In All over the website, I changed the white background into dark navy blue colour and sky-blue colour for basic normal text. And as well as i selected some font from google fonts. And i added a font name ‘Inter’ to the body for making the default font-family thought out the webpage.

In frame 1, I broke one line text into two line text and also removed the black background into default website background. And also changed the default font-family into ‘Segoe UI’ font-family which i had connected from google fonts.

In frame 2, I made the letters into uppercase which made the website heading more attractive and branding look! And as well as i changed the font into ‘Space Grotesk’.

In frame 3, I added a card effect to the whole section with a slight  decreasing the darkness to the background colour. Changed the default input box colour into another colour that matches to the background and also given the colour to the border of input box when the user focus on that input box and also added :disabled condition to ensure and make identification to the user that it is un-editable by making the darkness in background colour of the input box.

And also i added a fixed margin between texts and input boxes. Then i changed the submit button’s background colour into the default colour of the normal text which i saved in the :root function with white text.

Btw, i also changed the text such as balance into initial balance and pin into security pin etc..

In frame 4, As per the feedback i found that i made a lot of spelling mistaken in this frame. So i changed them into correct. Then i added the same background that i used in the frame 3 for the card. Then i added a successful tick mark icon at the top with green background with only using div tag. Then i changed the heading to ‘Account Created Successfully’ with a line break at before the text ‘Successfully’ which i had added span tag between them to change the colour of that word into green which gives more branding feel to the user! Then i added another sub-text below the heading. Then i created two cards one with holder name and another with account number.

At last changed the animation that from appearing left and hiding to right into hiding and showing at right with ease-in-out function and also changed the animation time from 3s into 1.2s which made the animation more faster and furious!

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()