Element Atlas

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!

Element Atlas

I would like to make a virtual periodic table that user can learn and explore how the elements are arranged. I planning to complete this website only using HTML, CSS and JavaScript, By approaching by step-by-step process.

Step 1 : Create Periodic Table 
Step 2 : Add more information in periodic table
Step 3 : Find the element its details by search bar
Step 4 : Add realistic visual representations
Step 5 : Learn mode - Quiz and memory game etc

these are the steps only iam thinking to work on, I would like plan more to add more features in future!

Devlog 1

Created basic files such as index.html, style.css, and script.js then linked all the files together.

Then in html file created the basic tags and code needed for every website. I selected a color palette from Google which seems to a dark-blue shade, i thought it may give a perfect experience for the user to explore.

Then the first challenge came.. How should i make the periodic table in order. Finally i decided to created all the periodic table inside that of a div section and made that to be displayed as the grid with 18 columns and also i doesn’t initialized number of rows i thought that to be make as default in order of the creation of elements.

Then a subdivided each elements using div the set-up grid column and row number.