marlatte / calculator

Calculator with light/dark mode, basic equations, accurate rounding, and even factorials.

Hi there 👋

I'm a front-end developer educated through The Odin Project who also enjoys:

• Making music 🎸 🥁 🎤
• Designing logos and layouts 🖼️ 🖍️
• Tearing my hair out over soccer ⚽️ 🛡️

Skilled with

calculator's Issues

Update screen backend

• Rename all #screen to #active-num
• onScreen --> activeNum
• Add expression to match #expression
• halfClear() clears activeNum
• allClear() clears expression too
• operator buttons run equation

See also #5 and #6

Clear button

• Change textContent AC <--> C depending on situation
• Sense whether it is clearing everything or just the most recent number
  • Find the lastIndexOf(" ") and splice() from there, replacing it with "0"
  • If last character is " 0", switch to AC.

Button improvements

• Scale or shift up a few pixels? Or both if scaling is subtle
• Orange column could be whiter in :hover

Add buttons

add, subtract, multiply, divide, equals, clear, invert (x -1), 0-9, decimal point.

iPhone calc has 19 buttons (0 is double wide and 1-9 are a 3x3 grid).

Bug: period button returns NaN

Trying to add a decimal to a number instead adds NaN to the end of the number, thus messing up any calculations attempted.

Pick a theme

• Color scheme
• Fonts
• Buttons: round or rounded squares?
• Hover functionality

Detect last number

I was manipulating the last number so much that it seems easier to make it its own thing.
Store all characters after the last " " in a variable.

let screenBreak = onScreen.textContent.lastIndexOf(" ");
let lastNumber = +onScreen.textContent.slice(screenBreak);

Connect buttons to keyboard

Buttons connected to click function, but still need to be able to call functions from keyboard.

• Read keyboard input
• multiply from x or *
• divide from ÷ or /
• subtract from - !!!
  • It won't do it automatically because - and – are different.
• percent from p
• clear from c
• 0-9 and . get processed as-is.
• What about backspace?
• Factorial?
• Ignore all other keys

Finish Dark mode

• Flip light-dark gradient in background
• Choose whites/off-whites colors for calculator

Add expression tier

• Add smaller text above active number to store expression.

Rename to "Marlatte: Calculator"

Title in tabs bar should have my name for all projects going forward. Especially if I'm swapping feedback with ppl.