toFixed vs padEnd

 

  • toFixed(2) → always returns exactly 2 decimal places and rounds (e.g. 1.235 -> "1.24", 1 -> "1.00").
  • Your current formatNumberWithDecimal → pads to at least 2 decimals but preserves extra digits (e.g. 1.235 -> "1.235", 1 -> "1.00").


//format number with decimal places
export function formatNumberWithDecimal(num: number): string {
  const [int, decimal] = num.toString().split('.');
  return decimal ? `${int}.${decimal.padEnd(2, '0')}` : `${int}.00`;
}

Comments

Post a Comment

Popular posts from this blog

new Promise((resolve) => setTimeout(resolve, ms))

  resolve is the function that tells a JavaScript Promise : “This async task is finished successfully.” In your code: const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); here’s what happens step-by-step: new Promise(...) creates a promise. JavaScript automatically provides a function called resolve . setTimeout(resolve, ms) waits ms milliseconds. After the timer finishes, resolve() is called. Calling resolve() marks the promise as completed. So this: delay(1000) creates a promise that resolves after 1 second. Example: delay(1000).then(() => { console.log("1 second passed"); }); or with async/await : await delay(1000); console.log("done"); You can think of it like this: new Promise((resolve) => { // do async work resolve(); // finish successfully }); resolve is just a parameter name. You could rename it: new Promise((finish) => { setTimeout(finish, ms); }); but resolve is the standard convention. https://...
Read more

min-h-screen in Tailwind CSS

min-h-screen in Tailwind CSS means: min-height: 100vh; So the element’s minimum height becomes the full height of the browser viewport. Example: <div class="min-h-screen bg-gray-100"> Content </div> This makes the <div> at least as tall as the screen. Common use cases: Full-page layouts Centering content vertically Sticky footer layouts Hero sections Example with centered content: <div class="min-h-screen flex items-center justify-center"> <h1>Hello</h1> </div> flex enables flexbox items-center centers vertically justify-center centers horizontally min-h-screen gives the container full screen height Difference from h-screen : Class Meaning h-screen exact height = screen height min-h-screen minimum height = screen height, can grow taller So if content becomes larger than the screen: h-screen may overflow min-h-screen expands naturally and is usually safer for pages https://chatgpt.com/s/t_6a07279539288191a9e55e3...
Read more

Ecommerce with JS

 Not quite. It works for many numbers, but there are some edge cases. Your function: export function round2(value: number | string) { if (typeof value === 'number') { return Math.round((value + Number.EPSILON) * 100) / 100; } else if (typeof value === 'string') { return Math.round((Number(value) + Number.EPSILON) * 100) / 100; } else { throw new Error('Value is not a number or string'); } } What it does well round2(1.234); // 1.23 round2(1.235); // 1.24 round2("12.345"); // 12.35 The Number.EPSILON trick helps with some floating-point issues: Math.round(1.005 * 100) / 100 // 1 round2(1.005) // 1.01 What it doesn't guarantee Invalid strings round2("abc") // NaN No error is thrown because "abc" is still a string. You may want: const num = Number(value); if (Number.isNaN(num)) { throw new Error("Invalid number"); } Very large numbers Floating-point precision limits still apply: round2(12345...
Read more