@najil_kilayil

Devlog 5

Today i am going to improve the structure of app 1 (Flight overview).

That now its perfect as multiple windows and i almost solved all the logical and bugs issues that i had been noticed.

Now i thought to make for dynamic and useful to the user.

I already worked on the apps main layout as in width of 40% now i thinks make the top-left buttons such as coloured as red, yellow and green. Red button is already used for the closing the window. So i decided to choose green button for make the app in fullscreen. So first i tried to change the width off the main app div. But it seems very boring so i decided to change all the layouts when fullscreen.

In normal screen, the app is sub-divided into 2 sections - departure and arrival. But when it is in fullscreen it gives a bad view to the user when it still keep as 2 sections. So i decided to put them together.

For that i created another div inside the main div of the app and after the header div. then i putted everything (content of the app) inside that div ‘normalscreen’. After that again i copied and put inside another div which is called ‘fullscreen’. Now i think its time to work on css part of the app.

First i made the normalscreen as in view and another in hide. Then i made the content area’s div into flex-display to view both sections. then i removed the top main texts which i had made them clickable now i changed them into normal text-heading.

After all i spend in js,

I connected the icon then added if-condition that if that icon is exists and the user clicks on that icon and the user clicked icon’s window is matches to the app1 then normascreen will hide and show the fulscreen view also i made that to view the windows as centered to the screen to avoid moving below of the screen size (offsize) as default! Btw i added there to change the width and height of the window as well as.

Now its working good. But i noticed that the table aren’t showing when the window is it in fullscreen. After a research through the code and google i found that, i need to change the accessing points of the table id in js file. In first i just accessed the tables just using ‘document.getElementById’ which will only access one id which is already accessed from the normal screen. So changed that into ‘document.querySelectorAll’ which will access all the tale bodies which includes tables from normal screen and as well as fullscreen.

Now the fullscreen and its icon working perfect!

At last i made the yellow icon (mini icon) also functionable as same as the green icon (fullscreen) I done this code as same as the fullscreen icon just changed the normalscreen’s display into show and fullscreen’s into hide!

Now i thinks that app 1 is completed!

Devlog 4

In this devlog i am trying to make application “Flight Overview”.

Before that i found another logic issue that if the user multiple windows of same application it will open perfectly but there is another issue that it will open in where the pervious window it open like perfectly overlapping the pervious windows which makes not user-friendly.

So i decided to change the position to be visible the new window by updating the ‘createWindows(tem)’.

So i declared a variable ‘windowsOffset’ outside the function with value 0. Then i updated the variable into ‘windowsOffset + 30’ which will increate the value by 30 for each new windows. Then i styled the top and left with 50% + the variable value. Then finally added transform. By using this a new window s always 30px difference of left and top of the pervious windows. But i found that it will showing the window even after into the off screen like below the page. To solve that i added a if-condition that if the variable value is greater than 180 it will automatically reset into 0 then start again. Then i found another issue that when multiple windows are present if the user try to focus on the first window(backmost in appearance) it will not come forward it keeps there!

To solve that i created another function called bringToFront() with one parameter. Before that i just declared a variable with the value 1000. In the function the variable will be incremented by 1 and initialize the value into the z-index of the element. Then i called this function in startdragging() function!

Now its all perfect!

Now lets start to build the app

First off all i sub divvied the content section into two one is departure and another is arrival. My plan is simple as default show the departure flight status and if the user clicks on the arrival it show the arrival flight status. both as a table form.

So it is very task to hardcode the table so i made a list then of all flight details such as flight number, destination, gate, status and also the icon that matches the status. I asked chatGPT to give me random 10 flight details in tabular sheet. then i converted that into list for myself!

Then i created a function called loadFlightTable() with two parameters. One for accessing the list to be showed on the table and another is id of the table. Then i added innerHTML for table id.

Also i given the suitable icon status for each of them green colour for boarding and on time, blue for delayed flights, yellow for final call, red for cancelled flight and grey for scheduled flights which the user can identify the status easily!

Similarly worked for arrival flights with another list and called the function same way! Then another confusing part came. I got confusion that where should i declare the buttons to change the table of showing, should i need to declare outside of every function or inside the create function. At last i thought lets try putting everything inside the function. So i putted everything inside the createWindows(), called the variables from html document, then added eventlistern for both departure and arrival options. then changed the table view into hide and show using display as block and none!

Devlog 3

I planned to create a application “Flight Overview” which shows the departure and arrival flight details.

For that i created a div-section for that. Then i added the same css style of welcome that this also. Also i added closing icon to this window. Then i made that when the user clicks on the icon_1 then this app will open up and i made that draggable and closable when click on the closeable icon.

Then i created 2 more icons near to the closing icon which i planned that to give the function that yellow icon for the current normal small size window and green icon for the maximize the window (full screen window).

Then i added the title of the application in the header section with centered using position

Then there is another complicated bug i found, when the user clicks on the icon for the first time it will open perfectly but when the user clicks again on the same icon without closing the previous window, we actually thinks that it will open new window, right? But it doesn’t show new window it feels like it is an error that not working our icon or our clicking issue. After a deep break and think i got an idea!

I created a function called ‘createWindows()’ with one parameter. In this function it will clone everything that had in the window section. Then it will clone into a new with new id, i used ‘Date()’ function to make that perfectly unique which had time travel is not possible :) So 100% sure that it will be a unique id. Then that will show to the page as block. Then made that also draggable. Then there is another complications that it will very risky to function the closeWindow() so i added if-condition in the createWindows() to check that window had a close icon if it had make when the user clicks on the icon it will run closeWindow() function. At last it will return the newWindows.

