Help with Calculator

I have just started studying JavaScript and while I get what is being taught, I am suffering somewhat from being able to ‘think’ like a developer and of course, the complete lack of experience. The course I am taking does an okay job of explaining individual components of JS but does not spend a great deal of time putting it all together to help build that bigger picture (I find this, unfortunately, true of almost all online courses).

So I am here to get some help with some ‘homework’ as it were. Below is the HTML for the calculator and I have to write the JS to make it work. It is a basic function calculator, nothing all that complicated. This came on the heels of lesson on jQuery. I have spent a couple of days on how to approach this and am lost. So I have looked at some other examples on line to get some ideas and in my mind, it seemed easy, but all the code I have looked at seems way beyond what the classes covered.

So, that all said, I do not want it done for me, after all, I am trying to learn, but I think I am going to need some pretty big shoves in the right direction.

My thoughts were to create an array that held all the numeric buttons and then capture their values when pressed. Then map the function buttons in some manner (addButton = a + b;) or something along those lines. Seems simple in my head, but I am just not grasping how to implement it. Can anyone help out in giving me some direction/help, etc?

<html>
<head>

<style>
button {
font-size: 200%;
width: 40px;
}

input {
font-size: 14px;
height: 40px;
text-align: right;
}

</style>
</head>

<body>

<table>
<tr>
  <td colspan="4"><input id="display" name="display" disabled></input></td>
</tr>

<tr>
  <td><button id="button1" value="1">1</button></td>
  <td><button id="button2" value="2">2</button></td>
  <td><button id="button3" value="3">3</button></td>
  <td><button id="addButton">+</button></td>
</tr>
<tr>
  <td><button id="button4" value="4">4</button></td>
  <td><button id="button5" value="5">5</button></td>
  <td><button id="button6" value="6">6</button></td>
  <td><button id="subtractButton">-</button></td>
</tr>
<tr>
  <td><button id="button7" value="7">7</button></td>
  <td><button id="button8" value="8">8</button></td>
  <td><button id="button9" value="9">9</button></td>
  <td><button id="multiplyButton">*</button></td>
</tr>
<tr>
  <td><button id="clearButton">C</button></td>
  <td><button id="button0" value="0">0</button></td>
  <td><button id="equalsButton">=</button></td>
  <td><button id="divideButton">&#247;</button></td>
</tr>



</table>

<span id='output'><!-- Use this span for writing debug messages or anything else you think will help! --></span>

<script src="calc.js"></script>


</body>



</html>

Hi mykrazyemail welcome to the forum

I guess every developer has a different way of going about learning. Not really the best description but one way of looking at it could be:

starting with the more complex and solving possibly numerous problems
vs.
starting with the simplest and incrementally adding layers of complexity

Neither approach is perfect. Starting with the more complex can make it difficult to determine and solve individual problems. Starting with the simplest may result in going down a wrong path before you realize it’s a wrong path.

My approach is to start with the simplest and add complexity, understanding that I may need to scrap the work and backtrack later.

So my suggestion is to start extremely simple and make sure you get that bit working first. That is:

  • make a simple HTML page with only a single button.
  • write the script to get that element and its value.
  • have a console.log() in the script so you can look in the browsers dev tools console to see if the script is getting the value OK
  • then add another element and make sure you can get both of them
  • when that far add code that can work with the two values
  • add more code that can work with the values differently (i.e. add, subtract, multiply, divide, whatever)

It’s also a good idea to save temporary “backups” along the way. For example, once your first attempt is working, save it as something like “my-calculator-try1.html” (or whatever makes the most sense for you). Then modify the code and when that’s working save as “my-calculator-try2.html” etc. That way if you mess things up horribly you can always go back to an earlier working file.

Hi @mykrazyemail, you’re probably overthinking this… a most basic solution (i.e. no order of operations etc.) would be to just store the current number, the current operation, and the result-so-far. When a digit button gets pressed, multiply the current number with 10 and add the value of the button; when an operation button gets pressed, apply the current operation with the current number to the result (might be a simple switch / case over the button ID – or, indeed, a function mapping AKA dispatch table), update the current operation, and reset the current number to 0.

@Mittineague Thank you for that insight. That does help. I have probably been making this more difficult than it should be. I have been struggling with taking what I have been learning and building with it. The classes I have taken do pretty good at showing and explaining the basics of JavaScript, not so much in taking that and showing you how it all comes together.

Thank you @m3g4p0p. I would say there is no probably, I am pretty sure I am overthinking the whole thing. However, thank you for the input and giving me some actions to consider.

Thank you both for your valuable help.

Hey m3g4p0p,

I’m just curious here, I was going to reply to this thread last night but got sidetracked.

I don’t get this. Why multiply by 10?

This was where I got sidetracked last night. I googled “Make calculator JavaScript” and ended up here. As you can see there are a whole bunch of things to consider in the way of erroneous input etc, and I was unsure as to how far the OP wanted to deal with this.

Another way might be to use eval. You could filter anything that’s not a number or a digit out of the text field then eval what’s left to get the result. I know people say eval is evil, but could you see anything wrong with this approach?

Hey @James_Hibbard, I was thinking like

  • press 4 → current number is 4
  • press 2 → current number is 4 * 10 + 2 === 42
  • etc.

Although thinking about it, one might just as well concatenate the numbers as strings and convert them to numbers when an operation gets applied; this would also make it easier to handle decimals (if desired at some point).

Whoa true – just have JS itself do the heavy lifting! Although I guess the exercise about implementing a calculator would kind of turn into an exercise about metaprogramming then. :-D

1 Like

Ah. Got it. Thanks :slight_smile:

Lol, yeah. All depends what you want, I guess…

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.