Day 44.

Calculator

• You can create a container and use % to set the size of the buttons. It's best to use it when you set the size of child elements relative to the parent. If you need a certain button to be twice the size of the other buttons, you can set it to be twice % of it.

• There isn't a way to know the width of a flexed item unless you calculate it hard code yourself.

https://www.joshwcomeau.com/css/custom-css-reset/

• "Flow layout is the primary layout mode in CSS.

• vh unit doesn't work properly on mobile devices. 100vh takes up more than 100% of the screen.

• line-height: 1.5. => Here's the problem: for those who are dyslexic, these lines are packed too closely together, making it harder to read. The WCAG criteria states that line-height should be at least 1.5."

• Q. I'm trying to operate the calculation when user clicks the equal button. I have to make currNum not run at the same eventListner as previousNum does, now they get set to the same number because the buttons have the same eventListener. But they should get called the on the same eventListener, which are number buttons, when they're clicked. I need it to store the previousNum as the first number user clicks, and currNum as the second number the user clicks. How can I go about fixing this, when both variables do need to have the same eventListeners?

Code: I have two if blocks, one to set previousNum and one to set currNum.

What I expected: I expected the code to first evaluate the condition if(previousNum === undefined to get previousNum. When I click number button for the second time, I expected if(previousNum !== undefined condition to be met and run the code to get currNum.

What I got: Two if blocks run simultaneously when I only click one number button. I made if blocks to console.log the results.

Solution: Everything that happens after eventListener has to be handled by the event handler. I could've set the if statements in the event handler instead of in the global scope. Write a separate function with if statements in the global scope and register it as an event handler.

Git

• Commit often! Break down a problem into the smallest problem.

• git log --oneline

• git reflog

• Q. I was working on a very small part of a very small feature, I committed a half working code with a commit msg wip: feature and I was git commit --amend --no-edit ing whenever I got some progress, to eventually name the commit properly when I have the full working feature. But I forgot that and went ahead to git commit an entirely new snapshot.

• \=> This caused me so much headache - do git log --oneline and check your latest commit before you commit a new snapshot.