jscode.js

let mycompound = 'H2O'
const sum = (arr) => arr.reduce((a, b) => Number(a) + Number(b), 0) 
let elements

const threshold = 1e-6
const {sin, cos, PI} = Math
const radians = PI/180
fetch('elementdata.json') //fetches the necessary element data from a JSON file
    .then(response => response.json())
    .then(data => {
        elements = data
        main(mycompound)
    })

const nameE1 = document.getElementById('name')
const centeratomE1 = document.getElementById("center-atom")
const sigmabondsE1 = document.getElementById('sigma-bonds')
const pibondsE1 = document.getElementById('pi-bonds')
const hybridizationE1 = document.getElementById('hybridization')
const shapeE1 = document.getElementById('vsepr-shape')
const bondE1 = document.getElementById('bond-type')

function get_compound(compound){ //turns the string containing the name of the compound into two arrays
    clist = compound.split("")
    elms = []
    nums = []

    for(var i=clist.length-1; i>=0; i--){
        mychar = clist[i]
        nextchar = clist[i+1]
        if (('a' <= mychar.toLowerCase() && mychar.toLowerCase() <= 'z') && ('A' <= nextchar && nextchar <= 'Z')){
            clist.splice(i+1, 0, '1')
        }
    }
    if(!('0' <= clist[-1] && clist[-1] <= '9')){
        clist.push('1')
    }

    j = 0
    while(j < clist.length){
        if('a' <= clist[j] && clist[j] <= 'z'){
            clist[j-1] += clist[j]
            clist.splice(j, 1)
        }
        j++
    }
    
    for(i=0; i < clist.length-1; i+=2){
        elms.push(clist[i])
        nums.push(clist[i+1])
    }
    return [elms, nums]
}

function get_electronegativities(elms){ //gets the respective electronegativities for each element
    ens = []
    for(const elm of elms){
        ens.push(elements.elements[elm].electronegativity)
    }
    return ens
}

function get_center(elms){ // returns the center element
    ens = get_electronegativities(elms)
    min = Math.min(...ens)
    return elms[ens.indexOf(min)]
}

function get_valence(elms, nums){ // gets the total valence electrons for the compound
    valence = 0
    for(i=0; i < elms.length; i++) {
        elm = elms[i]
        valence += elements.elements[elm].valence * nums[i]
    }
    return valence
}

function get_req_valence(elms, nums){ //gets the number of electrons needed to satisfy octets
    req_valence = 0
    for(i=0; i<elms.length; i++){
        if(elms[i] == 'H'){
            req_valence += 2 * nums[i]
        }
        else if(elms[i] == 'B'){
            req_valence += 6 * nums[i]
        }
        else{
            req_valence += 8 * nums[i]
        }
    }
    return req_valence
}

function draw_bonds(n, angle, i){
    x_offset = sin(radians * angle * i) * 0.15
    y_offset = cos(radians * angle * i) * -0.15

    if(n==1){
        xbonds.push(0.5 * cos(radians * theta * i))
        xbonds.push( 1.5 * cos(radians * theta * i))
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i))
        ybonds.push(1.5 * sin(radians * theta * i))
        ybonds.push(null)
    }
    else if(n==2){
        xbonds.push(0.5 * cos(radians * theta * i) + x_offset/2)
        xbonds.push( 1.5 * cos(radians * theta * i) + x_offset/2)
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i) + y_offset/2)
        ybonds.push(1.5 * sin(radians * theta * i) + y_offset/2)
        ybonds.push(null)
        xbonds.push(0.5 * cos(radians * theta * i) - x_offset/2)
        xbonds.push( 1.5 * cos(radians * theta * i) - x_offset/2)
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i) - y_offset/2)
        ybonds.push(1.5 * sin(radians * theta * i) - y_offset/2)
        ybonds.push(null)
    }
    else {
        xbonds.push(0.5 * cos(radians * theta * i) + x_offset)
        xbonds.push( 1.5 * cos(radians * theta * i) + x_offset)
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i) + y_offset)
        ybonds.push(1.5 * sin(radians * theta * i) + y_offset)
        ybonds.push(null)
        xbonds.push(0.5 * cos(radians * theta * i))
        xbonds.push( 1.5 * cos(radians * theta * i))
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i))
        ybonds.push(1.5 * sin(radians * theta * i))
        ybonds.push(null)
        xbonds.push(0.5 * cos(radians * theta * i) - x_offset)
        xbonds.push( 1.5 * cos(radians * theta * i) - x_offset)
        xbonds.push(null)
        ybonds.push(0.5 * sin(radians * theta * i) - y_offset)
        ybonds.push(1.5 * sin(radians * theta * i) - y_offset)
        ybonds.push(null)
    }
}

function clearplots(){
    Plotly.purge('plot')
    Plotly.purge('plot2')
}

