@imtoobose I totally love it. I looked at it and was like “Wow, that’s a good one!” Design-wise it is a very creative, “fresh” approach to the task. It is beautiful and original, but still immediately recognizable as a calculator.
A small tip: There are HTML entities (
×, − and so on) for the mathematical operators that look a lot better to typography enthusiasts like me than - and x. A little extra effort that would make your work stand out even more for the perfectionists out there.
Also, what about the background? Black on black is usually not exactly the best idea. What about a white or grayish wood pattern as a background image? Something that looks natural (such as wood) would probably make an interesting contrast with the “technical” looking calculator.
A minor issue: On a (simulated) 480×320 screen (landscape orientation), the display of the calculator is cut off completely, so the users can’t see what they are typing, nor the result. Not sure if fixing this is worth the effort though. It looks complicated.
Wow, I wasn’t expecting such a detailed response for this. Thank you!
I replaced the operators with uni-code characters as suggested, and they do look nicer.
I’m not fond of images as backgrounds, but I did change it to a lighter color gradient (with a monotone as a fallback). I would love to hear how it looks now.
As for the screen issue, I am aware, but unfortunately would require an inelegant @media enquiry or something clever. It’s probably because of absolute positioning + the transform translate trick for positioning. Perhaps I can make the container wider and shorter for certain configurations. I’ll look into this when I come back to fix the several gripes I have this project.
Again, thank for the feedback, and helping me improve this project!
I don’t know. For me, orange is a “loud” color. I perceive it as distracting sometimes. Gray or beige is a typical color that I would choose as a background. But that is a cultural thing.
If you want an orange-colored world, so be it! Make your world orange, fine with me!
The retro design looks cool! Thumbs up.
My Calculator Link: http://codepen.io/tychoCRD/full/YWWmyM/
I did not use eval(), so built out all the functionality of the operations. I think I may have overcomplicated the work of dealing with order of operations, devising several heady approaches I won’t get into before realizing a while loop search and splice seemed to be the simplest approach for my code. I’m particularly happy about focusing on building everything into an object module which may or may not have been wise, but something I’ve been studying more of.
There are still some issues I could consider improving, namely screen number run-off and keyboard functionality, but I’m pretty tired after fighting with the CSS for a day and night. Maybe something to come to later.
Project Link - https://codepen.io/Jesse989/full/dXXNpm/
Here is my calculator! There are still some bugs to work out, but overall it works as it is supposed to. Feedback always welcome!
Project Link - http://http://codepen.io/daansteraan/full/gMwRoQ/
I forget quite a bit of jquery between these codepen projects… not sure if anyone else feels the same? End up re-learning a whole bunch of stuff which is good I guess.
Anyways. If I could ask specifically for input on how to get this to look better on mobile/tablet since it gets completely squashed then.
Re: jQuery/Vanilla JS:
I definitely need to do more reading to see how exactly groups make a choice to use vanilla JS or jQuery. Apparently, jQuery adds a lot of download size to a web app and makes it run significantly slower, which is why large apps often still use plain JS. I’ve heard someone else say, generally, servers are cheaper than programmers, so if you want to be fast, from a business perspective, jQuery might be the way to go.
For learning good DOM traversal and jQuery, I really really recommend Code School’s free “Try jQuery” course: http://try.jquery.com/ This single-handedly illuminated the “DOM” to me and gave me most of the basic jQuery these projects require.
For seeing the differences between doing something in JS and jQuery, I found this two links which look good: http://youmightnotneedjquery.com/ and https://plainjs.com/
Thanks man, will definitely check out those links. I think I really need to spend time on the DOM stuff. ALl my knowledge at this point is very silo’d.
Project Link - http://codepen.io/exek/full/LNOrOv/
I tried to make the logic as close as possible to the pocket calculator, so my code is quite messy.
Project Link – http://codepen.io/Velenir/full/PzGWxg/
I’m especially proud of the pre-emptive eval as a validity check on input.
Here is my 3D calculater
Have a look
@rameshsyn: Great design!
Here is my calculator: https://codepen.io/mkarabashev/full/KMNEKr/
Comes with parentheses, trig functions, sqrt and ln. That and probably some bugs as well.
Project Link - http://codepen.io/GKlein/full/ZOyEQo/
You can use keyboard too!
Here is mine. I didn’t focus too much on style, but the functionality is there.
Project Link - http://codepen.io/Josh5231/full/yJgjvJ/