@najil_kilayil

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 7

Today iam going to continue the working on the App 2. I made that whenever the user clicks the ‘enter’ button in app 2 it will check that the both inputs are filled.

I thought if the boarding pass with the inputted name and selected flight might need to show in a new windows which makes more attractive and clean looking. That fore i just hardcoded the entire window (App 2.1) layout. Then also i thought that i need to add airport code and as well as boarding time which we need to show up on the boarding pass.

I made the boarding pass view in a totally glassmorphism effect which will be very linking to the desktop theme. Then i started to work in JS, i colloeted all the datas that need to be shown in the boarding pass when the user click on the button. After all the found the when the icon is clicked from desktop or from the bottom-right nav bar it will opeining the main app window but doesn’t opening the app 2.1 window, That for i asked help of chatGPT then i found that i need to put that also inside that of the createWindows(). After that it is working perfectly. But now i just hardcoded the date that shows in boarding pass so i made that to collect real date i choosen the default (normal way). Then i made that also dynamically.

At last i added the airport code for the arrival flights list also and made that shows in-between the brackets in the table of the App 1 which is more useful for a passengers.

Then i thought that i may change the hardcoded weather data in bottom-left navbar. For that i exported the API from Open Meteo with the temperature and as well as the weather code. I got the latitude and longitude of Delhi International Airport from google, Then i copied and declared thats into a two varibles. Then i created a function called ‘updateWeather()’ which will collect the datas from the API and as well as i thought that i need to display the emoji that match current temperature. For that i added weather code also in the API for further information i added that is there day-time ot night-time to make the emojis for accuracy. Then i asked the help to decode the weather code into emojis that for ChatGPT just tablulated the values and required emojis So i coded that as in if-elseif-else condition with emojis. Then also added that if in any case there doesn’t connect API it will show as ‘–’ with a emoji.

At last i called this function it when the bottom nav bar is shows. And also i added that time interval just for update the weather data in every 10minutes.

Devlog 6

Today iam going to create another app called “Boarding Pass”, In this app i would like to create a boarding pass for passengers. Before that i added the previous app icon into the bottom-right nav bar with hovering animation. Then i tried to add the icon of the app 2 it doesn’t visible like it is overlapping the icon of app 1. So after i tried so much time on that then unfortunately i forced to ask help of ChatGPT to solve that issue, Then i understand the logic then implemented on the project.

I started working on App2, that for i created the same design of out-layout that of the app 1, which i could save a little time there. Then i added a input box and as well as the option to select the flight from the list that i created previously on script.js file. At last enter button, it will collect all the datas that the user inputted. For first time i worked this app as testing and working completely perfect. But when i tried to work as original- opening the app 2 using the icon the windows is showing perfectly and the layout also perfect but the function are not working like options doesn’t showing and the button is not working. I tried to put the same codes under different function that i already created and used for app1. At last i found the real place that the functions are working perfectly. Now the option is showing with only first element in the list but we can’t change the selection or even can’t input any text in the input box. And also found that it only showing for first window if the user opens multiple window of the same app it will not show up the default option and doesn’t work the button functionalities. For that i updated ‘createWindows(tem)’ function by connecting using the parameters, Now its showing but still can’t input.

For that i doesn’t have any idea what is going on there, so i asked help for ChatGPT then found out a solution that update the function startDragging(e), if-condition if the app contains tags like ‘option’, ‘button’, ‘select’ and as well as ‘input’ it will remove the action of dragging, That means if the user tries to input or select the value option the function will run as by thinking that the user need to drag that for it will ready to listen the movement of the mouse, but while using this if-condition it will understand that the user trying to input or selecting. That for it working perfectly now.

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

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!