Calculator: Does !compute for Robots™

Calculator: Does !compute for Robots™
0

#1

Hi,

Please let me know what you think about my calculator! Here’s the link: Does !compute for Robots™

All thoughts are welcome. Even from robots.

Cheers,
Tom


#2

If I enter 1 / 7 = (your E button) and then enter * 7 = (your E button), I expect to get 1 and not 0.98

Until the AC is clicked, you need to keep the “real” calculated value in the background, so someone can continue making calculations on the results. Part of the problem is that you are rounding more than you should.

When I enter 1 /7 =, I at least expect to see 0.14285714 (the point where the decimals starting repeating again with the 4), but instead you round it off to 0.14


#3

I appreciate the look, Randell!

I fixed the rounding issues. 7/1 (Enter) then * 7 (Enter) returns 1.

If you have any other suggestions to improve my calculator, or the quality of my coding, please let me know.

Thanks!
Tom


#4

I have another suggestion to shorten your code a bit.

Instead of manually adding all the event handlers for the numbers 0-9, you could add an additional class name (i.e. num ) to the element an not need the id attribute at all. Then, you could replace all of the following JS:

document.querySelector("#key0").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key1").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key2").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key3").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key4").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key5").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key6").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key7").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key8").addEventListener("click", function() {
  enterNumber(this.textContent);
});
document.querySelector("#key9").addEventListener("click", function() {
  enterNumber(this.textContent);
});

with the the following:

//digits
var numberButtons = document.querySelectorAll(".num")
for (var i = 0; i < numberButtons.length; i++) {
    numberButtons[i].addEventListener("click", function() {
      enterNumber(this.textContent);
   });
}

This will make your code DRY (Do not repeat yourself) for this section. You could also do something similar for your 4 operator event handlers


#5

Nifty, Randell. Thanks for the tips. I will incorporate into my calculator and look for more DRY opportunities I may have missed after I complete my pomodoro clock.

I appreciate the feedback you’ve been giving throughout my projects!!

Cheers,
Tom