Calculator - Front End Developer Project

[croy4744]

Hi Guys, Greetings from my Side.
Recently, I had completed Drum_machine Project and after that, yesterday I embarked on Calculator Project. After 17-18 hours, I have come up with this. Calculator (croy47.github.io)

Although this passes all the requirement of FCC’s test suite, I know this calculator has multiple bugs. Since, I have been doing this for very long and I feel a bit tired. I decided to put it up here for you guys to review the way code has been written and suggest changes that could make it easier for me to approach the problems i am facing while trying to make it work smoothly.

Problems:

1. When = is pressed, It shows the same result in both currentNum and calculated.

and result is different in some cases where javascript finds it difficult to caculate like 0.1 + 0.2.

2. It sometimes breaks the loop of calculation despite a valid input.

ex: press AC, then 9, then sqrt button, and then anything like ± leads to unexpected result 0.
36 + 64 = 100 and then sqrt button. Ugh! No. This was not expected. Disappointed.

3. percentage button problem

ex: press 56 + 36 and then percentage shows 0.36

These are just a few examples. A lot more remains to be fixed.

4. Error handling is not proper.

5. I will have to better organize my code, I feel as it has become difficult for me to solve a few problems in this app. Your comments are welcome.

6. To those viewing it on phone, please excuse me for the stupid look it gives, This was easiest to solve but I need break for a few hours, so i left it like that. I am more concerned with its functionality at this moment.

7 onwards - I am sure you will find more.

Source Code - croy47/Calculator (github.com)

I don’t know if I have learnt things well. If I am too slow to solve a simple projects like this after giving it so much time. Your comments are welcome.

A few motivating words will also help. In dire need of motivation at this moment.

Thanks a lot guys for your time reading this.

[Dorfieeee]

@croy4744

I don’t know if I have learnt things well. If I am too slow to solve a simple projects like this after giving it so much time. Your comments are welcome.

Don’t think like that… you are learning the JS, HTML anc CSS while working on the project. Imagine you knew it already and some design patterns how to structure code etc… it would still take you quite some time to figure all out.
I have not jumped on this project yet, however, I can imagine it’s not as easy as it looks, if you want to make it work 100%.

Take pen & paper and just write and draw what happens after input and clicking this button etc… boxes and arrows… whatever helps you and when you feel that is the way then start coding…

[croy4744]

Even I thought that. While building this project, I felt the need of a flowchart. Till now, I just wrote code, checked console and made changes as required. It worked till now but I feel now that as our project becomes more and more complex, we need a flowchart and pen/paper note to keep track of things happening. Things that isn’t happening. Approaches. Goals vs challenges. I am sure I am gonna do that now everything I embark on a new project. Thinking it out first and drawing its diagram could save a lot of time and save me from getting frustrated. I will definitely try different ways to keep track of all these things. Even I feel that I need to adopt this habit badly. Thanks for your response bro.

[Sylvant]

you manage to put the entire calc project to pass all tests in a day? It took me weeks. First, cheers for having the motivation to work for so long, i usually put few hours a day and get exhausted. Imo the logic behind the calculator is no joke and the project itself uses quite few techniques to handle different parts of it and all of those take time to learn practice and develop.
Dont be so judging to you and your work, i think you handle this in better pace then many of us. You dont learn the subjects by the curriculum challenges alone, you learn them by doing the projects and many more. Its a work in progress. As long as you learn new things in every project, you are in good direction.

[croy4744]

Thanks buddy. Would request you to have a look at code as well and give your feedback…

This project is not complete at all. I know a lot of bug that I haven’t fixed and it will take a long time for me to make it work smoothly.

[jwilkins.oboe]

Hi @croy4744 !

@croy4744

After 17-18 hours,

I feel like most people take that amount of time and longer.

I spent the most amount of time on the last two projects because it took me forever to get the tests to pass.
Especially, the 25+5 clock.
That one drove me crazy

@croy4744

suggest changes that could make it easier for me to approach the problems i am facing

You have built a functioning calculator which was the goal of this project.
Plus, you added some extra features.
It is totally fine if everything is not perfect.
The real goal of these projects is to learn something and get better.
In programming, there will be plenty of times that you will get stuck.
It’s just normal.

I would take a break from the calculator and start the last project.
Then if you want to come back and revisit it in a few months and revamp it then sure.

But for now, take it as a win and move on.

@croy4744

If I am too slow to solve a simple projects

I don’t think it is a simple project.
There are a lot of edge cases to consider.
Maybe it is simple for a professional dev.
But for us beginners, there are a lot of things to consider.

@croy4744

I don’t know if I have learnt things well

Judging by your code, I would say that you learned a lot.

You are doing better than you think you are.

[Diego_Perez]

Hi @croy4744 great work ,

Problems:
When = is pressed, It shows the same result in both currentNum and calculated.

Reading the code I found this:

   // HANDLE EQUAL SIGN
    if (action.type === "EQUAL_SIGN") {
      if (!state.operator) {
        return { ...state };
      }

      let evaluated = eval(
        `${state.calculated} ${state.operator} ${state.currentNum}`
      ).toString();
      // console.log(state.operator);
      return {
        ...state,
        currentNum: evaluated,  // <-- the same 
        operator: "",
        calculated: evaluated, // <-- the same 
      };
    }

---

In general I think that is better to avoid this pattern:

...
    if (!state.operator) {
         ...
    }
...

Because the calculator can have un infinite number of states that satisfy the condition !state.operator.

A better pattern is described in the documentation of redux (an even better pattern is use a state machine/statechart library [like Xstate] ) :

Style Guide | Redux

Something like this (only an example using the code of your project):

... 
 switch(state.status) {
     case "EQUAL":
       let evaluated = eval(
        `${state.calculated} ${state.operator} ${state.currentNum}`).toString();

      return {
        ...state,
        currentNum: evaluated,  
        operator: "",
        calculated: evaluated, 
      };
     ...
 }
...

---

Even I thought that. While building this project, I felt the need of a flowchart. Till now, I just wrote code, checked console and made changes as required. It worked till now but I feel now that as our project becomes more and more complex, we need a flowchart and pen/paper note to keep track of things happening

https://xstate.js.org/viz/?gist=1b97e606a96c72c3ad294c75d57d3b30

Cheers and happy coding

Notes:

• The state machine/statechart library that I use is: https://xstate.js.org/

• I wrote my calculator using xstate, click here

• The diagram is the logic of the calculator, you can see the code: click here

• The stateTransitionTable (from js/script.js) is a domain specific language that I wrote, is used to generate the config file for xstate and dagre (diagram).

• Here is an example of fixing an error in my calculator (I replaced the function setdata with setlastdata) :
  Calculator: Fix Multiple Operators After Minus, click here

[croy4744]

@jwilkins.oboe

Especially, the 25+5 clock.
That one drove me crazy

Yeah, I am gonna struggle with that project now. Will start that project tonight and l am sure I am gonna feel your pain very soon

@jwilkins.oboe

The real goal of these projects is to learn something and get better.
In programming, there will be plenty of times that you will get stuck.
It’s just normal.

Well thanks for these words. Even I feel the same now. I was exhausted when I posted this but I can understand the wisdom behind these words now. Fun fact is that I am still learning HTML/CSS which I thought I had sort of mastered. LOL. In the last drum_machine project, I built the project and it was nice and I was happy and I decided to play the drum on my phone because I had spent a lot of time building it. You know what happened? As I clicked buttons fast to play, Booooom. page started zooming in/out at every double click. I sat down. googled. Searched on stackoverflow. Found out that there was something called “touch-action” which is a CSS thing and I was like ohh… I have to learn CSS as well and then I fixed that. I guess, that’s how it is. There is always more to learn. Find a problem. Struggle with it. Find answer. Fix.

@jwilkins.oboe

I would take a break from the calculator and start the last project.
Then if you want to come back and revisit it in a few months and revamp it then sure.

Yeah, I am gonna do exactly the same. If I kept struggling with calculator now, I will get frustrated. I will do the next project. and after some time, maybe a week, I will revisit it with fresh mind. I did the same with my drum machine project. I built this. It’s working. I added a few extra features but it has a problem. I ignored it and went ahead with the calculator project. I will do the same with this now. Will revisit one day in good mood and try to fix the bug.

Finally I would like to share why I felt that i was too slow or if I had learnt things well.

I felt I was too slow because I was thinking that I take a lot of time in building some simple projects. With the goal in mind to switch career, I was thinking that i may not be successful because I was taking forever to build things.

and yeah i, despite my best efforts, could not get all the function in that calculator to work smoothly, I was feeling like if i was coding the right way. I was just tired at that moment. I guess we all go through that feeling once in a while.

@jwilkins.oboe

Judging by your code, I would say that you learned a lot.

You are doing better than you think you are.

Well thanks a lot for your encouraging words. I will definitely work harder and try to improve myself in the coming future.

Drum_machine Project I referred to above can be found here Drum Machine

In Drum Project, I am facing an issue. After creating music, clicking on play starts playing the created music. While the music is playing, if i switch off the power button, it should stop playing music right away. But it doesn’t happen. It keeps on playing until it is finished. You can have a look at it and suggest changes if you can.

[croy4744]

@Diego_Perez

Reading the code I found this:

   // HANDLE EQUAL SIGN
    if (action.type === "EQUAL_SIGN") {
      if (!state.operator) {
        return { ...state };
      }

      let evaluated = eval(
        `${state.calculated} ${state.operator} ${state.currentNum}`
      ).toString();
      // console.log(state.operator);
      return {
        ...state,
        currentNum: evaluated,  // <-- the same 
        operator: "",
        calculated: evaluated, // <-- the same 
      };
    }

Bro, I know that. Unfortunately, changing that leads to unexpected results at other place. I will have to look into better ways of handling that. Will try after 3-4 days with a fresh mind. I will leave it as it is for now and move on to the next project. It will take some time but I will find ways to tackle it. I had tried changing CURRENTNUM : “” but since, that created other problems, i was forced to change it back to the way it is. I will try to figure out and fix this next week.

@Diego_Perez

In general I think that is better to avoid this pattern:

...
    if (!state.operator) {
         ...
    }

@Diego_Perez

Because the calculator can have un infinite number of states that satisfy the condition !state.operator .

I get what you are trying to say here. I believe this kind of approach might be one of the reasons for some problems in this code. This is something I am gonna look at when I get back to this project.

Something like this (only an example using the code of your project):

... 
 switch(state.status) {
     case "EQUAL":
       let evaluated = eval(
        `${state.calculated} ${state.operator} ${state.currentNum}`).toString();

      return {
        ...state,
        currentNum: evaluated,  
        operator: "",
        calculated: evaluated, 
      };
     ...
 }
...

You are right bro. If-else is a lot of boilerplate. Switch statement is a lot cleaner in this situation. I will change all the if-else to one Switch statement.

Thanks for the links you have provided. I am gonna read them now and utilize that knowledge to improve my project.

[jwilkins.oboe]

@croy4744

After creating music, clicking on play starts playing the created music. While the music is playing, if i switch off the power button, it should stop playing music right away. But it doesn’t happen. It keeps on playing until it is finished.

Between this project and the calculator, it seems like some of the issues are with redux.

Maybe you can remake certain parts of the project without redux.
Redux isn’t required for any of the 5 projects.

I think a better approach would be to just get it working with react first then you can refactor it using redux later.

Just a thought

[croy4744]

Hello guys, I have updated the codes and removed and fixed a lot of bugs. If you are interested, you can have a look at it. Reposting link for reference - Calculator (croy47.github.io)

I would like to make it better in future but leaving it like this for now. I believe I have fixed all the functionality issues. Please let me know if you find any functionality issue in the project.