Problems with my first calculator (JavaScript (no html,css)

Question

I have almost finished my first calculator, but I have a problem. How my calculator works is pretty simple, it asks for input via window.prompt and then adds, substracts, multiplies or divides according to what the user types. However, I've encountered a problem. I want to make it so if the user makes a spelling mistake in the keywords for the operator, it still counts; and make it so if it is realy badly typed, ask the user to type it again. Here's the code:

var num2 = window.prompt('Type in your second number')

num1 = parseFloat(num1)
num2 = parseFloat(num2)

var operator = window.prompt('Type in your operator (\"add\", \"substract\",  \"multiply\", \"divide")')

if (isNaN(num1)) {
    document.write('Please enter numbers (input1) ')
}
if (isNaN(num2)) {
    document.write('Please enter numbers (input2) ')
}

switch (operator) {
    case 'add':
    document.write(num1 + num2)
    break
  case 'substract':
    document.write(num1 - num2)
    break
  case 'multiply':
    document.write(num1 * num2)
    break
  case 'divide':
    document.write(num1 / num2)
    break
}```

Also, if you have any suggestions to improve my code, it would help. Im a very newbie programmer and I would consider this my first "project

Answer 1

Although your code will work, you also asked for any improvement suggestions.

I'd like to propose a more user-friendly approach that is very forgiving to the user input. (and won't require them to spell their operands)

This would require more complex code to handle this, but I think the end result will be more enjoyable.

I've done a naughty thing here, and used the eval() function to "cheat". If you just need to run this locally for yourself, you're good, but if you want to publish/share this calculator with others, you'll want to replace this with some code to parse out the equation and apply the math accordingly.

document.getElementById('input').addEventListener('input', function(e){
  var outputStr = '';
  var inputStr = this.value;
  //Can we parse the input string to get an eqation?
  //Initial support is +,-,*,/
  //(addition, subtraction, multiplication, division)
  try{
    outputStr = eval(inputStr);
    //          ^^^^ this is not a good idea (too wide open)
    //TODO: we want to parse out the parts of the equation (variables and operators) likely calling .split() on the input string, based on a regular expression
  } catch(ex){
    outputStr = 'Hmmm, invalid expression';
  }
  document.getElementById('output').innerHTML = outputStr;
});

<label for="input">Math expression</label>
<input type="text" id="input"/><br/>
Answer: <div id="output"></div>

Answer 2

If you just need a simple program that behaves like a calculator in plain JS try to edit your code like this

function calculator() {
  let num1;
  do {
      num1 = window.prompt('Type in your first number');
      if (num1 === null) {
        alert('Calculator terminated');
        return;
      }
      num1 = parseFloat(num1);
      if (isNaN(num1)) {
        alert('Please enter a valid number for num1');
      }
  } while(isNaN(num1));

  let num2;
  do {
      num2 = window.prompt('Type in your second number');
      if (num2 === null) {
        alert('Calculator terminated');
        return;
      }
      num2 = parseFloat(num2);
      if (isNaN(num2)) {
        alert('Please enter a valid number for num2');
      }
  } while(isNaN(num2));

  let operator;
  do {
      operator = window.prompt('Type in your operator (\"add\", \"substract\",  \"multiply\", \"divide")');
      
      if (operator === null) {
        alert('Calculator terminated');
        return;
      }
      
      switch (operator) {
          case 'add':
          alert(num1 + " + " + num2 + " = " + (num1 + num2));
          break
        case 'substract':
          alert(num1 + " - " + num2 + " = " + (num1 - num2));
          break
        case 'multiply':
          alert(num1 + " * " + num2 + " = " + (num1 * num2));
          break
        case 'divide':
          alert(num1 + " / " + num2 + " = " + (num1 / num2));
          break
        default:
          alert('Please enter a valid operator (add, substract, multiply, divide)');
          break
      }
  } while(operator !== 'add' && operator !== 'substract' && operator !== 'multiply' && operator !== 'divide')

}

calculator();

Answer 3

Here is where is become important to understand the value of functions. And separating human thinking from the problem. Instead think of it more like a task list.

In order to perform our task we need:

1. A valid operator, Add, Subtract etc.
2. 2 valid numbers.

So first off lets get the user to give us a valid operator:

const getValidOperator = () => {
  // Lets store our allowed operations in an array. 
  const allowed = ['add', 'subtract', 'multiply', 'divide'];
  
  const prompt = `Please select an operator from:\n ${allowed.join('\n')}`;
  
  // We will keep looping until we get a valid response.
  while(true) {
    const res = window.prompt(prompt);
    
    // Using the Array.some() method we can check 
    // if user entry is in allowed list.
    if(allowed.some(a => a === res.toLowerCase())){
      return res;
    }
  } 
}

// Just test code.
document.querySelector('p').innerText = getValidOperator();

<p></p>

At this point it is probably starting to seem obvious, we need to have a method for getting a valid number. So lets write that as well.

const getValidNumber = () => {  
  const prompt = 'Please enter a valid number:';
  
  // We will keep looping until we get a valid response.
  while(true) {
    const res = window.prompt(prompt);  
    if(!isNaN(res)) {
      return res;
    }  
  } 
}

// Just test code.
document.querySelector('p').innerText = getValidNumber();

<p></p>

Now, we need our calculator function. But we already know we have a valid operator. So we do not need to use a switch, instead we can call operators directly.

const calculator = {
  add: (p1, p2) => `${p1} + ${p2} = ${p1 + p2}`,
  subtract: (p1, p2) => `${p1} - ${p2} = ${p1 - p2}`,
  multiply: (p1, p2) => `${p1} * ${p2} = ${p1 * p2}`,
  divide: (p1, p2) => `${p1} / ${p2} = ${p1 / p2}`,
};

document.querySelector('p').innerText = calculator['add'](1,2);

<p></p>

Now, let's put all that together:

const getValidOperator = () => {
  // Lets store our allowed operations in an array. 
  const allowed = ['add', 'subtract', 'multiply', 'divide'];

  const prompt = `Please select an operator from:\n ${allowed.join('\n')}`;

  // We will keep looping until we get a valid response.
  while (true) {
    const res = window.prompt(prompt);

    // Using the Array.some() method we can check 
    // if user entry is in allowed list.
    if (allowed.some(a => a === res.toLowerCase())) {
      return res;
    }
  }
}



const getValidNumber = () => {
  const prompt = 'Please enter a valid number:';

  // We will keep looping until we get a valid response.
  while (true) {
    const res = window.prompt(prompt);
    if (!isNaN(res)) {
      return res;
    }
  }
}


const calculator = {
  add: (p1, p2) => `${p1} + ${p2} = ${p1 + p2}`,
  subtract: (p1, p2) => `${p1} - ${p2} = ${p1 - p2}`,
  multiply: (p1, p2) => `${p1} * ${p2} = ${p1 * p2}`,
  divide: (p1, p2) => `${p1} / ${p2} = ${p1 / p2}`,
};

document.querySelector('#doCalc').addEventListener('click', () => {
  const num1 = getValidNumber();
  const num2 = getValidNumber();
  const op = getValidOperator();

  document.querySelector('p').innerText = calculator[op](num1, num2);

});

<h1>Calculator</h1>
<p></p>
<button id="doCalc">Click to Start</button>

From here we can take the next step. Lets make it extensible, so that if we add a new operator it just works. Instead of having a fixed array of allowed operators, lets reflect over our calculator using Object.keys(). Using this technique we can add a new method to calculator and it magically becomes available.

const getValidOperator = (calculator) => {
  const allowed = Object.keys(calculator);
  const prompt = `Please select an operator from:\n ${allowed.join('\n')}`;

  // We will keep looping until we get a valid response.
  while (true) {
    const res = window.prompt(prompt);

    // Using the Array.some() method we can check 
    // if user entry is in allowed list.
    if (allowed.some(a => a === res.toLowerCase())) {
      return res;
    }
  }
}



const getValidNumber = () => {
  const prompt = 'Please enter a valid number:';

  // We will keep looping until we get a valid response.
  while (true) {
    const res = window.prompt(prompt);
    if (!isNaN(res)) {
      return res;
    }
  }
}

const calculator = {
  add: (p1, p2) => `${p1} + ${p2} = ${p1 + p2}`,
  subtract: (p1, p2) => `${p1} - ${p2} = ${p1 - p2}`,
  multiply: (p1, p2) => `${p1} * ${p2} = ${p1 * p2}`,
  divide: (p1, p2) => `${p1} / ${p2} = ${p1 / p2}`,
  mod: (p1, p2) => `${p1} % ${p2} = ${p1 % p2}`
};

document.querySelector('#doCalc').addEventListener('click', () => {
  const num1 = getValidNumber();
  const num2 = getValidNumber();
  const op = getValidOperator(calculator);
  document.querySelector('p').innerText = calculator[op](num1, num2);
});

<h1>Calculator</h1>
    <p></p>
    <button id="doCalc">Click to Start</button>