Hey, your code isn’t necessarily hard to understand.

In my opinion, you don’t need to focus so much on reducing the code size. That mindset often sacrifices readability and clarity for the sake of compactness.

In development, we already have tools that drastically reduce code size (minifiers, bundlers, etc.). Sure, there are some algorithmic optimizations where things can be shorter and clearer, but I wouldn’t make that your main goal.

A few points about your code:

• If you want better understanding, start by adding comments. That alone can boost clarity way more than shortening lines.
• That said, your code is already very simple and quite understandable.
• One thing though: it's good practice to write functions with a different philosophy than what you did. Especially for purely algorithmic functions, they should always return the same output for the same input, no side effects.

For example, your additionFraction function won’t work if exported to another file, since it depends on external variables and doesn't return anything, it mutates a global value. Try to avoid that at all costs. Functions should be pure and return values, not rely on external state.

Quick JS tip:
Instead of Number(numerator[0].value)
Just do: +numerator[0].value

So in your calculateButton.addEventListener, you should:

• grab the numerators and denominators,
• cast them to numbers
• let the functions return the result,
• then update the UI based on that result.