The exams season has started, and eventually, I’ll get to grade a couple of papers soon. I usually use my calculator to make sure I don’t make mistakes. So I thought ‘Hey instead of using a calculator, why not build my own and use it when the time comes!’ So that’s what I did! I was inspired by Erica Salvetti design here. So I wanted to make it come to life.
This time, I started with the design part first. I thought it wouldn’t take long because yesterdays design didn’t. Boy oh boy I was wrong [I should just quit assuming stuff, a lesson should be learned by now]. First, I wanted the layout the interface. and the process was as follows:
So I have the layout ready now since I’ll be having different UI’s based on the screen size. I had to test the responsiveness.
So good my code is working as planned [well not really I just showed you the final result I had to do a dozen test cases]. So now I work on the buttons of the calculator and well
okay cool. now let’s see when I change the screen size
[cry, cry and more cry] damn I’m missing a test case. So I hunt for that size, and I finally found it and voila
Now I have my alignments working, It’s time to style it up and add button contents so that’s what I did
At this point, I took the time to appreciate the work I did because I know what’s about to come would be a nightmare. You see with this style of the calculator, I wanted to show the first number for computation, second, and operation just as what Erica did. At the started, I wanted to focus on making a single operation work witch was choosing your first number, operation second and then calculating the results. And I think I did it
umm, hold it. What’s going on… Clearly, there is something going on here. And I know my formula is right. it’s addition to crying out loud. And then once I looked at my console. I got it. The input should be trimmed from white spaces and return cartages. So regular expressions to the rescue. And…
Then well was the hard part which was having your calculations continue until you click the clear button, the negative and positive numbers, and percentages. It took a while to figure out [I didn’t think I’ll finish today at all] but after some tweaking, and state triggers I think I managed to do it! [woooohoooo] look look look
Now I still have to do more test cases to see what bugs come out. I’d appreciate it if you break the app and show me the results you get. You can check it out for yourselves here. Now my almost final step is to fix the style based different screen sizes and well the result is
I started this thinking it will be a breeze, but with UI to consider it isn’t. Here I was thinking simple calculators are very easy to do. Never again will I underestimate simple things ever again. So to you kind sir who invented the calculator I salute you. So that’s it for today, and see you tomorrow.
https://athougcodesatnight.com/wp-content/uploads/12.gif277480athoughttps://athougcodesatnight.com/wp-content/uploads/Athoug-Codes-at-night_text-300x138.pngathoug2017-12-23 01:55:442017-12-30 10:12:50Calculator Day 16