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!