<label for="inp1">Enter a row A - H</label>
<input id="inp1" placeholder="Enter Row">
<label for="inp2">Enter a column 1 - 12</label>
<input id="inp2" placeholder="Enter Column">
<button id="calculate">Calculate</button>
<p>The cell number is <b id="cellnum">?</b>

input,
button,
label {
  display: block;
  margin: 0 0 0.5rem;
}

const myRow = document.querySelector("#inp1");
const myCol = document.querySelector("#inp2");
const myButton = document.querySelector("#calculate");
const myAnswer = document.querySelector("#cellnum");
myButton.addEventListener("click", () => {
  var rowNumber = myRow.value.toUpperCase();
  var colNumber = myCol.value;
  var result = 0;
  switch (rowNumber) {
    case "A":
      rowNumber = 42;
      break;
    case "B":
      rowNumber = 36;
      break;
    case "C":
      rowNumber = 30;
      break;
    case "D":
      rowNumber = 24;
      break;
    case "E":
      rowNumber = 18;
      break;
    case "F":
      rowNumber = 12;
      break;
    case "G":
      rowNumber = 6;
      break;
    case "H":
      rowNumber = 0;
      break;
  }

  if (colNumber < 7) {
    result = rowNumber + parseInt(colNumber);
  } else {
    result = rowNumber + 42 + parseInt(colNumber);
  }
  myAnswer.innerHTML = result;
});