Home About

Periodic Table

Click i for elemet info

Alkali metals

Alkaline earth metals

Transition metals

Post-transition metals

Metalloids

Reactive nonmetals

Noble gasses

Lanthanides

Actinides

Unknowns

1

18

1

H

Hydrogen

1.008

2

13

14

15

16

17

2

He

Helium

4.003

3

Li

Lithium

2.1

4

Be

Beryllium

9.0122

5

B

Boron

10.81

6

C

Carbon

12.011

7

N

Nitrogen

14.007

8

O

Oxygen

15.999

9

F

FLourine

14.007

10

Ne

Neon

20.180

11

Na

Sodium

22.990

12

Mg

Magnesium

24.305

3

4

5

6

7

8

9

10

11

12

13

Al

Aluminium

26.982

14

Si

Silicon

28.086

15

P

Phosph...

30.97

16

S

Sulphur

32.07

17

Cl

Chlorine

35.45

18

Ar

Argon

39.95

19

K

Potassium

39.10

20

Ca

Calcium

40.08

21

Sc

Scandium

44.96

22

Ti

Titanium

47.87

23

V

Vanadium

50.94

24

Cr

Chromium

52.00

25

Mn

Manganese

54.94

26

Fe

Iron

55.85

27

Co

Cobalt

58.93

28

Ni

Nickel

58.69

29

Cu

Copper

63.55

30

Zn

Zinc

65.38

31

Ga

Galium

69.72

32

Ge

Germanium

72.63

33

As

Arsenic

74.92

34

Se

Selenium

78.97

35

Br

Bromine

79.90

36

Kr

Krypton

83.80

37

Rb

Rubidium

83.80

38

Sr

Strontium

87.62

39

Y

Yttrium

88.906

40

Zr

Zirconium

91.224

41

Nb

Niobium

92.906

42

Mo

Molybdenum

95.94

43

Tc

Technetium

98.907

44

Ru

Ruthenium

101.07

45

Rh

Rhodium

102.906

46

Pd

Palladium

106.42

47

Ag

Argentum

107.868

48

Cd

Cadmium

112.411

49

In

Indium

144.818

50

Sn

Stannum

118.71

51

Sb

Stibium

121.76

52

Te

Tellurium

127.6

53

I

Iodine

126.904

52

Xe

Xenon

131.29

55

Cs

Cesium

132.905

56

Ba

Barium

137.327

57-71

Lanthanides

↓

72

Hf

Hafnium

178.49

73

Ta

Tantalum

178.49

74

W

Wolfram

178.49

75

Re

Rhenium

186.207

76

Os

Osmium

190.23

77

Ir

Iridium

192.22

78

Pt

Platinum

195.08

79

Au

Aurum

196.967

80

Hg

Hydrargyrum

196.967

81

Tl

Thallium

204.383

82

Pb

Plumbum

207.2

83

Bi

Bismuth

208.980

84

Po

Polonium

[208.982]

85

At

Astatine

209.987

86

Rn

Radon

222.018

87

Fr

Francium

223.020

88

Ra

Radium

226.025

89-103

Actinides

↓

104

Rf

Rutherfordium

[261]

105

Db

Dubnium

[262]

106

Sg

Seaborgium

[266]

107

Bh

Bohrium

[264]

108

Hs

Hassium

[269]

109

Mt

Meiterium

[268]

110

Ds

Darmstadt...

[269]

111

Rg

Roentgen...

[272]

112

Cn

Copernicium

[277]

113

Uut

Ununtrium

[Unkn]

114

Fl

Flerovium

[289]

115

Uup

Ununpentr...

[Unkn]

116

Lv

Livermore...

[298]

117

Uus

Ununsept...

[Unkn]

118

Uuo

Ununoctium

[Unkn]

Lanthanides

57

La

Lanthanum

138.906

58

Ce

Cerium

140.115

59

Pr

Praseodym...

140.908

60

Nd

Neodymium

144.24

61

Pm

Promethium

144.913

62

Sm

Samarium

150.36

63

Eu

Europium

151.966

64

Gd

Gadolinium

157.25

65

Tb

Terbium

158.925

66

Dy

Dysprosium

162.50

67

Ho

Hlomium

164.930

68

Er

Erbium

167.26

69

Tm

Thulium

168.934

70

Yb

Ytterbium

173.04

71

Lu

Lutetieum

174.967

Actinides

89

Ac

Actinium

227.028

90

Th

Thorium

232.038

91

Pa

Protactin...

227.028

92

U

Uranium

238.029

93

Np

Neptunium

237.048

94

Pu

Plutonium

244.064

95

Am

Americium

243.061

96

Cm

Curium

247.070

97

Bk

Berkelium

247.070

98

Cf

Californium

251.080

99

Es

Einsteinium

247.070

100

Fm

Fermium

247.070

101

Md

Mendelevium

258.1

102

No

Nobelium

259.101

103

Lr

Lawrencium

[262]


            
    There is more to this, but here is the core of how this table works.

fetch("./assets/periodicdata.json")
.then(response => response.json())
.then(data => displayElements(data));

const cards = document.querySelectorAll('.card')

const displayElements = (data) => {
    const tableMain = document.querySelector('.table-main');
    const closeModal = document.querySelector('.closeModal');
    const dataContainer = document.querySelector('.info-modal')

    tableMain.addEventListener('click',  e => {
        if (!e.target.matches('.card')) return
            let elemId = Number(e.target.id);
            for(let i = 0; i < data.elements.length; i++) {
                let i = elemId;
                const dataDisplay = document.querySelector('.data');
                let html =`
                <h1>${data.elements[i].name}</h1>
                <img src="${data.elements[i].image.url}" />
                <p>${data.elements[i].summary}</p>
                <div class="card-stats">
                    <img class="bmi" src="${data.elements[i].bohr_model_image}" />
                    <ul>
                        <li><span>Number: </span>${data.elements[i].number}</li>
                        <li><span>Phase: </span>${data.elements[i].phase}</li>
                        <li><span>Catagory: </span>${data.elements[i].category}</li>
                        <li><span>Mass: </span>${data.elements[i].atomic_mass}</li>
                    </ul>
                </div>
                `
                dataDisplay.innerHTML = html;
            }
            
        dataContainer.showModal()
            
    },{capture: true});

    closeModal.addEventListener('click', () => {
        dataContainer.close();
        ElemId = '';
    });
}

45

De

DeCommer

19.79