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.