Add short numeric format in engineering notation

Author: lulunac27a

src/App.js

@@ -72,18 +72,22 @@ function App() {
       {/*display current points value*/}
       <p>
         Points:{" "}
-        <div id="points-display">
+        <span id="points-display">
           <NumericDisplay value={points} />
-        </div>
+        </span>
       </p>
       {/*increase points from clicking a button*/}
       <button onClick={() => addPointsFromClick()}>Click to Add Points</button>
       <br />
+      Clicker Level: {clickers}
+      <br />
       {/*upgrade clicker (points per click)*/}
       <button onClick={() => upgradeClicker()}>
         Upgrade Clicker (Points Per Click)
       </button>
       <CostDisplay cost={10 * Math.pow(2, clickers - 1)} />
+      Autoclicker Level: {autoClickers}
+      <br />
       {/*upgrade points per second*/}
       <button onClick={() => upgradePointsPerSecond()}>
         Upgrade Points Per Second

src/components/NumericDisplay/NumericDisplay.js

@@ -2,14 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './NumericDisplay.module.css';
 
+function formatNumber(number) {
+  //format number to short form with numeric prefixes
+  const exponent = Math.floor(Math.log10(number));
+  const exponent3 = Math.floor(exponent / 3) * 3;
+  const prefixes = ['', 'K', 'M', 'B', 'T'];
+  if (number < 1000) {
+    return number.toString();
+  } else {
+    const roundedNumber = number.toPrecision(3);
+    return (
+      (parseFloat(roundedNumber) / Math.pow(10, exponent3)).toPrecision(3) +
+      prefixes[exponent3 / 3]
+    );
+  }
+}
 const NumericDisplay = (
   { value }, //display numeric values
 ) => (
-  <div className={styles.NumericDisplay} data-testid="NumericDisplay">
+  <span className={styles.NumericDisplay} data-testid="NumericDisplay">
     {/*display numeric values with specified styles*/}
-    {value}
-    {/*bold the numeric value*/}
-  </div>
+    {formatNumber(value)}
+    {/*bold the numeric value with short exponential form (engineering notation)*/}
+  </span>
 );
 
 NumericDisplay.propTypes = { value: PropTypes.number.isRequired };