function main(mycompound){
const [elms, nums] = get_compound(mycompound)
console.log(elms)
console.log("nums " + nums)
center = get_center(elms)
nvalence = get_valence(elms, nums) //Stores the total number of valence electrons available in the compound
req_valence = get_req_valence(elms, nums) //Stores the number of valence electrons needed to satisfy octets


nbonds = sum(nums) - 1
console.log("nbonds " + nbonds)
bonds = Array(nbonds).fill(1)


console.log(bonds)
console.log(nbonds)
while(2*sum(bonds) + nvalence < req_valence){ //increases bond order until octets are satisfied
    for(i=0; i<nbonds; i++){
        bonds[i] += 1
        if(2*sum(bonds) +nvalence >= req_valence){
            break
        }
    }
}
console.log('bonds: ' + bonds)
theta = 360/nbonds //stores the angle of the bonds so that they are evenly spaced in the diagram

if(nbonds==3){
    theta = 90
}
xcoords = [] //stores the x-coordinates of each of the atoms
ycoords = [] //stores the y-coordinates of each of the atoms
texts = [] //stores the atoms to label
xcoords.push(0) //adds the coordinates of the center atom (0, 0)
ycoords.push(0) 
texts.push(center) //adds the symbol of the center atom 
xbonds = [] //stores the x-coordinates of the bonds
ybonds = [] //stores the y-coordinates of the bonds
totalelms = []
for(i=0; i<nums.length;i++){ //creates an array storing all of the elements (e.g. [H, H, O])
    num = nums[i]
    for(j=0; j<num; j++){
        totalelms.push(elms[i])
    }
}
index = totalelms.indexOf(center)
totalelms.splice(index, 1) //removes the center element
terminal = totalelms //terminal stores all of the terminal atoms
console.log('theta ' +  theta)

for(i=0; i<nbonds;i++){
    draw_bonds(bonds[i], theta, i)
    texts.push(terminal[i])
    xcoords.push(2 * cos(radians * theta * i))
    ycoords.push(2 * sin(radians * theta * i))
}

for(i=0; i<xbonds.length; i++){
    //if(Math.abs(xbonds[i]) < 0.00001){
        //xbonds[i] = 0
    //}
    if(Math.abs(ybonds[i]) < 0.00001){
        ybonds[i] = 0
    }
}
console.log('x values ' + xbonds)
console.log('y values ' + ybonds)
const atoms = {
  x: xcoords,
  y: ycoords,
  mode: 'text',
  text: texts,
  textposition: 'middle center',
  textfont: {
    size: 35,
    color: 'black'
  }
}


const layout = {
  autosize: false,
  width: 500,
  height: 500,
  xaxis: { visible: false,
           range: [-3, 3],
           constrain: 'domain'
   },
  yaxis: { 
           visible: false,
           scaleanchor: 'X',
           scaleratio: 1,
           range: [-3, 3]
   },
  showlegend: false,

    margin: {
        l: 0,
        r: 0,
        b: 0,
        t: 0,
        pad: 0
    },

}

const bondtrace = {
    x: xbonds,
    y: ybonds,
    mode: 'lines',
    line: {width: 2,
        color: 'black'
    }
}

Plotly.newPlot('plot', [bondtrace, atoms], layout)

//This part of code will deal with the 3D VESPR model.


//lone_pairs = 4 - sum(bonds) //calculate lone pairs on the central atom
lone_pairs = (nvalence-(2*nbonds) - (req_valence-8 - 2*nbonds))/2
electron_domains = nbonds // calculates shared electron domains
console.log('lone' + lone_pairs)
if(lone_pairs < 0){
    lone_pairs = 0
}

const layout3D = {
    scene: {
        aspectmode: 'cube',
        xaxis: {visible: false},
        yaxis: {visible: false},
        zaxis: {visible: false}
    },
      margin: {
        l: 0,
        r: 0,
        b: 0,
        t: 0,
        pad: 0
    },
}


totalelms = terminal //stores the elements being displayed in the VSEPR diagram

xpos = [] //stores the x-positions of the atoms
ypos = [] //stores the y-positions of the atoms
zpos = [] //stores the z-positions of the atoms

xbonds3D = [] //stores the x-values of the bonds
ybonds3D = [] //stores the y-values of the bonds
zbonds3D = [] //stores the z-values of the bonds
mycolors = [] //stores the colors of the atoms
sizes = [] //stores the sizes of the atoms
shape = elements.shape[electron_domains][lone_pairs]
console.log(shape)
if(shape == 'linear' && electron_domains == 2){ //creates a linear diagram if the VSEPR shape of the compound is linear
    xpos = [0.5, 0, -0.5]
    ypos = [0, 0, 0]
    zpos = [0.5, 0, -0.5]
    totalelms.splice(1, 0, center)
    xbonds3D = [0, 0.5, null, 0, -0.5]
    ybonds3D = [0, 0, null, 0, 0]
    zbonds3D = [0, 0.5, null, 0, -0.5]
    mycolors = ['blue', 'red', 'blue']
    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1*0.5, centersize*0.5]
}
else if(shape == 'linear'){ //checks if it is a compound with only 1 bond
    xpos = [0.25, -0.25]
    ypos = [0, 0]
    zpos = [0.25, -0.25]
    totalelms.push(center)
    xbonds3D = [0.25, -0.25, null]
    ybonds3D = [0, 0, null]
    zbonds3D = [0.25, -0.25, null]
    mycolors = ['blue', 'blue']
    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1*0.5, centersize*0.5]


} 

