@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!
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.
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.
Then, at the risk of sounding like an idiot, can someone point out the main issue around using the typical Jquery style vs using the DOM style (getElementByID etc type stuff)…; not even sure if I’m explaining this right. Is the latter preffered if your js is in a seperate file? Perhaps if someone could even just point me to a resource. As I said, I enjoy the javascript language but I am not used to the DOM and Jquery; this is all very new to me and I keep forgetting things and then when I try and re-cap I see different ways ways of doing something on places like stack overflow but not always a clear reason why.
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.
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.
