Inspiration

Lewis structures are diagrams that show how electrons and atoms exist within bonds in a molecule. As any new chemistry student knows, this (and the related VSEPR theory) can take some time to understand, especially as there are many and a lack of an easily searchable, diverse set of examples to learn from.

What it does

This app provides both a large example set of various molecules, and an interactive "molecule builder" for the user to construct molecules and explore the rules from scratch. As the user builds the molecule, information such as the free electrons, types of bonds, and formal charge are computed in real time. Furthermore, additional scratch calculations are displayed on the right (such as total valence electrons, number of electrons in each type of element, atoms sorted by electronegativity, etc...).

(While the user is free to experiment with the rules (even perhaps creating molecules that may not exist in real life), the app will warn you if your molecule does not obey the basic rules of chemistry)

There is also a VSPER theory tie-in: if the user hovers over a central atom the group will be highlighted in orange. The arrangement of the atoms in the hovered group will be shown in the bottom left hand corner, as well as the name of the shape.

How we built it

Wrote the entire thing in HTML/JS/CSS.

Challenges we ran into/Accomplishments that we're proud of

Unfortunately we did not have time to work for the full duration of the Hackathon, so the entire website was written in one and a half days. However it's fully functional, tested, and we believe it's quite complete and user friendly. We were also able to test it against a large, diverse set of molecules (sourced from various homework assignments and the internet).

What's next for lewis-structure-calculator

Future additions for VSEPR theory would benefit from more computer visualization (notably have the app render a 3D model of how the atoms are arranged in the molecule).

Built With

Share this project:

Updates