Calculator Exploration
No one needs another novice “calculator” but this little device brings up a lot of good conversation points. (this is an example article/portfolio piece)
It uses the most basic computing tasks, it’s a user interface, and it is also a great way to explore modular systems of components.
You can start simple and build out a more complex system as you go.
Using CSS Grid in 2021
What a fun time. HTML and CSS have never been better. At heart, a “calculator” is a group of inputs and an output. In HTML the right element would be a “form.”
(note that this ‘tone’ of voice… doesn’t really imply that you are “new” to programming or that you went to any specific school)
The ‘inputs’ are actually “buttons” – and the HTML just mimics the real calculator layout. The new CSS-grid allows me to knock it out in just a few lines. In this case, because of the classic shape – the 1 layout will work on all screen sizes.
Before adding more specific visual styles, this basic setup allows us to test on many screens and make sure this is the right choice. I could also have made it with flex-box. This acts as a “wire-frame” – so we don’t need to waste time making those in a graphics program.
Clean HTML and CSS
Once we passed it around and checked it out on a few different devices – it seemed like a good way to lay things out. So, I styled it a little more with some regular CSS.
I decided to stack the HTML and experiment with possible data-attributes for the keys – for when I do the JavaScript later. Each key could use that to denote its operator or number.
There’s just a little event delegation in the JavaScript to monitor what buttons get tapped.
Exploring/comparing SCSS and native custom-properties
I used custom-properties (CSS variables) for the colors so I could swap them on the fly – and I used SCSS mixins and nesting to keep everything very modular and clean. Usually – a bigger system is going to use SCSS.
The new native CSS stuff is really cool, but it still doesn’t solve many of the problems that SCSS does. I’m not sure how these will work together going forward but they are both very powerful tools.
Anything else?
You could totally do the JavaScript for this. And you could show it 3 different ways. You could make it in Vue.js or React to show the difference between them. You can do anything….
BUT the most important thing – what do you want the people seeing this – to take away? What do you want them to know about you? How can you prove that YOU are the right person for the job?
Other types of “Calculators”
Maybe you made a funny thing like this – and you can show another angle of a “tip calculator” that shows your wild side! haha.
Or you have another “calculating” project – like the one we made for our ISA/Tuition Calculator.
In conclusion
Why did I do this? What challenges did I face? What decisions did I make? What were the outcomes? How does this apply to THE JOB that YOU are trying to get?
A group of articles like this (and maybe just one CRUD type app) – would intrigue me as an employer – much more than a “portfolio website” that links to your boot camp projects.
The key is to PICK THE JOB YOU WANT: and then make some explorations like that that prove your enthusiasm and your passion for the types of problems your potential employer needs solved.
It’s that simple.
Haven’t chosen a school yet?
Come meet us. Hear what we have to say. It’ll be fun.