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!