search

freeCodeCamp / freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free.
https://contribute.freecodecamp.org
BSD 3-Clause "New" or "Revised" License
405.2k stars 38k forks source link

Incorrect output for some equations - example javascript calculator project #10158

Closed no-stack-dub-sack closed 8 years ago

no-stack-dub-sack commented 8 years ago

Challenge Name: Build a Javascript Calculator

https://codepen.io/FreeCodeCamp/full/rLJZrA/

Issue Description

Hey Team, I've been working on building my Javascript calculator, and thought it worth noting to you guys, that an error in the example project, actually made me re-think mine entirely (which was actually very helpful!). I noticed when checking equations on mine against yours, that something didn't seem right. Even though our answers matched, I thought something was off, so I checked the equation in another (production) calculator, and it turns out - we were both wrong! For longer, tricky equations that require "order of operations" logic, the example calc will not output the correct answer - rather it seems to just chain the operators, instead of evaluating the string as a true mathematical expression. Noticing this actually led me to fix the problem in my own calc, so I am very thankful, but... I thought you might want to know anyway (assuming you don't already).

Here's an example:

5x4-3+6X4/5= 18.4

I think it should actually output 21.8 for this equation.

Browser Information

shouldn't matter but Chrome.

Screenshot: image

Thanks,

Pete @no-stack-dub-sack

erictleung commented 8 years ago

@no-stack-dub-sack thanks for the issue and thinking about this critically.

Mathematically, I agree we should follow the order of operations. However, if I were to buy this kind of calculator in the store right now, it would produce the same output as the Codepen we currently have out, which would output 18.4.

@FreeCodeCamp/issue-moderators either mathematically or just chaining operators, maybe we should be more clear on which one to have. My inner mathematician wants to adhere to the order of operations but I'm fine with functionally keeping it how it is and just clarifying what the calculator should do.

BKinahan commented 8 years ago

@erictleung I'm conflicted on this. Store-bought electronic calculators may still provide that result, but the built-in calculators on Android and MacOS (at least those and probably other OSs) also mimic the visual style of electronic calculators somewhat, yet produce the 21.8 output.

These are probably the calculators that most campers have access to for result comparison. Search engines (tested with Google and DuckDuckGo) produce the 21.8 output, too.

raisedadead commented 8 years ago

Looks like the web and the mobile devices went ahead and Windows decided to stay on, the good old way of how a calculator works.

calculator

And Google being smart:

image

To put things in perspective, a good old calculator used to and (perhaps should) work on the last result. Just evaluating the "expression" mathematically, is something which computers would do.

If you note to avoid confusion Google actually wrapped our messy input in parenthesis.

IMHO since we aren't evaluating expressions but one operator on the operand i.e the last result as input to next, the challenge instructions should reflect the same.

SamAI-Software commented 8 years ago

Different calculators have different logics. For example:

Google Calculator (browser version)

Windows Standard Calculator

Official FCC's example calculator for this challenge

There are many other different variants of calculators with different functionality and logic. FCC's example calculator has a logic that is somewhere between Google's and Windows' variant, so it's not a bug, it's just a different logic.

However, the current logic of FCC's calculator might be confusing for users, because it doesn't copy the logic of most popular variants of calculators. We can either keep closing these issues (#8981, #6130, #10158, #10373) or we can do one of the following:

@raisedadead, can codepens be fixed by first time only?

raisedadead commented 8 years ago

@SamAI-Software codepens can be fixed by anyone, once they are ready, they can be put on the issue thread, and I usually update the FCC's official pen with the code from the same posted on the issue.

SamAI-Software commented 8 years ago

@raisedadead so lets pass that to first-timers-only, it seems to be not so hard.

TODO:

Check-list for Windows-like logic

raisedadead commented 8 years ago

Cool, waiting for others to vote for the style. I would go for the Windows one (because that's the classic).

SamAI-Software commented 8 years ago

Vote: Windows style

SamAI-Software commented 8 years ago

Vote: Google style

oalhait commented 8 years ago

I'll take this on, but I can't get much work done today. I should finish this by Sunday though.

swapsha96 commented 8 years ago

I forked this project and changed the algorithm to calculate following DMAS rule. I've checked on many other equations and it's working fine. Please help me how can I contribute back my efforts. @no-stack-dub-sack

SamAI-Software commented 8 years ago

@swapsha96 please share your codepen here.

swapsha96 commented 8 years ago

I've fixed the problem by creating own function 'calcEval()'. It follows DMAS rule. I've used regex to split the terms. Function is implemented in the part where entry === '='. Click the link below: https://codepen.io/swapsha96/pen/YWBpwX @no-stack-dub-sack @SamAI-Software Please inform me what to do to reflect my contribution in the project. I'm a first timer.

SamAI-Software commented 8 years ago

@swapsha96 2 times = breaks the chain. E.g. 5 + 6 = = + 5 = equals to 5, but should be 16

And how about making it Windows-like?

swapsha96 commented 8 years ago

Check it out again as I've fixed the double = error now. Same error could be observed in original code. (https://codepen.io/swapsha96/pen/YWBpwX). Btw I think following DMAS rule is more legit. Windows-like is easier to build but more inaccurate as it won't work fine if you want to calculate total money spent, solve textbook equation etc.

SamAI-Software commented 8 years ago

@swapsha96 good :+1: But now you've introduced a new bug 5 + 6 = 5 + 6 = equal to 121, but should be 11

no-stack-dub-sack commented 8 years ago

Hi all, I'm glad this issue sparked some discussion. Just checked the most recent pen, so it looks like the final vote was to update to the 'google' way of doing things? I think, in the end, either would have been fine, as long as there was clarification in the challenge instructions. Although, adding clarification on this front might possibly confuse things more.

I also noticed the above bug that Sam pointed out. I don't want to look at the code just yet, because I'm still not quite finished with my own calc, but what I did in mine to avoid this problem, is any time a number is pressed when the last clicked button was the equals button, the calc is initialized, and a new equation is started using whatever number is pressed. e.g. 5+6=11, then press 5, both outputs read 5 and everything starts over.

On Sat, Aug 13, 2016 at 9:44 AM, Sam Aiken notifications@github.com wrote:

@swapsha96 https://github.com/swapsha96 good 👍 But now you've introduced a new bug 5 + 6 = 5 + 6 = equal to 121, but should be 11

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-239621418, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_x2odgxZdJA-6PCNbZJAv20wOJbGnks5qfcpFgaJpZM4Jhtkm .

swapsha96 commented 8 years ago

I've finally fixed all 3 issues mentioned by @no-stack-dub-sack and @SamAI-Software. I grateful for such a great response I got myself being first-timer-only. I've checked for all the issues addressed here. I've check and please do mention any other bug if there is. Link: https://codepen.io/swapsha96/pen/YWBpwX Thank you! Do mention your suggestions, etc.

SamAI-Software commented 8 years ago

@swapsha96, yes, now it looks much better! :+1: However, there is a UX issue. 5 + 6 = = 5 outputs 115 on a big screen, but should be 5 (note: it uses 5 for the calculation, but it shows 115)

swapsha96 commented 8 years ago

@SamAI-Software I've fixed that one. Link: https://codepen.io/swapsha96/pen/YWBpwX Thank you for your patience. It's my first fork and already, I've understood why can't they fix all the bugs at once. I hope my work is worth it.

SamAI-Software commented 8 years ago

@swapsha96 haha, yeah, a few years ago I remember to think that most coders are dumb, because they always make bugs even when fixing bugs... until I've started to develop myself :smile: That's why we need a good QA team for every project!

1.1 * 7 = outputs 0 (digit limit), should be 7.7 - you just need to add rounding, like at FCC calc.

note: the bug is because your calc doesn't round the number, so it will be equal to something like 7.7000000000001

swapsha96 commented 8 years ago

@SamAI-Software Fixed this bug also. The note mentioned by you helped me. I didn't think of that. Link: https://codepen.io/swapsha96/pen/YWBpwX

SamAI-Software commented 8 years ago

@swapsha96 that's great :+1: I can't find any serious bugs. If you have time, you can also improve UX with some common features like allowing user to change an operator. 5 - + 6 = outputs -1, but should be 11

swapsha96 commented 8 years ago

@SamAI-Software Just added that feature. I hope I did it right but can you help me to test it? I hope it works fine. Link: https://codepen.io/swapsha96/pen/YWBpwX Thanks for your feedback!

swapsha96 commented 8 years ago

@no-stack-dub-sack I've fixed the problems by working along with @SamAI-Software I think this issue is fixed and can now be closed. If you've got any more work for me (me being first-timer), do mention me. I'm a college undergraduate who isn't interested in competitive coding but want to work on projects for great experience.

SamAI-Software commented 8 years ago

@swapsha96 great, this feature is very useful and it's a part of any real calculator. Thanks for implementing it! But before adding it to a curriculum, lets fix some bugs to make it work right.

5 + * 2 = outputs 5, should be 10

swapsha96 commented 8 years ago

@SamAI-Software Fixed this new bug.

SamAI-Software commented 8 years ago

@swapsha96, this logic is basically a copy of a Google calculator, so you can use it if you are not sure what output should be, it will save your and my time :)

5 + - + 6 = outputs -1, should be 11

swapsha96 commented 8 years ago

@SamAI-Software This one's taking time. I hope I'll fix it soon.

no-stack-dub-sack commented 8 years ago

@swapsha96, I just took a peek at your code because I finally finished my own project (which if anyone wants to check out is here http://codepen.io/no_stack_dub_sack/pen/KrbYaabtw!), and I am totally new at this so there may be an obvious reason why this would be a bad idea, but have you thought of using eval() to evaluate the expression as a string? This would fix the latest bug of replacing the operator in google style since it would always evaluate the last state of the string which you could pass with the equals button and could shorten/un-complicate the code quite a bit. I've read the MDN documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval and am not quite sure I understand why it would be a bad idea (if indeed it is a bad idea) to call eval() in this case.

Any thoughts? At any rate, this is how I solved this problem in my project so would love to hear thoughts as to why this might be poor practice in a simple, non-production situation such as this.

Thanks.

On Mon, Aug 15, 2016 at 12:15 PM, Swapnil Sharma notifications@github.com wrote:

@SamAI-Software https://github.com/SamAI-Software This one's taking time. I hope I'll fix it soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-239847647, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_x_xHPtO2IM4LMcWvXNovpld0lRdvks5qgJCtgaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack very good calculator! But you should work on your UI design a bit more, because it's too dark and psychedelic :) And on/off is a bit confusing and unnecessary, unless you are fully into skeuomorphism design.

Also some bugs: 5 + 6 = 5 + 6 = outputs 121, should be 11

I think we should finally choose to use the calculator with the best design, clean code and no bugs, so campers can have a great example.

no-stack-dub-sack commented 8 years ago

@SamAl-Software Right you are! Thanks for pointing that out, I had this working before, but I must have accidentally took that bit of logic out when I separated the zero button out as it's own function. Funny, haha, dark and Psychedelic is just what I was going for! The background of the calculator is imagery from a favorite psychedelic rock band of mine. Yet, I will still take this under consideration.

Thanks for the review! The issue you pointed out is fixed.

On Mon, Aug 15, 2016 at 10:50 PM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack very good calculator! But you should work on your UI design a bit more, because it's too dark and psychedelic :) Also some bugs: 5 + 6 = 5 + 6 = outputs 121, should be 11

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-239987438, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_x19BSY80vpexgMcQyo4xolzBWDTYks5qgSVhgaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack I like your calculator, because it has double sign (+/-), but the design is a bit too psychedelic for the curriculum. If you can change it, then we might consider it as a good candidate.

By the way, I like 0.7734 button, I honesty didn't know about "Hello" word. In my country as we were children we used 174.1505 which stands for "Suck dick" :laughing: I even forgot about it, until you remind me with this cool feature :+1: But there is a small bug, after going back to a normal mode the calculator is off and it needs 2 clicks on on/off button to be activated.

swapsha96 commented 8 years ago

Sorry @SamAI-Software but this bug is taking much more time. I hope I'll fix it soon.

SamAI-Software commented 8 years ago

@swapsha96, no problem, take your time. @no-stack-dub-sack made a good calculator, too, so anyway we will update the official variant pretty soon.

no-stack-dub-sack commented 8 years ago

@SamAl-Software Hey Sam, thanks again for the detailed feedback, I will definitely look into this latest bug that you pointed out.

That's really funny about the 174.1505 trick, I had no idea about that one, haha, see we've taught each other something new!

Are you saying if I changed the UI a bit, it might be a candidate to be the example project for the curriculum? This being the case, I would be happy to change it right away. I would be excited and honored even to have my project be considered.

On Tue, Aug 16, 2016 at 2:44 AM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack I like your calculator, because it has double sign (+/-), but the design is a bit too psychedelic for the curriculum. If you can change it, then we might consider it as a good candidate.

By the way, I like 0.7734 button, I honesty didn't know about "Hello" word. In my country as we were children we used 174.1505 which stands for "Suck dick" 😆 I even forgot about it, until you remind me with this cool feature 👍 But there is a small bug, after going back to a normal mode the calculator is off and it needs 2 clicks on on/off button to be activated.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240016346, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_xw_wdZ9xdC24uv8Slxu6RqPnwlgMks5qgVw7gaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack, sure, why not? Your calculator has a double sign (+/-), which is a necessary feature, so it can be a strong candidate if you fix the design and few small bugs, like the one that I already mentioned above and this one, that you found yourself: negative > operator > decimal > negative == incorrectly toggles

no-stack-dub-sack commented 8 years ago

Awesome, I'm very happy to work on this. Working on the UI design now and will fix the bug tonight if possible.

I fixed the on/off feature and forked it to modify the UI. Here's where the design is headed - thoughts? (not quite finished).

Thanks!

On Tue, Aug 16, 2016 at 9:01 PM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack, sure, why not? Your calculator has a double sign (+/-), which is a necessary feature, so it can be a strong candidate if you fix the design and few small bugs, like the one that I already mentioned above and this one, that you found yourself: negative > operator > decimal > negative == incorrectly toggles

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240284593, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_xwtoayAptHwhJHAgP-4RDMFXcVgZks5qgl1SgaJpZM4Jhtkm .

no-stack-dub-sack commented 8 years ago

@SamAI-Software, whoops, forgot to include the link and mention you in my previous message. Anyway, here's http://codepen.io/no_stack_dub_sack/pen/qNvjak the updated design so far. Open to suggestions.

On Tue, Aug 16, 2016 at 10:04 PM, pweinberg633 . pweinberg633@gmail.com wrote:

Awesome, I'm very happy to work on this. Working on the UI design now and will fix the bug tonight if possible.

I fixed the on/off feature and forked it to modify the UI. Here's where the design is headed - thoughts? (not quite finished).

Thanks!

On Tue, Aug 16, 2016 at 9:01 PM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack, sure, why not? Your calculator has a double sign (+/-), which is a necessary feature, so it can be a strong candidate if you fix the design and few small bugs, like the one that I already mentioned above and this one, that you found yourself: negative > operator > decimal > negative == incorrectly toggles

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240284593, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_xwtoayAptHwhJHAgP-4RDMFXcVgZks5qgl1SgaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack looks pretty solid, and you've changed buttons colors by group, that's good :+1:

I also encourage you to set the calculator into on mode by default to increase UX, so user won't need to press on/off button from start. We can still keep this feature for design purpose without forcing users to press the button. Skeuomorphism is good, but UX is better :)

And let's swap "0" and ".", because traditionally "zero" is on the left side from "decimal".

And don't forget about this bug: negative > operator > decimal > negative == incorrectly toggles

The only problem with design is that your calculator looks like the old real calculator from 90s, which had the logic similar to Windows standard calculator.

image

image

But your calculator doesn't have this logic, it has a logic similar to Google's calculator, which is flat design.

That can confuse many campers. Have you been thinking about turning it more into a flat design?

no-stack-dub-sack commented 8 years ago

@SamAI-Software Hey Sam, sure, I will set it to "on" by default, and swap the position of the decimal and zero buttons.

As for the design, I'm happy to turn it into something flatter looking, when I originally chose this design, it was simply to undertake the challenge of utilizing some pretty neat CSS-tricks that I had not yet worked with. I think a flatter design can take away from the overall excitement of the UI, but I see where you're going with this and how this contradicts the logic. I'll give it a shot and see what you think.

As for the bug, I'll make that my top priority for the evening (which for me is 7 or 8 hours away - a full-time non-coding job is still filling my days), as functionality trumps all, although it has been stumping me a bit since changing other conditions associated with this behavior tend to affect other behaviors thereby creating more bugs. But I think I should be able to figure it out.

As I've already alluded to above, it seems you and I are in completely opposite time zones, the pattern seeming to be about an 8 hour delay in communication aside from some slight overlap in the very late evening for me when you seem to be online. Where are you located? With this in mind, I'll be online tonight working on this from about 7pm-11pm EST (US), so hopefully we can communicate a bit some time during that time frame.

I should be able to handle most of this tonight, but am I working with any sort of hard deadline?

Thanks again for all your help and consideration so far! FCC has been an incredible community that I'm lucky to have found and I am really excited about the prospect of making my first contribution.

On Wed, Aug 17, 2016 at 1:31 AM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack looks pretty solid, and you've changed buttons colors by group, that's good 👍

I also encourage you to set the calculator into on mode by default to increase UX, so user won't need to press on/off button from start. We can still keep this feature for design purpose without forcing users to press the button. Skeuomorphism is good, but UX is better :)

And let's swap "0" and ".", because traditionally "zero" is on the left side from "decimal".

And don't forget about this bug:

negative > operator > decimal > negative == incorrectly toggles

The only problem with design is that your calculator looks like the old real calculator from 90s, which had the logic similar to Windows standard calculator.

[image: image] https://cloud.githubusercontent.com/assets/16253583/17725378/17221be4-6475-11e6-9851-8bfc7d2feeea.png

[image: image] https://cloud.githubusercontent.com/assets/16253583/17725398/4839745c-6475-11e6-84e5-e216d1770f60.png

https://cloud.githubusercontent.com/assets/1884376/17586365/ec387850-5fde-11e6-9b69-88f74ab73bb0.png

But your calculator doesn't have this logic, it has a logic similar to Google's calculator, which is flat design.

https://cloud.githubusercontent.com/assets/1884376/17586608/65ea3534-5fe0-11e6-93aa-7cd3931455a7.png

That can confuse many campers. Have you been thinking about turning it more into a flat design?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240316984, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_xw_4Paerq0jLzdege5-M1YEjkVMYks5qgpyzgaJpZM4Jhtkm .

no-stack-dub-sack commented 8 years ago

@SamAI-Software I'm thinking something similar to one of these 2, still sleek looking and not boring but design more closely matching the logic we are trying to represent. Should I get rid of the spin trick for this version? I know it's a fun little feature, but it may not match if we're not going with a "skeuomorphic" look. The font I chose may also be out of place in this case.

Thoughts?

[image: Inline image 1]

On Wed, Aug 17, 2016 at 10:17 AM, pweinberg633 . pweinberg633@gmail.com wrote:

@SamAI-Software Hey Sam, sure, I will set it to "on" by default, and swap the position of the decimal and zero buttons.

As for the design, I'm happy to turn it into something flatter looking, when I originally chose this design, it was simply to undertake the challenge of utilizing some pretty neat CSS-tricks that I had not yet worked with. I think a flatter design can take away from the overall excitement of the UI, but I see where you're going with this and how this contradicts the logic. I'll give it a shot and see what you think.

As for the bug, I'll make that my top priority for the evening (which for me is 7 or 8 hours away - a full-time non-coding job is still filling my days), as functionality trumps all, although it has been stumping me a bit since changing other conditions associated with this behavior tend to affect other behaviors thereby creating more bugs. But I think I should be able to figure it out.

As I've already alluded to above, it seems you and I are in completely opposite time zones, the pattern seeming to be about an 8 hour delay in communication aside from some slight overlap in the very late evening for me when you seem to be online. Where are you located? With this in mind, I'll be online tonight working on this from about 7pm-11pm EST (US), so hopefully we can communicate a bit some time during that time frame.

I should be able to handle most of this tonight, but am I working with any sort of hard deadline?

Thanks again for all your help and consideration so far! FCC has been an incredible community that I'm lucky to have found and I am really excited about the prospect of making my first contribution.

On Wed, Aug 17, 2016 at 1:31 AM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack looks pretty solid, and you've changed buttons colors by group, that's good 👍

I also encourage you to set the calculator into on mode by default to increase UX, so user won't need to press on/off button from start. We can still keep this feature for design purpose without forcing users to press the button. Skeuomorphism is good, but UX is better :)

And let's swap "0" and ".", because traditionally "zero" is on the left side from "decimal".

And don't forget about this bug:

negative > operator > decimal > negative == incorrectly toggles

The only problem with design is that your calculator looks like the old real calculator from 90s, which had the logic similar to Windows standard calculator.

[image: image] https://cloud.githubusercontent.com/assets/16253583/17725378/17221be4-6475-11e6-9851-8bfc7d2feeea.png

[image: image] https://cloud.githubusercontent.com/assets/16253583/17725398/4839745c-6475-11e6-84e5-e216d1770f60.png

https://cloud.githubusercontent.com/assets/1884376/17586365/ec387850-5fde-11e6-9b69-88f74ab73bb0.png

But your calculator doesn't have this logic, it has a logic similar to Google's calculator, which is flat design.

https://cloud.githubusercontent.com/assets/1884376/17586608/65ea3534-5fe0-11e6-93aa-7cd3931455a7.png

That can confuse many campers. Have you been thinking about turning it more into a flat design?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240316984, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_xw_4Paerq0jLzdege5-M1YEjkVMYks5qgpyzgaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack, take it easy, the new calculator won't be selected until the shipping of new challenges, which is at least a few weeks away from now, so don't push yourself, we have plenty of time. And yes, we have about 12 hours difference :smile:

As for design, Quincy wants the example to be as simple as possible, but with all necessary functionality and no bugs, so we don't need features like "on/off" button or spin trick, even though they are cool.

Don't forget to share you flat version when it's done, I'm excited to see it.

no-stack-dub-sack commented 8 years ago

@SamAI-Software, Hey Sam, Here's http://codepen.io/no_stack_dub_sack/pen/EyrGJQ the new pen! A much flatter design to reflect the modern logic.

I fixed the bug I had identified in my earlier draft, and I think all others I had identified earlier, but please feel free to play around with it and see if you can find any more.

I got rid of the on/off button, which I had done before I read your last message anyway, it just didn't make sense with the flat design.

Also, I made a couple of other improvements along the way, including returning the output (main) readout to zero when toggling from negative to positive if a number has not yet been entered after the negative symbol. For example, if the first button that is pressed is +/-, and then the +/- button is pressed immediately after, the calculator returns to it's initialized state. If there is already a formula entered, the rest is not affected but output will still return to 0. A simple improvement but makes the overall UX better I think- the user should never see a completely blank screen.

Not sure if you noticed the scrollbar on my previous version, but another simple improvement was to make the overflow scroll default right to left (which now appears at the bottom of the calc if the formula readout overflows), that way the user still sees what's being entered as they go. The formula font-size is also controlled by textFit.js so that scrolling is not necessary in most situations, unless there's a particularly long formula before or after the equals button.

A few other things as well, but these were the main things I accomplished this evening.

Please let me know what you think! The design is quite obviously inspired by the iOS calc that I showed you earlier, but many of the flat designs are similar, and it was hard to get away from something that looked along these lines.

This is not completely finished, I still need to clean up the code a bit and make sure there's no useless CSS leftover from the previous version, but please let me know if you think there are any other major improvements I could make to the javascript. While it seems to function fairly well, there's always a better to do most everything!

Thanks again Sam! This has been fun so far, excited to see how this turns out. Looking forward to hearing your thoughts on this latest version. Sorry to be so lengthy, just wanted to point out the couple of extra things in case you have any additional thoughts on these features.

Pete

On Wed, Aug 17, 2016 at 9:25 PM, Sam Aiken notifications@github.com wrote:

@no-stack-dub-sack https://github.com/no-stack-dub-sack, take it easy, the new calculator won't be selected until the shipping of new challenges, which is at least a few weeks away from now, so don't push yourself, we have plenty of time. And yes, we have about 12 hours difference 😄

As for design, Quincy wants the example to be as simple as possible, but with all necessary functionality and no bugs, so we don't need features like "on/off" button or spin trick, even though they are cool.

Don't forget to share you flat version when it's done, I'm excited to see it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10158#issuecomment-240597944, or mute the thread https://github.com/notifications/unsubscribe-auth/ARs_x_KrG9ipIF_u9o1bdQPPHXCroL4Iks5qg7SKgaJpZM4Jhtkm .

SamAI-Software commented 8 years ago

@no-stack-dub-sack great calculator and pretty cool design :+1:

Few bugs: 1.001 * 7 = outputs 7.01, should be 7.007 2 / 7 = outputs 0.29, should be much longer. At least 0.2857142857, ideally 0.2857142857142857

Here is a check-list for rounding - test-ur-calc. It's for Windows-like calculator, but many things from it are also applied for Google's logic. I would suggest to increase the amount of zeros for rounding. However, while making the check-list I remember that there was some problem with increasing the amount of zeros, but it was 8 months ago and thus I don't remember what was the issue, so feel free to play around, until you find a perfect solution.

line 54
- answer = Math.round(100* eval(expression)) / 100;
+ answer = Math.round(10000000000000000 * eval(expression)) / 10000000000000000;

Also there is UX issue with buttons. image

They look the same and they are right near each other. I suggest to use symbols +/- and / like in Windows or to put double sign (+/-) in another place.

img

And as I said, Quincy wants it to be as easy and simple as possible, so using libraries like textFit.js is not a good idea. I'm not sure which scrollbar are you talking about, but can we not use it?

And take it easy, we have plenty of time :smile:

no-stack-dub-sack commented 8 years ago

@SamAI-Software, sounds good, I'll address the rounding issue over the next couple of days, I'll try to take it easy, :grinning:, but one way or another I'll be spending all of my free time coding, so it might as well be on this until it's finished.

This is the scrollbar I was talking about: image It only pops up when there's long equations. But I'll get rid of it for this. I will just make the formula output like the input and just reset after it reaches a certain number of digits.

As for the UX, I will adress this as well. Do you think just changing the symbol from (±) to (+/-) will do the tick?

no-stack-dub-sack commented 8 years ago

@SamAI-Software, Ok, I believe all issues fixed: http://codepen.io/no_stack_dub_sack/pen/vKrKvZ

Anything else? I'll continue to play around with it to see if I can produce any other bugs.

SamAI-Software commented 8 years ago

@no-stack-dub-sack :cool: :+1: And interesting solution for rounding, I will need to test it more though.

image

image

image

no-stack-dub-sack commented 8 years ago

@SamAI-Software hmmm... I can look into the exponent thing. Always up for a challenge, but I'll have to put some thought into it.

I think I can work out the Digit Limit Met thing no problem - at least the part about keeping it on screen longer and locking the digits. I like this idea better too, that way when the digit limit is met, the user can decide what to do. Although the choices won't be many, since the backspace button doesn't clear single digits, but rather whole entries. Maybe I can look into changing this as well. Thoughts?

I originally had an alert set up when the user got close to max digits but ended up taking it out.

Sure, I'll do this too: "±" and "/".

The rounding - I haven't tested it extensively, but I think it should work. My logic was: any number that has less than 12 decimal places, should display as is. All others should just round up or remain the same based on the value of the 12th decimal place. Not 100% accurate obviously, but also not so far off to deem unacceptable. I'll continue to test it though.

The biggest challenge here I think will definitely be the exponent solution. eval() seems to do this automatically when we start getting to reallllllly big numbers, but they're too big to display with this many digits without changing the font size.

Just to clarify - 3.7037037e+24 = 3.7037037 multiplied by 10 twenty-four times, correct?

SamAI-Software commented 8 years ago

I originally had an alert set up when the user got close to max digits but ended up taking it out.

Haha, that's actually a good UX feature :+1: It's very important to implement it in login forms for passwords, before locking the user's account after a certain amount of failed tries. However, our goal is simplicity, otherwise the calculator won't be chosen for an official FCC example. So don't worry about it.

My logic was: any number that has less than 12 decimal places, should display as is.

Oh, OK, I see. You forgot about this bug: image

but they're too big to display with this many digits without changing the font size.

Actually, decreasing the font size might be the easiest solution, and thus the best one for our approach.

Just to clarify - 3.7037037e+24 = 3.7037037 multiplied by 10 twenty-four times, correct?

Yes