Feedback for JS Calculator particularly DRY code

Feedback for JS Calculator particularly DRY code
0.0 0

#1

Below is my calculator, feedback would be welcome especially on the JS if you have time.

Also dose anyone know any good places to read about best practices for JS? I feel like I can figure out how to solve a problem but not how to solve it in the best way or most professionally.

Thank you


#2

Hi,
I think your code is very complicated to follow, understand and maintain.
You can use the classes of the buttons to know which class is clicked, to facilitate the writing of your code,
for example in this way :

$("button.number").click(function(){
  equation +=  this.name
  console.log("eq:" + equation);
})
$("button.sign").click(function(){
  equation +=  this.name
  //console.log("equation->sign:" + equation);
})
/*your equal button has an id not a class like other buttons*/
$("button#equal").click(function(){
  equation = eval(equation); //this calculate the result of your equation
  $("input.grey").val(equation);
  //console.log("result of equation:" + equation) ;
});
$(".percent").click(function(){
    equation += "/100";
});
$("button.clear").click(function(){
   equation="";
   $("input.grey").val(0);
});
...etc...

Another strange thing, your ''0" button has a class of ‘sign’ !? instead of ‘number’.

You have to reorganize your code for the case of “+/-” button by creating a new class, and just multiply the “equation” by ‘-1’

I hope this will help you.
If you want a link on javascript help you can visit this one w3schools.com.

you have to modify your css to adapt the <input …‘grey’> to fit your

, by giving a font-size: 10px; for example.
Good luck !

#3

sorry, in my last sentence there’s some missing words (html tags) :

you have to modify your css to adapt the <input ..'grey'> to fit it to your <th> width, by giving a font-size: 10px; for example