Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="top">
      <h1 class="title">Periodic Table of the Elements</h1>
      <div class="group-label"></div>
    </div>
    <div class="full-table">
      <div class="main-table">
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">1</p>
            <h1 class="symbol">H</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">3</p>
            <h1 class="symbol">Li</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">11</p>
            <h1 class="symbol">Na</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">19</p>
            <h1 class="symbol">K</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">37</p>
            <h1 class="symbol">Rb</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">55</p>
            <h1 class="symbol">Cs</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">87</p>
            <h1 class="symbol">Fr</h1>
          </div>
        </div>
        <div class="group">
          <div class="element alkaline-earth-metal">
            <p class="number">4</p>
            <h1 class="symbol">Be</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">12</p>
            <h1 class="symbol">Mg</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">20</p>
            <h1 class="symbol">Ca</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">38</p>
            <h1 class="symbol">Sr</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">56</p>
            <h1 class="symbol">Ba</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">88</p>
            <h1 class="symbol">Ra</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">21</p>
            <h1 class="symbol">Sc</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">39</p>
            <h1 class="symbol">Y</h1>
          </div>
          <a id="lanthanoids-holder" class="holder" title="Lanthanoids" href="https://www.dylanbyars.com"></a>
          <a id="actinoids-holder" class="holder" title="Actinoids" href="https://github.com/dbyars">
          </a>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">22</p>
            <h1 class="symbol">Ti</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">40</p>
            <h1 class="symbol">Zr</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">72</p>
            <h1 class="symbol">Hf</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">104</p>
            <h1 class="symbol">Rf</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">23</p>
            <h1 class="symbol">V</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">41</p>
            <h1 class="symbol">Nb</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">73</p>
            <h1 class="symbol">Ta</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">105</p>
            <h1 class="symbol">Db</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">24</p>
            <h1 class="symbol">Cr</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">42</p>
            <h1 class="symbol">Mo</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">74</p>
            <h1 class="symbol">W</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">106</p>
            <h1 class="symbol">Sg</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">25</p>
            <h1 class="symbol">Mn</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">43</p>
            <h1 class="symbol">Tc</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">75</p>
            <h1 class="symbol">Re</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">107</p>
            <h1 class="symbol">Bh</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">26</p>
            <h1 class="symbol">Fe</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">44</p>
            <h1 class="symbol">Ru</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">76</p>
            <h1 class="symbol">Os</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">108</p>
            <h1 class="symbol">Hs</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">27</p>
            <h1 class="symbol">Co</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">45</p>
            <h1 class="symbol">Rh</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">77</p>
            <h1 class="symbol">Ir</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">109</p>
            <h1 class="symbol">Mt</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">28</p>
            <h1 class="symbol">Ni</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">46</p>
            <h1 class="symbol">Pd</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">78</p>
            <h1 class="symbol">Pt</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">110</p>
            <h1 class="symbol">Ds</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">29</p>
            <h1 class="symbol">Cu</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">47</p>
            <h1 class="symbol">Ag</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">79</p>
            <h1 class="symbol">Au</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">111</p>
            <h1 class="symbol">Rg</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">30</p>
            <h1 class="symbol">Zn</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">48</p>
            <h1 class="symbol">Cd</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">80</p>
            <h1 class="symbol">Hg</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">112</p>
            <h1 class="symbol">Cn</h1>
          </div>
        </div>
        <div class="group">
          <div class="element metalloid">
            <p class="number">5</p>
            <h1 class="symbol">B</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">13</p>
            <h1 class="symbol">Al</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">31</p>
            <h1 class="symbol">Ga</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">49</p>
            <h1 class="symbol">In</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">81</p>
            <h1 class="symbol">Tl</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">113</p>
            <h1 class="symbol">Nh</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">6</p>
            <h1 class="symbol">C</h1>
          </div>
          <div class="element metalloid">
            <p class="number">14</p>
            <h1 class="symbol">Si</h1>
          </div>
          <div class="element metalloid">
            <p class="number">32</p>
            <h1 class="symbol">Ge</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">50</p>
            <h1 class="symbol">Sn</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">82</p>
            <h1 class="symbol">Pb</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">114</p>
            <h1 class="symbol">Fl</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">7</p>
            <h1 class="symbol">N</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">15</p>
            <h1 class="symbol">P</h1>
          </div>
          <div class="element metalloid">
            <p class="number">33</p>
            <h1 class="symbol">As</h1>
          </div>
          <div class="element metalloid">
            <p class="number">51</p>
            <h1 class="symbol">Sb</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">83</p>
            <h1 class="symbol">Bi</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">115</p>
            <h1 class="symbol">Mc</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">8</p>
            <h1 class="symbol">O</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">16</p>
            <h1 class="symbol">S</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">34</p>
            <h1 class="symbol">Se</h1>
          </div>
          <div class="element metalloid">
            <p class="number">52</p>
            <h1 class="symbol">Te</h1>
          </div>
          <div class="element metalloid">
            <p class="number">84</p>
            <h1 class="symbol">Po</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">116</p>
            <h1 class="symbol">Lv</h1>
          </div>
        </div>
        <div class="group">
          <div class="element halogen">
            <p class="number">9</p>
            <h1 class="symbol">F</h1>
          </div>
          <div class="element halogen">
            <p class="number">17</p>
            <h1 class="symbol">Cl</h1>
          </div>
          <div class="element halogen">
            <p class="number">35</p>
            <h1 class="symbol">Br</h1>
          </div>
          <div class="element halogen">
            <p class="number">53</p>
            <h1 class="symbol">I</h1>
          </div>
          <div class="element halogen">
            <p class="number">85</p>
            <h1 class="symbol">At</h1>
          </div>
          <div class="element halogen">
            <p class="number">117</p>
            <h1 class="symbol">Ts</h1>
          </div>
        </div>
        <div class="group">
          <div class="element noble-gas">
            <p class="number">2</p>
            <h1 class="symbol">He</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">10</p>
            <h1 class="symbol">Ne</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">18</p>
            <h1 class="symbol">Ar</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">36</p>
            <h1 class="symbol">Kr</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">54</p>
            <h1 class="symbol">Xe</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">86</p>
            <h1 class="symbol">Rn</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">118</p>
            <h1 class="symbol">Og</h1>
          </div>
        </div>
      </div>
      <div class="f-block">
        <div id="lanthanoids" class="series">
          <div class="element rare-earth">
            <p class="number">57</p>
            <h1 class="symbol">La</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">58</p>
            <h1 class="symbol">Ce</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">59</p>
            <h1 class="symbol">Pr</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">60</p>
            <h1 class="symbol">Nd</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">61</p>
            <h1 class="symbol">Pm</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">62</p>
            <h1 class="symbol">Sm</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">63</p>
            <h1 class="symbol">Eu</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">64</p>
            <h1 class="symbol">Gd</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">65</p>
            <h1 class="symbol">Tb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">66</p>
            <h1 class="symbol">Dy</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">67</p>
            <h1 class="symbol">Ho</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">68</p>
            <h1 class="symbol">Er</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">69</p>
            <h1 class="symbol">Tb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">70</p>
            <h1 class="symbol">Yb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">71</p>
            <h1 class="symbol">Lu</h1>
          </div>
        </div>
        <div id="actinoids" class="series">
          <div class="element actinoid">
            <p class="number">89</p>
            <h1 class="symbol">Ac</h1>
          </div>
          <div class="element actinoid">
            <p class="number">90</p>
            <h1 class="symbol">Th</h1>
          </div>
          <div class="element actinoid">
            <p class="number">91</p>
            <h1 class="symbol">Pa</h1>
          </div>
          <div class="element actinoid">
            <p class="number">92</p>
            <h1 class="symbol">U</h1>
          </div>
          <div class="element actinoid">
            <p class="number">93</p>
            <h1 class="symbol">Np</h1>
          </div>
          <div class="element actinoid">
            <p class="number">94</p>
            <h1 class="symbol">Pu</h1>
          </div>
          <div class="element actinoid">
            <p class="number">95</p>
            <h1 class="symbol">Am</h1>
          </div>
          <div class="element actinoid">
            <p class="number">96</p>
            <h1 class="symbol">Cm</h1>
          </div>
          <div class="element actinoid">
            <p class="number">97</p>
            <h1 class="symbol">Bk</h1>
          </div>
          <div class="element actinoid">
            <p class="number">98</p>
            <h1 class="symbol">Cf</h1>
          </div>
          <div class="element actinoid">
            <p class="number">99</p>
            <h1 class="symbol">Es</h1>
          </div>
          <div class="element actinoid">
            <p class="number">100</p>
            <h1 class="symbol">Fm</h1>
          </div>
          <div class="element actinoid">
            <p class="number">101</p>
            <h1 class="symbol">Md</h1>
          </div>
          <div class="element actinoid">
            <p class="number">102</p>
            <h1 class="symbol">No</h1>
          </div>
          <div class="element actinoid">
            <p class="number">103</p>
            <h1 class="symbol">Lr</h1>
          </div>
        </div>
      </div>
    </div>