As a result we can remove openWindow()!

Devlog 2

Today, i made more changes in this project! First i added bottom navbar also. I divided the bottom nav bar into two with the ratio of 2:3 width. On left-side i added a texts like ‘terminal 2’, the location of the user but now i didn’t connect it and one more text which shows the weather of that place. and on the right-side bottom navbar i would like to add app icons and more in the future.

Then i added the image for wallpaper which i had downloaded earlier. So now i added that image into background of the body. As well as i deicided to make the website whole the effect of a glassmorphism. So using the help of ChatGPT i selected the colour shadows and etc. Then i added them into :root function of css!

After that i made the welcome to hide after 3 seconds automatically and also shows the bottom nav bar completely. Then i created a section for showing desktop icons and which has been only shows after hiding welcome screen.

In this project i would like to complete a mission “WebOS”. So i selected a theme of airport which will the user can use in as airport assistant. I have a narrow plan in my mind i didn’t know exactly how should i will execute my plan from my mind, Let me try!

Devlog 1

I created files such as index.html, style.css, script.js and as well as i downloaded a wallpaper of airport wal1.jpeg.According to mission guide i first created a welcome screen with very few text, i thought that may i add more text content in the future!

Anyway i added a header also to drag the window and a red-coloured circle icon which may use as close icon in the future.

Then i created a top navbar which is few margin from the top and also centered the screen with a width of 80%. Then i added a text at left-side as main heading and current date and time at the right-side on the navbar .

Btw, i made a css function :root which can make user-defined variables which can use the variables as constants.

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

Devlog #9
Now, i got a another funny plan, earn points to unlock features such as copy and edit when user earn and collect the points. So i defined the points as keys and with emoji of a key which is more suitable for this website theme!

So i added a div section that shows the total keys that user collects at the top-right on the website and also added how many keys are collected from each note list, so i added the keys amount on each list.

And i created my own principle to calculate the keys earned per list note, The keys are calculated based on letter count. 1 key per 4 letter count. If the letter count is less than 4 the key will be 0 and if the letter count is 10 that fore the keys count is 2. that is, if letter count is not completely divisible by 4 the nearest completely divided value is selected. This is the major logic for my keys calculating system!

Then i added another animation text which will show up when the user hovered on the top-right keys points section.

i decided that to unlock copy feature need more than 100 and 150 keys for unlock editing feature. So i added if-else condition inside the editMsg() and copyMsg() functions, when the amount on keys is less than that of it will show up a alert with how much keys more needed to unlock that feature.

Its very booring to show as default browser alerting system so i thought why should i alert this through keysinfo area. So i just created a function called infoKey() with a parameter ‘text’ which will help to reduce complicity and retyping the code again and again!

Then to make for carzy and funny appearence changed the default mouse pointer into a key emoji and made the movement based on collect xy axis of the mouse using js and also hided the defult icon in body style area

Devlog #8
Today i changed the head title and subtitle from the top into the bottom with input box. And made the both sections for dynamic as well as the user focus in and focus out in the input box.

Now i thought to add copy and edit options for each notes. For that i changed the render()’s html with edit and copy button tags as similar as delete button, then i created each funcion called editMsg() and copyMsg(). To work the editMsg(), when the user selects and click on the note that the user need to edit, the text will appear as well as with the input box got autofocus in and the text to be edited is automaticaly typed in the input box. Added a if-else condition to identify the user is sending new note or it is already existing and editing, if it is exisits and the user is editing then submiting again the note will rechange into new one!

In copyMsg(), i simply used ddefault navigor function with clipboard connection and with the value to copy the user selected text.

I just added the normal ‘alert’ feature at first when the user click on copy and it successfully copied and when successfully edited the note. I got a plan to make the “alert notiications” more attactive and dynamic.

So added another section div inside the bottom area div then animated as popup from bottom and going back to bottom (outside the page), with that time the heading and subhead section become small width and then came back to normal when the alert is disappeared for this animation i used js of its very complicated to re-use whenever it needs (for edit and copy button). So i created a function alertNoti() with two parameters!

Then solved some scrolling bugs i found that the website is automatically scrolling down as well as according to the movement of the background dots. So i disabled all the overflow of the all elements including body and excluding section div, which make the website only scroll and show the scroll bar when the section list is overflow!

Devlog #7
Today, i added lock emoji icon moeving with overlapping effect animation in PIN screen using CSS and CSS function keyframe. At that time i got another idea why should i add something like this animation on the background, So i just created a tiny-dot and added the same animation function then i connected with JS to visible multiple tiny-dots at a time using for-loop with same animation. Btw i used a root value in CSS for the both animation to delay the animation according to there class count, which will gave the animation at different timeing!

Then i changed the input box of the PIN screen into a completely invisible and only shows the dots so PIN with colours (as green for correct and red with shakeing the dots animation for incorrect PIN)..

I got a inspiration from a reel that i saw on Instagram today where the website is completely with theme of term GLASSMORPHISM. then i thought to add this theme into my project so changes the opacity of everything into .7 and remove some of the border and background colour and some with background colour with transparent!

Then I added a header at main screen with fixed position of the main and sub headings with the same theme glassmorphism effect!