Devlog 2

I thought that it is very time consuming by using current method - created div section in main div and the make the grid column and row position using CSS, it is really boring to repeat the process and may high chance to occur errors.

So i thought why should i create these using JavaScript, I decided to try it, I got an idea that i used in the other project to implement that to show as cards as one-by-one which are the data is in the array. So i created an array named ‘elements’ and inside that i created each arrays for each elements first i tried out with 10 elements to find out it will work or not!

In arrays i placed the number of the element, symbol of the element, and as well as the group and period number. Then i made that create an div section inside that of the main div with a condition that for each elements in the array with the grid column position as the number of the its element’s group and similarly row position as the number of period.

After all i created period upto 6 and found that there something more in period 6 and 7. At the third group of period 6 and 7 have more than 10 elements in group 3. So i thought now i may add them below as leaving a 8th row then place these in 9th and 10th row.

At last now the periodic table have more than 100vh that for i removed the heading from the top, Now its aligned perfectly then i created heading with position absolute and made to overlap the table to secure the space. Now its aligned perfectly. But i noticed that it is not responsive that fore it looking very bad in mobile screens.

Its time for the first ship!