<!--     <div id="screen-width"></div> -->
              
            
!

CSS

              
                // Import fonts
@import url(https://fonts.googleapis.com/css?family=Muli);
// Set sizing variables
$box-dimension: 5vw;
$expanded-dimension: calc(#{$box-dimension} * 1.97);
$f-block--padding-left: calc((2 * #{$box-dimension}) + 2vw + 6px);
$f-block--padding-right: calc(#{$box-dimension} + 2vw + 2px);
// Color palette
$background--color: #F2EFE9;
$text--color: #071108;
$other-non-metal--color: #1AFF00;
$alkali-metal--color: #FF0C00;
$alkaline-earth-metal--color: #FF6700;
$transition-metal--color: #FF54A4;
$metalloid--color: #FFB800;
$post-transition-metal--color: #FF762E;
$halogen--color: #00EEFF;
$noble-gas--color: #0E94FF;
$lanthanoid--color: #FF006A;
$actinoid--color: #FF00C6;
// Begin styles
*,
*:before,
*:after {
  box-sizing: border-box;
  color: $text--color
}

body {
  background-color: $background--color;
  font-family: 'Muli', sans-serif;
}

.top {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.title {
  display: none;
}

.group-label {
  display: none;
  transition: 75ms ease-out;
}

.full-table {
  margin: 0 auto 20vh;
  width: 100vw;
  position: relative;
}

.main-table {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 2vw;
}

.group {
  display: flex;
  flex-direction: column;
}

.element {
  display: flex;
  justify-content: center;
  position: relative;
  width: $box-dimension;
  height: $box-dimension;
  margin: 1px;
  border-radius: 2px;
  transition: 0.2s linear;
}

.number {
  position: absolute;
  top: 8%;
  right: 8%;
  font-size: 1.2vw;
  transition: inherit;
}

.symbol {
  position: absolute;
  bottom: 8%;
  left: 8%;
  font-size: 2.1vw;
  transition: inherit;
}

.name {
  display: flex;
  align-self: flex-end;
  margin-bottom: 8%;
  font-size: 1.4vw;
  transition: 250ms linear;
  opacity: 0;
}

.element__expanded {
  height: $expanded-dimension;
  width: $expanded-dimension;

  .number {
    font-size: 1.7vw;
  }

  .symbol {
    left: 8%;
    bottom: 26%;
    font-size: 3.2vw;
  }

  .name {
    opacity: 1;
  }
}

.holder {
  @extend .element;
  border: 2px dotted #ccc;
}

.f-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  // The 2 series stack on top of each other in the f-block
  padding-left: $f-block--padding-left;
  // padding-right: $f-block--padding-right;
  // margin-bottom: 20vh;
}

.series {
  display: flex;
  flex-direction: row;
}

// When an element is hovered on, it gets a bit bigger (for large screens)
@media (min-width: 761px) {

  .group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vw;
    width: 42%;
    font-size: 3.5vw;
    border-radius: 3vw;
  }

  .title {
    display: inline;
    font-size: 6vw;
    margin: 3vh 0 2vh;
    color: $text--color;
  }

  .element:hover {
    transition-delay: 30ms;
    cursor: pointer;
    height: $expanded-dimension;
    width: $expanded-dimension;

    .symbol {
      font-size: 3.2vw;
      bottom: 26%;
    }

    .number {
      font-size: 1.7vw;
    }

    .name {
      opacity: 1;
    }
  }

  // Holder pulses with the series it's holding a spot for... when I build it.
  .holder:hover {
    transition-delay: 0;
    cursor: pointer;
    height: $box-dimension;
    width: $box-dimension;
  }
}

// Set some colors
.other-non-metal {
  background-color: $other-non-metal--color;
}

.alkali-metal {
  background-color: $alkali-metal--color;
}

.alkaline-earth-metal {
  background-color: $alkaline-earth-metal--color;
}

.transition-metal {
  background-color: $transition-metal--color;
}

.metalloid {
  background-color: $metalloid--color;
}

.post-transition-metal {
  background-color: $post-transition-metal--color;
}

.halogen {
  background-color: $halogen--color;
}

.noble-gas {
  background-color: $noble-gas--color;
}

.rare-earth {
  background-color: $lanthanoid--color;
}

.actinoid {
  background-color: $actinoid--color;
}

              
            
!

JS

              
                const elementInfo = {
  H: {
    name: "Hydrogen",
    radioactive: false,
    category: "Non-metal"
      // date discovered
      // discoverer
      // unexpected symbol
      // interesting facts
  },
  He: {
    name: "Helium",
    radioactive: false,
    category: "Noble Gas"
  },
  Li: {
    name: "Lithium",
    radioactive: false,
    category: "Alkali Metal"
  },
  Be: {
    name: "Berylium",
    radioactive: false,
    category: "Alkaline Earth Metal"
  },
  B: {
    name: "Boron",
    radioactive: false,
    category: "Metalloid"
  },
  C: {
    name: "Carbon",
    radioactive: false,
    category: "Non-metal"
  },
  N: {
    name: "Nitrogen",
    radioactive: false,
    category: "Non-metal"
  },
  O: {
    name: "Oxygen",
    radioactive: false,
    category: "Non-metal"
  },
  F: {
    name: "Flourine",
    radioactive: false,
    category: "Halogen"
  },
  Ne: {
    name: "Neon",
    radioactive: false,
    category: "Noble Gas"
  },
  Na: {
    name: "Sodium",
    radioactive: false,
    category: "Alkali Metal"
  },
  Mg: {
    name: "Magnesium",
    radioactive: false,
    category: "Alkaline Earth Metal"
  },
  Al: {
    name: "Aluminium",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Si: {
    name: "Silicon",
    radioactive: false,
    category: "Metalloid"
  },
  P: {
    name: "Phosphorous",
    radioactive: false,
    category: "Non-metal"
  },
  S: {
    name: "Sulfur",
    radioactive: false,
    category: "Non-metal"
  },
  Cl: {
    name: "Chlorine",
    radioactive: false,
    category: "Halogen"
  },
  Ar: {
    name: "Argon",
    radioactive: false,
    category: "Noble Gas"
  },
  K: {
    name: "Potassium",
    radioactive: false,
    category: "Alkali Metal"
  },
  Ca: {
    name: "Calcium",
    radioactive: false,
    category: "Alkaline Earth Metal"
  },
  Sc: {
    name: "Scandium",
    radioactive: false,
    category: "Transition Metal"
  },
  Ti: {
    name: "Titanium",
    radioactive: false,
    category: "Transition Metal"
  },
  V: {
    name: "Vanadium",
    radioactive: false,
    category: "Transition Metal"
  },
  Cr: {
    name: "Chromium",
    radioactive: false,
    category: "Transition Metal"
  },
  Mn: {
    name: "Manganese",
    radioactive: false,
    category: "Transition Metal"
  },
  Fe: {
    name: "Iron",
    radioactive: false,
    category: "Transition Metal"
  },
  Co: {
    name: "Cobalt",
    radioactive: false,
    category: "Transition Metal"
  },
  Ni: {
    name: "Nickel",
    radioactive: false,
    category: "Transition Metal"
  },
  Cu: {
    name: "Copper",
    radioactive: false,
    category: "Transition Metal"
  },
  Zn: {
    name: "Zinc",
    radioactive: false,
    category: "Transition Metal"
  },
  Ga: {
    name: "Gallium",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Ge: {
    name: "Germanium",
    radioactive: false,
    category: "Metalloid"
  },
  As: {
    name: "Arsenic",
    radioactive: false,
    category: "Metalloid"
  },
  Se: {
    name: "Selenium",
    radioactive: false,
    category: "Non-metal"
  },
  Br: {
    name: "Bromine",
    radioactive: false,
    category: "Halogen"
  },
  Kr: {
    name: "Krypton",
    radioactive: false,
    category: "Noble Gas"
  },
  Rb: {
    name: "Rubidium",
    radioactive: false,
    category: "Alkali Metal"
  },
  Sr: {
    name: "Strontium",
    radioactive: false,
    category: "Alkaline Earth Metal"
  },
  Y: {
    name: "Yttrium",
    radioactive: false,
    category: "Transition Metal"
  },
  Zr: {
    name: "Zirconium",
    radioactive: false,
    category: "Transition Metal"
  },
  Nb: {
    name: "Niobium",
    radioactive: false,
    category: "Transition Metal"
  },
  Mo: {
    name: "Molybdenum",
    radioactive: false,
    category: "Transition Metal"
  },
  Tc: {
    name: "Technetium",
    radioactive: true,
    category: "Transition Metal"
  },
  Ru: {
    name: "Ruthenium",
    radioactive: false,
    category: "Transition Metal"
  },
  Rh: {
    name: "Rhodium",
    radioactive: false,
    category: "Transition Metal"
  },
  Pd: {
    name: "Palladium",
    radioactive: false,
    category: "Transition Metal"
  },
  Ag: {
    name: "Silver",
    radioactive: false,
    category: "Transition Metal"
  },
  Cd: {
    name: "Cadmium",
    radioactive: false,
    category: "Transition Metal"
  },
  In: {
    name: "Indium",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Sn: {
    name: "Tin",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Sb: {
    name: "Antimony",
    radioactive: false,
    category: "Metalloid"
  },
  Te: {
    name: "Tellurium",
    radioactive: false,
    category: "Metalloid"
  },
  I: {
    name: "Iodine",
    radioactive: false,
    category: "Halogen"
  },
  Xe: {
    name: "Xenon",
    radioactive: false,
    category: "Noble Gas"
  },
  Cs: {
    name: "Cesium",
    radioactive: false,
    category: "Alkali Metal"
  },
  Ba: {
    name: "Barium",
    radioactive: false,
    category: "Alkaline Earth Metal"
  },
  La: {
    name: "Lanthanum",
    radioactive: false,
    category: "Lanthanoid"
  },
  Ce: {
    name: "Cerium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Pr: {
    name: "Praseodymium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Nd: {
    name: "Neodymium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Pm: {
    name: "Promethium",
    radioactive: true,
    category: "Lanthanoid"
  },
  Sm: {
    name: "Samarium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Eu: {
    name: "Europium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Gd: {
    name: "Gadolinium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Tb: {
    name: "Terbium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Dy: {
    name: "Dysprosium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Ho: {
    name: "Holmium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Er: {
    name: "Erbium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Tm: {
    name: "Thulium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Yb: {
    name: "Ytterbium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Lu: {
    name: "Lutetium",
    radioactive: false,
    category: "Lanthanoid"
  },
  Hf: {
    name: "Hafnium",
    radioactive: false,
    category: "Transition Metal"
  },
  Ta: {
    name: "Tantalum",
    radioactive: false,
    category: "Transition Metal"
  },
  W: {
    name: "Tungsten",
    radioactive: false,
    category: "Transition Metal"
  },
  Re: {
    name: "Rhenium",
    radioactive: false,
    category: "Transition Metal"
  },
  Os: {
    name: "Osmium",
    radioactive: false,
    category: "Transition Metal"
  },
  Ir: {
    name: "Iridium",
    radioactive: false,
    category: "Transition Metal"
  },
  Pt: {
    name: "Platinum",
    radioactive: false,
    category: "Transition Metal"
  },
  Au: {
    name: "Gold",
    radioactive: false,
    category: "Transition Metal"
  },
  Hg: {
    name: "Mercury",
    radioactive: false,
    category: "Transition Metal"
  },
  Tl: {
    name: "Thallium",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Pb: {
    name: "Lead",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Bi: {
    name: "Bismuth",
    radioactive: false,
    category: "Post-transition Metal"
  },
  Po: {
    name: "Polonium",
    radioactive: true,
    category: "Metalloid"
  },
  At: {
    name: "Astatine",
    radioactive: true,
    category: "Halogen"
  },
  Rn: {
    name: "Radon",
    radioactive: true,
    category: "Noble Gas"
  },
  Fr: {
    name: "Francium",
    radioactive: true,
    category: "Alkali Metal"
  },
  Ra: {
    name: "Radium",
    radioactive: true,
    category: "Alkaline Earth Metal"
  },
  Ac: {
    name: "Actinium",
    radioactive: true,
    category: "Actinoid"
  },
  Th: {
    name: "Thorium",
    radioactive: true,
    category: "Actinoid"
  },
  Pa: {
    name: "Protactinium",
    radioactive: true,
    category: "Actinoid"
  },
  U: {
    name: "Uranium",
    radioactive: true,
    category: "Actinoid"
  },
  Np: {
    name: "Neptunium",
    radioactive: true,
    category: "Actinoid"
  },
  Pu: {
    name: "Plutonium",
    radioactive: true,
    category: "Actinoid"
  },
  Am: {
    name: "Americium",
    radioactive: true,
    category: "Actinoid"
  },
  Cm: {
    name: "Curium",
    radioactive: true,
    category: "Actinoid"
  },
  Bk: {
    name: "Berylium",
    radioactive: true,
    category: "Actinoid"
  },
  Cf: {
    name: "Californium",
    radioactive: true,
    category: "Actinoid"
  },
  Es: {
    name: "Einsteinium",
    radioactive: true,
    category: "Actinoid"
  },
  Fm: {
    name: "Fermium",
    radioactive: true,
    category: "Actinoid"
  },
  Md: {
    name: "Mendelevium",
    radioactive: true,
    category: "Actinoid"
  },
  No: {
    name: "Nobelium",
    radioactive: true,
    category: "Actinoid"
  },
  Lr: {
    name: "Lawrencium",
    radioactive: true,
    category: "Actinoid"
  },
  Rf: {
    name: "Rutherfordium",
    radioactive: true,
    category: "Transition Metal"
  },
  Db: {
    name: "Dubnium",
    radioactive: true,
    category: "Transition Metal"
  },
  Sg: {
    name: "Seaborgium",
    radioactive: true,
    category: "Transition Metal"
  },
  Bh: {
    name: "Bohrium",
    radioactive: true,
    category: "Transition Metal"
  },
  Hs: {
    name: "Hassium",
    radioactive: true,
    category: "Transition Metal"
  },
  Mt: {
    name: "Meitnerium",
    radioactive: true,
    category: "Transition Metal"
  },
  Ds: {
    name: "Darmstadtium",
    radioactive: true,
    category: "Transition Metal"
  },
  Rg: {
    name: "Roentgenium",
    radioactive: true,
    category: "Transition Metal"
  },
  Cn: {
    name: "Copernicium",
    radioactive: true,
    category: "Transition Metal"
  },
  Nh: {
    name: "Nihonium",
    radioactive: true,
    category: "Post-transition Metal"
  },
  Fl: {
    name: "Flerovium",
    radioactive: true,
    category: "Post-transition Metal"
  },
  Mc: {
    name: "Moscovium",
    radioactive: true,
    category: "Post-transition Metal"
  },
  Lv: {
    name: "Livermorium",
    radioactive: true,
    category: "Post-transition Metal"
  },
  Ts: {
    name: "Tennessine",
    radioactive: false,
    category: "Halogen"
  },
  Og: {
    name: "Oganesson",
    radioactive: true,
    category: "Noble Gas"
  }
}

// Color palette
const colors = {
  'background': '#F2EFE9',
  'other-non-metal': '#1AFF00',
  'alkali-metal': '#FF0C00',
  'alkaline-earth-metal': '#FF6700',
  'transition-metal': '#FF54A4',
  'metalloid': '#FFB800',
  'post-transition-metal': '#FF762E',
  'halogen': '#00EEFF',
  'noble-gas': '#0E94FF',
  'rare-earth': '#FF006A',
  'actinoid': '#FF00C6'
}

// Viewport width
const viewportSize = $('.full-table').width()

$('#screen-width').text(viewportSize)

// For every element...
$('.element').each(function() {
  // Append an h3 to the element with its name
  const elementSymbol = $(this).children('.symbol').text()
  const elementName = elementInfo[elementSymbol]['name']
  $(this).append(`<h3 class="name">${elementName}</h3>`)
})

// Events for mobile screen sizes
if (viewportSize <= 760) {
  $('.element').on('click', function(){
    // Check that the element clicked isn't already expanded
    if ($(this).hasClass('element__expanded')) {
      $(this).removeClass('element__expanded')
    } else {
      // Remove the expanded classes from whatever element has them currently (previously clicked element)
      $('.element').removeClass('element__expanded')
      // Add the expanded classes to the currently selected element
      $(this).addClass('element__expanded')
    }
    // Show the selected element's category type in hovered mode
    // const elementSymbol = $(this).children('.symbol').text()
    // const elementCategory = elementInfo[elementSymbol]['category']
    // $(this).append(`<h3 class="category">${elementCategory}</h3>`)
  })
}

// Events for larger screen size
if (viewportSize > 760) {
  $('.element').removeClass('element__expanded')
  // Helpful tip on what the corner number is for large screens
  $('.number').attr('title', 'Atomic Number')

  // Hover effects only large screens can enjoy
  $('.element').hover(
    function() {
      const elementSymbol = $(this).children('.symbol').text()
      const elementName = elementInfo[elementSymbol]['name']
      const elementCategory = elementInfo[elementSymbol]['category']
      const categoryColorSelector = $(this).attr('class').replace(/element /, '')
      const groupLabelColor = colors[categoryColorSelector]
      const isRadioactive = elementInfo[elementSymbol]['radioactive']
        // Display hovered element's category name under the title
      $('.group-label').text(elementCategory)
        // Make the background of the category label box the color of the hovered category
      $('.group-label').css('background-color', groupLabelColor)
      //   // Add some attributes to the element to be used later
      // $(this).attr({
      //   "title": elementName,
      //   "data-isRadioactive": isRadioactive
      // })
    },
    // When moved from hovering this element...
    function() {
      // Remove the group label box and set its background color back to the page's background color
      $('.group-label').text('')
      $('.group-label').css('background-color', colors['background'])
    }
  )
}

// When an element is clicked...
$('.element').on('click', function() {
  const elementNumber = $(this).children('.number').text()
  const elementName = $(this).attr("title")

  // // Check to see if the clicked element is radioactive
  if ($(this).attr("data-isRadioactive") === "true") {
    alert(`Watch out! ${elementName} is radioactive, yo!`)
  }
  // Make the Periodic Videos URL
  const videoUrl = () => {
      let urlNumber = [...elementNumber]
      while (urlNumber.length < 3) {
        urlNumber.unshift('0')
      }
      return `http://periodicvideos.com/videos/${urlNumber.join('')}.htm`
    }
    // Open the video for this element in a new tab if you want to watch it
  if (confirm(`${elementName} video?`)) {
    window.open(videoUrl())
  }
})

              
            
!
999px

Console