Untitled

// This array represents the weights of the 9 balls
const ballArray = [1, 1, 1, 1, 1, 1, 1, 1, 1];

// Ask for the oddball (the ball that will be heavier) and make the corresponding 
// ball in the array heavier
// This way, the user input is not stored in any variable so you can't cheat this way
const oddBallIndex = prompt('Select the oddball [0-8]', 3);
ballArray[oddBallIndex] = 1.2;

// find the id 'ball-list'
const ballList = document.getElementById('ball-list');

// loop ball and create div for each ball and set different color
for (i = 0; i < ballArray.length; i++) {
  const ballDiv = document.createElement('div');
  if (i == oddBallIndex) {
    ballDiv.className = 'ball column box m-4 has-background-primary';
  } else {
    ballDiv.className = 'ball column box m-4 has-background-primary-light';
  }
  ballDiv.innerHTML = i;
  ballList.appendChild(ballDiv);
}

// weighting 1: find ids and add text to html
const left1Fetch = document.getElementById('left-1');
left1Fetch.innerHTML = '[0, 1, 2]';
const right1Fetch = document.getElementById('right-1');
right1Fetch.innerHTML = '[3, 4, 5]';
const result1Fetch = document.getElementById('result-1');
const conculusion1Fetch = document.getElementById('conclusion-1');

//weighting 1 caculate
const left1Weight = ballArray[0] + ballArray[1] + ballArray[2];
const right1Weight = ballArray[3] + ballArray[4] + ballArray[5];

// weighting 2: find ids
const left2Fetch = document.getElementById('left-2');
const right2Fetch = document.getElementById('right-2');
const result2Fetch = document.getElementById('result-2');
const conculusion2Fetch = document.getElementById('conclusion-2');

// get all ball div elements from 'ball-list'
const balls = document.getElementById('ball-list').children;

// first comparsion
if (left1Weight > right1Weight) {
  result1Fetch.innerHTML = 'left is heavier';
  conculusion1Fetch.innerHTML = 'oddball must be in [0, 1, 2]';
  left2Fetch.innerHTML = '[0]';
  right2Fetch.innerHTML = '[1]';

  // second comparsion
  if (ballArray[0] > ballArray[1]) {
    result2Fetch.innerHTML = 'left is heavier';
    conculusion2Fetch.innerHTML = `oddball is [0]`;
    balls[0].classList.add('has-border-primary-dark');
  } else if (ballArray[0] < ballArray[1]) {
    result2Fetch.innerHTML = 'right is heavier';
    conculusion2Fetch.innerHTML = `oddball is [1]`;
    balls[1].classList.add('has-border-primary-dark');
  } else {
    result2Fetch.innerHTML = 'balanced';
    conculusion2Fetch.innerHTML = `oddball is [2]`;
    balls[2].classList.add('has-border-primary-dark');
  }

  // first comparsion
} else if (left1Weight < right1Weight) {
  result1Fetch.innerHTML = 'right is heavier';
  conculusion1Fetch.innerHTML = 'oddball must be in [3, 4, 5]';
  left2Fetch.innerHTML = '[3]';
  right2Fetch.innerHTML = '[4]';

  // second comparsion
  if (ballArray[3] > ballArray[4]) {
    result2Fetch.innerHTML = 'left is heavier';
    conculusion2Fetch.innerHTML = `oddball is [3]`;
    balls[3].classList.add('has-border-primary-dark');
  } else if (ballArray[3] < ballArray[4]) {
    result2Fetch.innerHTML = 'right is heavier';
    conculusion2Fetch.innerHTML = `oddball is [4]`;
    balls[4].classList.add('has-border-primary-dark');
  } else {
    result2Fetch.innerHTML = 'balanced';
    conculusion2Fetch.innerHTML = `oddball is [5]`;
    balls[5].classList.add('has-border-primary-dark');
  }

  // first comparsion
} else {
  result1Fetch.innerHTML = 'balanced';
  conculusion1Fetch.innerHTML = 'oddball must be in [6, 7, 8]';
  left2Fetch.innerHTML = '[6]';
  right2Fetch.innerHTML = '[7]';

  // second comparsion
  if (ballArray[6] > ballArray[7]) {
    result2Fetch.innerHTML = 'left is heavier';
    conculusion2Fetch.innerHTML = `oddball is [6]`;
    balls[6].classList.add('has-border-primary-dark');
  } else if (ballArray[6] < ballArray[7]) {
    result2Fetch.innerHTML = 'right is heavier';
    conculusion2Fetch.innerHTML = `oddball is [7]`;
    balls[7].classList.add('has-border-primary-dark');
  } else {
    result2Fetch.innerHTML = 'balanced';
    conculusion2Fetch.innerHTML = `oddball is [8]`;
    balls[8].classList.add('has-border-primary-dark');
  }
}