else if(shape == 'bent'){
    totalelms.push(center)
    xpos = [0.43, -0.43, 0]
    ypos = [0, 0, 0]
    zpos = [0.25, 0.25, 0]
    xbonds3D = [0, 0.43, null, 0, -0.43]
    ybonds3D = [0, 0, null, 0, 0]
    zbonds3D = [0, 0.25, null, 0, 0.25]
    mycolors = ['blue', 'blue', 'red']

    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1*0.5, centersize*0.5]
}

else if(shape == 'trigonal planar'){
    totalelms.push(center)
    xpos = [0.43, -0.43, 0, 0]
    ypos = [0, 0, 0, 0]
    zpos = [0.25, 0.25, -0.5, 0]
    xbonds3D = [0, 0.43, null, 0, -0.43, null, 0, 0, null]
    ybonds3D = [0, 0, null, 0, 0, null, 0, 0, null]
    zbonds3D = [0, 0.25, null, 0, 0.25, null, 0, -0.5, null]
    mycolors = ['blue', 'blue', 'blue', 'red']

    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1*0.5, size1*0.5, centersize*0.5]
}

else if(shape == 'tetrahedral'){
    totalelms.push(center)
    xpos = [-0.23, -0.23, 0.47, 0, 0]
    ypos = [-0.4, 0.4, 0, 0, 0]
    zpos = [-0.16, -0.16, -0.16, 0.5, 0]
    mycolors = ['blue', 'blue', 'blue', 'blue', 'red']
    xbonds3D = [0, -0.23, null, 0, -0.23, null, 0, 0.47, null, 0, 0, null]
    ybonds3D = [0, -0.4, null, 0, 0.4, null, 0, 0, null, 0, 0, null]
    zbonds3D = [0, -0.16, null, 0, -0.16, null, 0, -0.16, null, 0, 0.5, null]

    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1*0.5, size1*0.5, size1*0.5, centersize * 0.5]
}

else if(shape == 'square planar'){
    totalelms.push(center)
    xpos = [0.5, -0.5, 0, 0, 0]
    ypos = [0, 0, 0.5, -0.5, 0]
    zpos = [0, 0, 0, 0, 0]
    mycolors = ['blue', 'blue', 'blue', 'blue', 'red']
    xbonds3D = [0, 0.5, null, 0, -0.5, null, 0, 0, null, 0, 0, null]
    ybonds3D = [0, 0, null, 0, 0, null, 0, 0.5, null, 0, -0.5, null]
    zbonds3D = [0, 0, null, 0, 0, null, 0, 0, null, 0, 0, null]
    
    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1*0.5, size1*0.5, size1*0.5, centersize * 0.5]
}

else if(shape == 'trigonal pyramidal'){
    totalelms.push(center)
    xpos = [-0.23, -0.23, 0.46, 0]
    ypos = [-0.4, 0.4, 0, 0]
    zpos = [-0.18, -0.18, -0.18, 0]
    mycolors = ['blue', 'blue', 'blue', 'red']
    xbonds3D = [0, -0.23, null, 0, -0.23, null, 0, 0.46, null]
    ybonds3D = [0, -0.4, null, 0, 0.4, null, 0, 0, null]
    zbonds3D = [0, -0.18, null, 0, -0.18, null, 0, -0.18, null]
    
    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1*0.5, size1*0.5, size1*0.5, centersize * 0.5]

}    

