Calculator app - theme 3

Hi 👋

Great work on this!

One thing I noticed is that when the calculator displays very large numbers the number will overflow off the screen.

In terms of solutions, there are a few.

You could introduce a scrollbar to see the full number, dynamically reduce the font-size as the number reaches 16 digits (currently the full width of the calculator). The second option looking something like this:

function adjustFontSizeForDisplay(number) {
    const displayElement = document.getElementById('calc-output');
    let fontSize = 56; // Default font size in pixels
    const maxLength = 16; // Max length of number before adjusting font size

    if (number.toString().length > maxLength) {
        const overflowLength = number.toString().length - maxLength;
        fontSize -= overflowLength * 2; // Decrease font size based on overflow length
    }

    displayElement.style.fontSize = `${fontSize}px`;
}

You could then apply this function everytime the value in the calc-output changes.

Hope this helps at all 😀