Chemistry Resources Site

This website has many resources for studying chemistry, including a periodic table with data on the elements and a built in calculator.

Comment 2

Inspiration

Along with this hackathon, I hoped that during this weekend that I could prepare for the New Jersey Science League, which led to me wondering whether I could combine the two. I also wanted to learn about HTML/CSS/JS, but I couldn't come up with any motivating projects for me to try out. However, when thinking about projects for this hackathon, I came up with the idea of making a periodic table, which led to the recreation of a site of chemistry resources.

What it does

This website has 2 modes: a Periodic Table and a Scientific Calculator. The Periodic Table provides an interactive display of all 118 elements, along with data on each of them, taken from a GitHub repo. The Scientific Calculator is a calculator with more operators and provides and answers in scientific notation. Additionally, there is a credits page with information about sources used and fun facts about the making of the site.

How we built it and challenges we ran into

Both the Periodic Table and the Scientific Calculator are built off of the same idea: it consists of a grid that has labelled elements which, when clicked, change the display in some way. For the Periodic Table, I had to find a way to add in all 118 elements in a non-tedious way, which I did by going through all subshells of the elements and keeping note of what element it should be. The Calculator was simpler to construct with HTML and CSS, but the JavaScript section of it was insanely hard, since I chose to not use the very dangerous but _ very useful _ js eval() function, but instead recreating it in ~100 lines of code.

Accomplishments that we're proud of

I am proud that in my first major endeavor into web development, I was able to make a major product that I am very proud of, and that I was able to make a solid project with very minimal use of AI, only using google search to help with a couple of errors.

What we learned

I learned a lot about HTML/CSS/JS through experimenting with the website, including what each does, why each is important, and how all 3 speak to each other. I feel like if I was to make this website again, then I could complete it much quicker and in a much more concise manner.

What's next for Chemistry Resources Site

I could definitely expand Chemistry Resources Site, since the concept allows for many other ideas to be added. Maybe I could list important formulas in another tab, or maybe I program diagrams for atoms, or maybe I make a forum for people to share problems with one another. This website allows for so many possibilities, and, if given the chance, I would gladly spend another day working on this site.

Share this project:

Updates