Merge pull request #50 from franciscoaiolfi/feature/css-units-converter

[Feature] - CSS Units Converter

README.md

@@ -40,6 +40,7 @@ Here is the list of all utilities:
 - [Number Base Changer](https://jam.dev/utilities/number-base-changer)
 - [CSS Inliner for Email](https://jam.dev/utilities/css-inliner-for-email)
 - [Regex Tester](https://jam.dev/utilities/regex-tester)
+- [CSS Units Converter](https://jam.dev/utilities/css-units-converter)
 
 ### Built With
 

components/seo/CssUnitsConverter.tsx

@@ -0,0 +1,68 @@
+export default function CssUnitsConverter() {
+  return (
+    <div className="content-wrapper">
+      <section>
+        <h2>CSS Units Converter by Jam.dev</h2>
+        <p>
+          Jam's free tool for converting CSS units. Whether you need to convert
+          from pixels (px) to rem, vw, or other units, this tool makes it easy
+          to switch between different CSS units with precision. It's designed
+          for developers and designers who need to ensure their web layouts are
+          consistent across various screen sizes and devices.
+        </p>
+      </section>
+
+      <section>
+        <h2>How to Use:</h2>
+        <ul>
+          <li>
+            Enter the value you want to convert in the "Input Value" field.
+          </li>
+          <li>Select the unit of the value from the "From Unit" dropdown.</li>
+          <li>
+            Choose the unit to which you want to convert from the "To Unit"
+            dropdown.
+          </li>
+          <li>
+            If converting to or from units like vw, vh, vmin, or vmax, specify
+            the container width in pixels.
+          </li>
+          <li>Click "Convert" to see the result.</li>
+          <li>
+            You can copy the converted value by clicking the "Copy" button.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Why CSS Unit Conversions Matter</h2>
+        <p>
+          Converting CSS units is essential for creating responsive and
+          accessible web designs. Different units serve different purposes:
+        </p>
+        <ul>
+          <li>
+            <b>Pixels (px):</b> Ideal for fixed-size elements, but not always
+            suitable for responsive designs.
+          </li>
+          <li>
+            <b>Rems:</b> These relative units scale based on the root or parent
+            element, making it easier to create flexible and scalable designs.
+          </li>
+          <li>
+            <b>Viewport Units (vw, vh, vmin, vmax):</b> These units are based on
+            the size of the viewport, allowing for designs that adapt fluidly to
+            different screen sizes. They're particularly useful for setting
+            dimensions that should be a percentage of the viewport's width or
+            height.
+          </li>
+        </ul>
+        <p>
+          By using the right units, you can ensure your designs are both
+          visually consistent and adaptable, enhancing the user experience
+          across a wide range of devices.
+        </p>
+      </section>
+    </div>
+  );
+}

components/utils/css-units-converter.utils.test.ts

@@ -0,0 +1,67 @@
+import {
+  pxToRem,
+  remToPx,
+  pxToVw,
+  vwToPx,
+  pxToVh,
+  vhToPx,
+  pxToVmin,
+  vminToPx,
+  pxToVmax,
+  vmaxToPx,
+} from "./css-units-converter.utils";
+
+describe("css-units-converter.utils", () => {
+  test("pxToRem should convert px to rem correctly", () => {
+    expect(pxToRem(16)).toBe(1);
+    expect(pxToRem(32)).toBe(2);
+    expect(pxToRem(32, 16)).toBe(2);
+    expect(pxToRem(16, 8)).toBe(2);
+  });
+
+  test("remToPx should convert rem to px correctly", () => {
+    expect(remToPx(1)).toBe(16);
+    expect(remToPx(2)).toBe(32);
+    expect(remToPx(2, 16)).toBe(32);
+    expect(remToPx(2, 8)).toBe(16);
+  });
+  test("pxToVw should convert px to vw correctly", () => {
+    expect(pxToVw(100, 1920)).toBeCloseTo(5.21, 2);
+    expect(pxToVw(960, 1920)).toBeCloseTo(50, 2);
+  });
+
+  test("vwToPx should convert vw to px correctly", () => {
+    expect(vwToPx(5.21, 1920)).toBeCloseTo(100.032, 2);
+    expect(vwToPx(50, 1920)).toBeCloseTo(960, 2);
+  });
+
+  test("pxToVh should convert px to vh correctly", () => {
+    expect(pxToVh(100, 1080)).toBeCloseTo(9.26, 2);
+    expect(pxToVh(540, 1080)).toBeCloseTo(50, 2);
+  });
+
+  test("vhToPx should convert vh to px correctly", () => {
+    expect(vhToPx(9.26, 1080)).toBeCloseTo(100, 1);
+    expect(vhToPx(50, 1080)).toBeCloseTo(540, 1);
+  });
+
+  test("pxToVmin should convert px to vmin correctly", () => {
+    expect(pxToVmin(100, 1920, 1080)).toBeCloseTo(9.26, 2);
+    expect(pxToVmin(540, 1920, 1080)).toBeCloseTo(50, 2);
+  });
+
+  test("vminToPx should convert vmin to px correctly", () => {
+    expect(vminToPx(5.21, 1920, 1080)).toBeCloseTo(56.27, 2);
+    expect(vminToPx(28.12, 1920, 1080)).toBeCloseTo(303.7, 2);
+  });
+
+  test("pxToVmax should convert px to vmax correctly", () => {
+    expect(pxToVmax(100, 1920, 1080)).toBeCloseTo(5.21, 2);
+    expect(pxToVmax(960, 1920, 1080)).toBeCloseTo(50, 2);
+  });
+
+  test("vmaxToPx should convert vmax to px correctly", () => {
+    expect(vmaxToPx(5.21, 1920, 1080)).toBeCloseTo(100, 1);
+    expect(vmaxToPx(50, 1920, 1080)).toBeCloseTo(960, 1);
+  });
+});

components/utils/css-units-converter.utils.ts

@@ -0,0 +1,59 @@
+export function pxToRem(px: number, base: number = 16): number {
+  return px / base;
+}
+
+export function remToPx(rem: number, base: number = 16): number {
+  return rem * base;
+}
+
+export function pxToVw(px: number, viewportWidth: number): number {
+  return (px / viewportWidth) * 100;
+}
+
+export function vwToPx(vw: number, viewportWidth: number): number {
+  return (vw / 100) * viewportWidth;
+}
+
+export function pxToVh(px: number, viewportHeight: number): number {
+  return (px / viewportHeight) * 100;
+}
+
+export function vhToPx(vh: number, viewportHeight: number): number {
+  return (vh / 100) * viewportHeight;
+}
+
+export function pxToVmin(
+  px: number,
+  viewportWidth: number,
+  viewportHeight: number
+): number {
+  const vmin = Math.min(viewportWidth, viewportHeight);
+  return (px / vmin) * 100;
+}
+
+export function vminToPx(
+  vmin: number,
+  viewportWidth: number,
+  viewportHeight: number
+): number {
+  const min = Math.min(viewportWidth, viewportHeight);
+  return (vmin / 100) * min;
+}
+
+export function pxToVmax(
+  px: number,
+  viewportWidth: number,
+  viewportHeight: number
+): number {
+  const vmax = Math.max(viewportWidth, viewportHeight);
+  return (px / vmax) * 100;
+}
+
+export function vmaxToPx(
+  vmax: number,
+  viewportWidth: number,
+  viewportHeight: number
+): number {
+  const max = Math.max(viewportWidth, viewportHeight);
+  return (vmax / 100) * max;
+}

components/utils/tools-list.ts

@@ -95,4 +95,9 @@ export const tools = [
       "Test and debug your regular expressions in real-time. Provides quick feedback on pattern matching for strings.",
     link: "/utilities/regex-tester",
   },
+  {
+    title: "CSS Units Converter",
+    description: "Easily convert your CSS units to other units values.",
+    link: "/utilities/css-units-converter",
+  },
 ];