React에서 처음부터 계산기 만들기

I'm not going to lie. This one was kind of a though one in the visual area. Not because it was particularly difficult to style in Sass, but because after making two functions that build and returned all my buttons, I was left with an unordered grid of 20 elements (some of them bigger than the rest.)

My first idea to make the keypad resemble the one of an actual calculator was to use the grid-template-area property on my parent element, and then give each group of related children the same grid-area name. This turned out a failure no matter how I wrote the template. Many of my buttons always ended up either overflowing or outright disappearing from the grid, and I ended up spending the biggest chunk of time just to try and make it work, then ditching it for something else, and then going back to it again.

Lucky for me, around this time Kevin Powell had published a . It was unrelated to what I was trying to accomplish, but it introduced me to the grid-column and grid-row properties which, alongside the addition of a data attribute to every single one of my buttons, helped me to finally get that annoying grid exactly the way I wanted.

Basically, I set the display of my parent element to grid, set my number of columns with grid-template-columns , and then I used a combination of those two properties I learned and span to put my problematic keys in their place, selecting them by their data-key attribute.

.Buttons__button[data-key="="] {
            grid-row: 5;
            grid-column: 2/5;
        }

As I previously mentioned, I already had a very basic calculation algorithm lying around my repositories, so I only had to figure out how to implement it in the app with the usestate hook.

The first problem was choosing what type of input to pass into the function I was supposed to code.

I needed to use the calc state prop not only to store my input, but also to display what the user was inputting. So I decided to go with a string, because it was easier to manipulate inside the state, and also, because I'm yet to figure out a non-convoluted way to set my state to an array of numbers interleaved with string values. Who knows, maybe I'm not seeing it, but it would be a hundred times easier to work with.

The next problem I came across was getting each of those string values into an array without having multiple digit numbers breaking up and operators getting out of place.

I solved this by taking the string input and, in one hand, filtering the operators out, and in the other hand, splitting it by its operators to get the numbers out. I stored each of the two resulting arrays into their own variable, and proceeded to combine both into const operations using map. Finally, I mapped the result again to obtain the final array newArray (yes, I ran out of names by this point) with parsed numbers, filtering any undesired values at the end. I hope this snippet speaks a little better about it:

const operators = ["+", "-", "/", "*", "^", "!"];
const numbers = nums.split(/[+-\/*^!]/)
const opts = [...nums].filter( value => operators.includes(value))

const operation = numbers.map( (num, i) => {
    if(opts[i] !== undefined) {
      return [num, opts[i]]
    } else {
      return num
    }
    }).flat().filter( value => value !== "");

const newArray = operation.map( (value, i, array )=> {
    if(!(operators.includes(value))) {
        return parseFloat(value);
    } else if ( value === array[i-1] && value === "-") {
        return parseFloat(value+array[i+1])
    } else {
        return value;
    }
  }).filter( (value, i, array) => {
    if((typeof(value) === "number" && typeof(array[i-1]) === "string") || array[i-1] === undefined || typeof value === "string") {
        return value;
    }
  })

This piece of code basically turns this: "2+2--222"
Into this: [2, "+", 2, "-", -222]

From that point on, I just had to make a loop with newArray.length > 0 as a condition to take each of its values and perform a calculation with the next one.

Now the algorithm was ready to be used.