Calculator app - theme 3

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  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 😀

  Marked as helpful

  0