JavaScript Calculator && How to organize the code?

Code Feedback
1

Hi everyone,

I have just finished building my JavaScript Calculator, it uses immediate execution logic, passes all the tests, also I implemented some additional functionality like

  • square root
  • plus/minus sign
  • double zero
  • delete last digit

You can check out the project here JavaScript Calculator

It’d be awesome to get some feedback but also I’d like to ask you for some tips / ideas / practices on how do you organize your code?

What I mean is, I’ve commented logic of the calculator and it make sense to me but the file itself is rather long and I’m not sure if it would make sense to other developer reading the code.

PS I’m not the author of the design, I’ve found a concept design on dribbble.com and recreated it with CSS. You can check it out here: Calculator design byJaroslav Getman

2

Cześć Sitek,

I know almost nothing about JS and the challenge’s requirements, so I can’t talk about the code.
But I played with the calculator like a little kid for a moment and I noticed two things:

  1. Again, idk about the implementation of it etc, but I expected the keyboard buttons to input the numbers.
  2. When I click “9 -> square root, 9 -> square root” whithout any clearing or picking other operations, the calculator sums 3+3. I don’t think that should be the desired output.

Cheers!

1 Like
3

Siemka Kuba, dzięki za feedback :smiley:

Even though it wasn’t in the challenge I thought that it’s both great idea and good practice for me so I’ve implemented keyboard buttons :smiley:

Also, I’ve fixed that bug with square root, if you find anything else, let me know and once again thanks :wink:

4

Happy to help :stuck_out_tongue: and I respect the curiosity to add the keyboard.

I did find two more things:

  1. I divided by zero. 2/0=infinity. It’s not infinity, it’s an error/forbidden. I know it’s not huge but technically it’s a wrong result.
  2. The just appreciated keyboard is playing some tricks.
    a. I cannot click “+”. It clicks “=” instead.
    b. I tried division and it always returns 0 - when I type everything with a keyboard. Partial - keyboard and mouse works generally fine. I think same with “-”.

No idea whether it makes a difference but I tried it all on laptop numbers, not a keypad.

5

I checked it in another language keyboard which has + under a 4 key and it always types a 4. So I guess shift is not being recognized.

6

Yeah, it was not , I’m now trying to add that as well.

Also, fixing dividing by zero bug.

Any ideas on how to keep the code better organized? I feel like I’m creating a little frankenstein at the moment, one new thing added breaks something somewhere else…

7

Anyway, I fixed the problems you mentioned :smiley: (I hope that I fixed all of them)

You can now use shift + key, fo keys like = and +
Alternatively, numpad keyboard :slight_smile:

Feel free to check it out :smiley:

8

Hi @sitek94, great project.

also I implemented some additional functionality like

Maybe I’m wrong but I think this is a case of feature creep[0].

If you look at this graph[1]

You can see that the tests doesn’t cover everything, so, I think in this case, is probably better to (write more tests or) test more, than add more features.

but the file itself is rather long and I’m not sure if it would make sense to other developer reading the code.

By reading your code I think that you are following an event-driven approach[2], so, I don’t know if it possible to really change the structure of the code:

1.- In an event-driven approach you need the if-else (I think, I not sure)

2.- The calculator project has many parts and some of them are interconnected

3.- If you look at the graph above, I had to identify one by one all the cases that I wanted to cover (just like your project)[3]

4.- What exactly do you want to change? or this is more of an aesthetic problem?

Any ideas on how to keep the code better organized? I feel like I’m creating a little frankenstein at the moment, one new thing added breaks something somewhere else…

I think that the customary answer is “write more tests, test more and refactor(iterate)”

Cheers and happy coding :slight_smile:

Notes:

[0] Feature creep - Wikipedia

Feature creep is the excessive ongoing expansion or addition of new features in a product … These extra features go beyond the basic function of the product and can result in software bloat and over-complication

[1] This graph is part of my JavaScript calculator project, and I also wrote the “glue” that generate the graph (I am not a professional programmer), so take this with a pinch of salt.

[2] I wrote a blog post about this:

Problem Solving: Bottom-up approach

[3] I uploaded some videos of my process writing the project:
https://www.youtube.com/playlist?list=PLEJxzxnNnYoXwxC_aug3aY6sCTEbQxwPW

1 Like
9

Yep, looks alright now. GJ

As for the code organization, I have no idea. I am just beginning to learn JS. But thankfully someone smarter than me came to the topic, so good luck! :smiley:

1 Like
10

Wow, thanks for writing so detailed answer, I really appreciate it :smile:

Well I wasn’t aware that it is called event-driven approach until now but it seems correct because what I’m doing in a nutshell is I’m reacting to events triggered by user.
I’ll definitely read more about this.

Well I think that I was looking for an alternative to this event-driven approach. My calculator logic at the moment just seems very messy to me :expressionless:

More tests :smiley: Well, I haven’t written a single test so far and I’m really looking forward to
start learning about testing in Quality Assurance section :smiley:

That’s great post, pure content, no distractions :grinning:

Thanks!

1 Like
11

Cheers man, thanks for your help with all the testing :smiley: If you ever need to test anything let me know :smiley:

1 Like
12

Thanks @sitek94 :grinning:

Cheers and happy coding :slight_smile: