Just completed my calculator, confused why its under advanced

Just finished my calculator, very simple. I feel as if this project was way easier and simpler than the weather app. I almost feel as if it should be part of the intermediate projects, and the weather app should be part of the advanced projects. Especially since I basically skipped all the advanced algorithms. I was struggling with the intermediate projects, and so I took a Udacity course, and then went back and completed the intermediate projects, but it was just me parsing code together to create something new

I went on the the intermediate algorithms and the logic made little sense to me, so I decided to improve my JS skills and took a few JS courses with Khan academy. This helped a lot. I tried to spend yesterday figuring out the intermediate algorithms but still was struggling to figure out what they are asking, so decided to look a head a bit to see what the projects were and they seemed pretty simple (khan academy asks you to make a tic tac toe game during their course as well) I decided to just see if I could do it for the hell of it, and I found it to be pretty straight forward.

https://codepen.io/slarias/full/EgYvXJ/

Looks pretty good. I myself am just starting out on FCC, but here’s two things I noticed;

  1. Numbers run off the screen. e.g. 2 divided by 3.
  2. I received an error after doing 2/3, and then trying to subtract 0.6666 from the result of that. Not sure where that error came from.

I think the calculator is supposed to be a dip into using just JS rather than learning APIs, maybe these projects should be classified under a name that implies that, rather than indicating they are harder than the first few.

However, the last two “advanced” ones are definitely a lot tougher than any of the other front-end projects, so maybe the calculator and clock are just to ease you in before throwing you off the deep end again.

Your calculator works, but with floating point values like 0.3*0.3, JS does weird things and the result overflows the container. So you might want to limit the maximum number of digits.
Also, I’d suggest clearing the screen when I put in numbers after an evaluation. It’s a lot more intuitive that way!

Other than that, a great project.

You can input multiple decimals, and the number spans outside of the screen and on multiple lines

what do you mean clearing the screen when you put the numbers after the evaluation?

If I type 3 + 3, I get 9
I want to then type 5, but instead it simply appends it to the previous answer and 95 is present on the screen, instead of 5 as expected.

So whenever I click a new number after an evaluation has occurred (as in you performed an operation on two operands), the screen should be cleared, and my new number should be the only thing present.

Note that this is just me nitpicking, and it’s absolutely not necessary to implement this. It just acts more like a regular calculator that way.

oh I gotchu. Yeah I may try to work that out. trying to figure the multiple decimals and limiting the number of digits the calculator can take

probably you are working on but try to input 9+*

This is a project, where you don’t have to use a lot of css or a lot of jquery DOM manipulation. This is pure JS logic. The most difficult part of this project is the debugging. Because, as you can see, a lot of small bugs slip in.

1 Like

It’s advance because while a calculator seems simple, it turns out that there are a bunch of edge cases.

You end up having to answer questions like:
What happens when I press a number?
What happens when I press a number if the last button was a number?
What what if the last button was an operator?
What if I press an operator before any other button?
What if I press an operator after a number?
What if I press an operator after another operator?

Then there are some quirks and non standard behaviours, like the notorious floating point oddities. What should 0.1 + 0.2 be? Why isn’t it?!

So, it is actually quite tricky to do completely flawlessly.

It’s also a gentler introduction to emulating a physical device that stores it’s own memory of what has happened and what should happen next, which is the principle behind the other projects in that section.

2 Likes

used the overflow property as fall back while I work on the other kinks :slight_smile:

There’s also a requirement on the project to create a log of all the operations a user enters, which you didn’t include.

I’d just try some more testing to really get to the crunch of this project. Like right now if I enter 88+97± I get an error and lose everything. That’s probably not a very user-friendly solution. I’d like the operation to just change from + to -, as the user.

You’ll also need to figure out a way to deal with those overflowing numbers. Do you round to a certain decimal? Truncate at a certain length? Both?

You can also try adding some functionality. For instance, I put a CE button on mine that only cleared the last number entered.

You’ve also created a click function for every single number key. It might be a bit more efficient to use a single click function that could take parameters.

Just some ideas! I thought the calculator project was challenging just in a conceptual way, specifically because of these small issues.

PS - I like your CSS on the project.

the log part isn’t listed as a requirement? I fixed the overflowing number portion, by using the overflow property. I figured if I don’t have the limitations of being a physical calculator, why not use larger numbers. Working on the CE function, will make it part of version 0.7

I’ve realized I care a lot more about the design of a project and care less about the functionality. I think I will want to focus a more towards that side.

Actually, I guess you’re right, it is not in the user story. I took it as a requirement from the “functionally similar to” example, which does have a log. My bad.

Still, you could add it if you don’t feel like the project was challenging enough.