else if(shape == 'trigonal bipyramidal'){
    totalelms.push(center)
    xpos = [0, 0, 0.5, -0.25, -0.25, 0]
    ypos = [0, 0, 0, 0.43, -0.43, 0]
    zpos = [0.5, -0.5, 0, 0, 0, 0]
    mycolors = ['blue', 'blue', 'blue', 'blue', 'blue', 'red']
    xbonds3D = [0, 0, null, 0, 0, null, 0, 0.5, null, 0, -0.25, null, 0, -0.25, null]
    ybonds3D = [0, 0, null, 0, 0, null, 0, 0, null, 0, 0.43, null, 0, -0.43, null]
    zbonds3D = [0, 0.5, null, 0, -0.5, null, 0, 0, null, 0, 0, null, 0, 0, null]

    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1 * 0.5, size1*0.5, size1*0.5, size1*0.5, centersize * 0.5]

}
else if(shape == 'octahedral'){
    totalelms.push(center)
    xpos = [-0.5, 0.5, 0, 0, 0, 0, 0]
    ypos = [0, 0, -0.5, 0.5, 0, 0, 0]
    zpos = [0, 0, 0, 0, -0.5, 0.5, 0]
    mycolors = ['blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'red']
    xbonds3D = [0, -0.5, null, 0, 0.5, null, 0, 0, null, 0, 0, null, 0, 0, null, 0, 0, null]
    ybonds3D = [0, 0, null, 0, 0, null, 0, -0.5, null, 0, 0.5, null, 0, 0, null, 0, 0, null]
    zbonds3D = [0, 0, null, 0, 0, null, 0, 0, null, 0, 0, null, 0, -0.5, null, 0, 0.5, null]

    size1 = elements.elements[totalelms[1]].radius
    centersize = elements.elements[center].radius
    sizes = [size1 * 0.5, size1 * 0.5, size1 * 0.5, size1*0.5, size1*0.5, size1*0.5, centersize * 0.5]
}
const atoms3D = { //controls the atoms being displayed in the VSEPR diagram
    type: 'scatter3d',
    mode: 'markers+text',
    x: xpos,
    y: ypos,
    z: zpos,
    text: totalelms,
    textposition: 'top center',
    marker: {size: sizes,
            color: mycolors
    }
}


const bonds3D = { //controls the bonds in the VSEPR diagram
    type: 'scatter3d',
    mode: 'lines',
    x: xbonds3D,
    y: ybonds3D,
    z: zbonds3D,
    line: {width: 5,
        color: 'black'
    }
}

Plotly.newPlot('plot2', [atoms3D, bonds3D], layout3D) //plots the VSEPR diagram

// This section of the code will calculate hybridization orbital, pi bonds, and sigma bonds.

sigma_bonds = nbonds //calculates the number of sigma bonds
pi_bonds = sum(bonds) - nbonds //calculates the number of pi bonds
hybrid_orbital = elements.hybridization[lone_pairs+nbonds] //calculates the steric number to find hybridization orbital
console.log(hybrid_orbital)

//this section of the code will find the name of the compound
cname = ''

if(elms.length == 2){
cname = ""

if(nums[0] > 1){
    cname += elements.prefixes[nums[0]]
}

firstelm = elements.elements[elms[0]].name
newfirstelm = firstelm.toLowerCase()
cname += newfirstelm
cname += " "

//calculates the second part of the name using string concatenation
secondpart = elements.prefixes[nums[1]]
secondpart += elements.elements[elms[1]].ending
mylength = elements.prefixes[nums[1]].length
arr2 = secondpart.split('')

if(arr2[mylength] == arr2[mylength-1]){
    arr2.splice(mylength, 1) //removes vowels next to each other (e.g. monooxide becomes monoxide)
}

second = arr2.join("")
cname += second
cname = cname.charAt(0).toUpperCase() + cname.slice(1)
console.log(cname)
}
else if(elms.length == 1 && elms[0] == 'O'){
    if(nums[0] == 2){
        cname = 'Oxygen'
    }
    else{
        cname = 'Ozone'
    }
}
else if(elms.length == 1){
    elmname = elements.elements[elms[0]].name
    cname = elmname
}

console.log(cname)

bond_type = 'Polar' //stores the bond type, which is either polar or nonpolar

//switches the bond type to nonpolar if the electronegativity difference is less than or equal to 0.4
if(elements.elements[totalelms[0]].electronegativity - elements.elements[center].electronegativity <= 0.4){
    bond_type = 'Nonpolar'
}
const nameE1 = document.getElementById('name')
const centeratomE1 = document.getElementById("center-atom")
const sigmabondsE1 = document.getElementById('sigma-bonds')
const pibondsE1 = document.getElementById('pi-bonds')
const hybridizationE1 = document.getElementById('hybridization')
const shapeE1 = document.getElementById('vsepr-shape')
const bondE1 = document.getElementById('bond-type')
nameE1.textContent = cname
centeratomE1.textContent = elements.elements[center].name
sigmabondsE1.textContent = sigma_bonds
pibondsE1.textContent = pi_bonds
hybridizationE1.textContent = hybrid_orbital
shapeE1.textContent = shape
bondE1.textContent = bond_type
}

document.getElementById("submitbtn").addEventListener('click', () => {
    const mycompound = document.getElementById("compoundInput").value.trim();

    if(!mycompound){
        alert("Please enter a compound")
        return;
    }

    clearplots();
    main(mycompound)
})