My Latest Project: Simple Calculator

Hello, FreeCodeCampers.

I’ve created simple calculator based on one of projects from this site. A few hours ago I faced some problems but thanks to @purpose50 I already solved them.

I use React and Redux to create this app. Maybe it doesn’t need Redux but I want to practice my Redux.

The link of the app:
The link of the source code:

I need some feedback both functionality and design. Especially the latter since I’m not good at design. Maybe someone can give me some suggestions about the design.

As of now the buttons are still default, I haven’t designed them. Maybe I will enlarge the text of the buttons.

Feedback on refactoring the source code is also welcomed.

Thank you.

Overall it looks pretty good - I don’t know what to say about the design, that design is good enough for a calculator I think, as a calculator is not something that needs to look fancy - I guess I would say to try and make it more “fun”, that probably doesn’t help much… I always add cursor: pointer; in my css to buttons to let people know they are clickable, even though in this case that’s already pretty obvious - the dual numbers on the screen aren’t necessarily confusing but I think they could be better, like when I hit the = button for 9x9 both numbers just say 81, perhaps keeping the calculation that got you there as one of the numbers might be a little more useful - the only real issue I see is having to do with decimal calculations, try 0.2x0.2, you don’t get what you want - this article I found real quick might help

I would recommend to always upload to github only plain version of your files not the minified ones.

Thanks for the feedback.

Ok, I think it’s good, I don’t remember if I’ve never learned this or I just forgot, at least I’ll try to apply it in the app.

What is the logic here? I mean, if it already too long, is the most left will be omitted? It’s interesting.
Oh do you mean if equal button is clicked, the upper one should still display first operand, operator, and second operand? Then if another operator is clicked, the upper one can then display the result?

Thanks, I didn’t expect that!

I’m sorry, I don’t understand what is “plain version” and “minified”. I’m still new to deploying an app. I’ve deployed two apps and both were deployed to Github.

To @moT01:
I’ve fixed the decimal operation bug, but I haven’t modified how the calculator display inputs and result.

In the link you provided, the suggestion is to multiply the number by 100 so it will be integer. But it limits the decimal to 2.

I don’t want to do that. So in my app whatever the input is, if it’s not integer it will be *10 behind the scene until the number becomes integer. So I had to find a way to track how many multiplication occurs.

But it still has slight error. I tried 0.3/0.09 the output is 3.33...35.

@mrfazry ‘minified’ files are ones like this one where the code is compressed to save space. This is fine for deploying things for performance, but not so great for other people to work with your code.

You’ll find later on, when you start working with build tools (like webpack) that your files will be split into development and production folders, with the dev files being unminified so they’re easy to work with, and a production folder for your deployed, minified files.

Thanks for the explanation. I only followed some online tutorial how to deploy app to Github. I still don’t understand much.

As I mentioned, I’ve only created two apps, both using create-react-app and deployed to Github. Do I need to learn build tools immediately or after doing one or two more mini apps?

I think @ChrisT already explained the difference between plain source file and minified version of that file.

As far as I can see you are already using some building tools so, instead of uploading the production version of the files just upload the development version (the ones you are currently working on). These files are usually in a src directory or similar.

Yes. Thanks for the response. I follow the instruction of this article to build and deploy the app. If I want to deploy the plain source file then I only have to change some settings, right?