How to turn Cyborg — Week 16
My adventures through Dev Academy’s web development programme
Enspiral Dev Academy is a web development school in Auckland and Wellington, New Zealand. Dev Academy’s Marketing Manager Maddy King has taken it upon herself to brave the programme, and share her #nofilter thoughts on the journey. Check out Week 1 here.
At the end of every Sprint we fill in a reflection form that helps us monitor our progress, congratulate ourselves and ask ourselves what we could have done better. This week, after Sprint 8, mine went:
What did I do well this sprint?
Built a freaken calculator from scratch.
!!
The challenge this week was to build a calculator using JavaScript. It was an opportunity to try out pair programming (i.e. programming with a partner), but as I was feeling pushed for time I made the call to do it on my own, knowing I’ll get plenty of pairing once we’re on bootcamp.
This of course meant I faced the mountain of building a calculator from scratch alone. But, keeping in mind my lessons from my last sprint, I went into it with my head up.
We started by looking at what someone else had done, and “reverse pseudo-coding” it. Pseudo-code means explaining what you’re going to do in plain English, rather than in code. So we had to explain what this person had done, and how they’d built their calculator, in words. I found they’d done a couple of things that I hadn’t been exposed to yet, to do with events and strings. But explaining their logic gave me a really good starting point to try and build my own calculator. And because I didn’t understand all of it, I couldn’t just copy them, I had to think of my own way of solving the problem using what I knew.
I started by making the face of the calculator in HTML — the buttons and the screen. I did this using a 4x4 table, with rows and columns. Each button was a cell of the table, and some buttons that took up two cells (like the Clear button). I used the calculator on my phone as a template, and just put in the simple operators + — x and ÷. Then I styled it a little using CSS, so the buttons changed colours when you hovered over them (just for fun).
Then I started on the JavaScript. My logic was: first I would need to get the number that the user clicks on, and print it to the ‘screen’. Then put the number into an array. Then get the operator that the user clicks on, and the following number. Then do the equation, put the answer in a variable, and print the contents of the variable to the screen of the calculator.
Seems simple, right?
Boy, was it anything but.
First I couldn’t get the value of the click. I tried to use event listeners, which we’d learned about, which locate a section of your HTML and add in the ability to respond to an action in that section, ie. respond to a double-click with a pop-up, or something. This didn’t work for me in the JavaScript. Going over it now I don’t think I fully understood the interaction between the JavaScript and HTML in this. So in the end I used an input object in the HTML that I found on StackOverflow. Then I wrote a function to push that value into a ‘sum’ array.
I wrote another function to clear the array when the clear button was pushed, and print a 0 to the screen — that was fine.
Then I had to write a third function to ‘just do the maths’ when the equals button was pushed. Wow this was tricky.
At first I’d thought that if I treated the input numbers and operators differently I could string them all together into an equation and get the JavaScript to ‘just do’ the equation later. This proved pointless, so I ended up putting the whole equation into the sum array, numbers and operators and everything. I tried pulling all those values out of the array, reducing the array using the reduce function, messing with the reduce function a bit to try and get it to work with divide or multiply. But I just couldn’t figure out how to get JavaScript to do the maths that was contained in the array.
In the end I had spent 3 hours on it, so I hacked together a workaround. I wrote an ‘if’ statement, that said:
‘Look at the first three items in the array (the number, followed by the operator, followed by the next number).
If the second item in the array is a +, then add the first item and the third item together.
If it’s a -, then subtract the second item from the first.’ Etc.
I put the result in an answer variable. Variables store data. I printed the contents of the variable to the screen of the calculator using document.getElementById.innerHTML. This locates an area of the HTML (which builds your website) and then rewrites it with your new contents, so the new contents are printed out on the website. It’s pretty cool.
Then I got the function to clear the array so the user could start again.
But the maths still wouldn’t work. At first nothing was printing to the screen, and I realised it was because I’d missed some basic syntax around the operators (when you’re doing maths in JavaScript you have to write += instead of just +, otherwise it thinks you’re assigning a new value to a variable). Then it was finally printing to the screen (breakthrough!) but the numbers it was printing were illogical. I added in some console.log commands and used the debugger, so that I could see what the JavaScript was doing at each step, and saw that, while everything was going into the array as it should, the result was wild. It kept printing things like “3 + 3 = 337” or “2 x 5 = 45.”
Eventually (and I mean eventually — 3 hours later) I realised the absolute obvious — that all the values were going into the array as Strings, which means as text, rather than as numbers. So JavaScript couldn’t do the maths, because it thought it was adding together words or letters, rather than doing an equation. I put the first and third values of the array into variables, and converted the contents of those variables into numbers.
Viola!
It finally worked. I was so happy. And I’d done it all on my own.
Of course the calculator could only handle single-digit numbers, and couldn’t hold an equation while deleting the last value (like when you press C on a calculator, rather than AC which clears all the values). But after 6 hours none of that mattered. I was just so happy to get a machine to perform the most basic possible maths. I wrote-
“I’m really pleased with the way I approached the problem, I think I’ve solved it in a different way to anyone else. That’s probably why it doesn’t quite work, but points for innovation!”
Phase: 0
Week: 16
Sprint: 8
Time logged: 9:30 hours
Would you like to learn the skills to begin your journey into technology, and creative, well-paid work that you can do from anywhere in the world? Join Dev Academy today. Start the preparation phase through remote learning, before entering the in-class bootcamp in Auckland or Wellington. Graduate only 9 weeks later with the skills to become a junior web developer and craft the future. Apply now.
