Periodic Table Group (Jha, Hayward, Thapa)
Our group worked on making the periodic table for the ChemTutor website. Most of the code for the periodic table was already available to us in HTML and CSS but we took some time to figure out how everything worked. We made lots of changes to the code and prepared six different HTML static pages. The first static page simply involves the periodic table with color coded groups and states of matter and a description of those color codes in the legend. We have also included non-colored tables among the six HTML files. We worked with the 'box-sizing: border-box' property which applies to all the elements in the HTML file. In order to maintain the structure of the periodic table, we made the boxes in the empty <li> tags non-responsive to the cursor and their borders invisible. The periodic table might be imported by various other parts of the website as appropriate using <frameset>, <frame> tags or through HTML5 template engines like Thymeleaf.
User application
This HTML is meant to serve as a reference for chemistry students. Each individual box in the periodic table expands if the user hovers the cursor over it, and it stays expanded when clicked until the user clicks elsewhere.
Files needed
In order to successfully view the periodic table on a browser, we need all six HTML and their corresponding six CSS files in the same directory, or change the href in the <link rel=“stylesheet” href=“/path”/> element inside the <head></head> of the HTML document as appropriate (the location of the CSS files if not in the same directory as the corresponding HTML file).
Usage Requirements
All that's needed in order to view any of the pages is a browser that supports HTML5.
