Ionic and Covalent Bonds

Prompt

Code a simulation in html, css, and javascript for a self-contained, complete, and embeddable file. This simulation should help secondary chemistry students learn the difference between ionic and covalent bonds when elements interact. Show how covalent bonds are generally between two or more nonmetals, and ionic bonds generally occur between a metal and a nonmetal. Use common compounds formed from elements in the periodic table. Use bright colors and animations to show the shared or transferred electrons. Label the elements clearly in the compound. Give the name of the compound. The general theme of the simulation should be navy blue, white, black, and gray. 

Iteration

Can you add 10 more covalent and ionic compounds to make a more complete set for the simulation?

Iteration 2

Can you also modify the simulation to show all the electron shells for each element and that the outermost shell is the one affected. Also, clean up key to show that the Nonmetal and Metal electrons have that label.