From fb8bc0b9fff258ab9f0e42f1724d32f351e4a233 Mon Sep 17 00:00:00 2001 From: Arthur Arakelyan Date: Sat, 22 Jun 2024 18:30:14 +0300 Subject: [PATCH 1/4] feat: Added percentage(%) unit converters --- src/converters.ts | 228 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) diff --git a/src/converters.ts b/src/converters.ts index 445e337..fbc55be 100644 --- a/src/converters.ts +++ b/src/converters.ts @@ -95,6 +95,17 @@ export const pxToMm = (px: number, options: ConverterOptions = {}): number => { return applyOptionsOnConversion(px * 0.2645833333, options); }; +/** + * Converts **px** to **percentage** based on given **base** + * @param px The number of **px** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const pxToPercentage = (px: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((px / base) * 100, options); +}; + /** * Converts **rem** to **px** based on given **remSize** * @param rem The number of **rem** for converting to px @@ -197,6 +208,18 @@ export const remToMm = (rem: number, remSize = 16, options: ConverterOptions = { return applyOptionsOnConversion((rem * remSize) * 0.2645833333, options); }; +/** + * Converts **rem** to **percentage** based on given **remSize** and **base** + * @param rem The number of **rem** for converting to percentage + * @param remSize The size of **1 rem** in pixels + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const remToPercentage = (rem: number, remSize: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((rem * remSize) / base) * 100, options); +}; + /** * Converts **em** to **px** based on given **emSize** * @param em The number of **em** for converting to px @@ -299,6 +322,18 @@ export const emToMm = (em: number, emSize = 16, options: ConverterOptions = {}): return applyOptionsOnConversion((em * emSize) * 0.2645833333, options); }; +/** + * Converts **em** to **percentage** based on given **emSize** and **base** + * @param em The number of **em** for converting to percentage + * @param emSize The size of **1 em** in pixels + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const emToPercentage = (em: number, emSize: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((em * emSize) / base) * 100, options); +}; + /** * Converts **vw** to **px** based on given **viewportWidth** * @param vw The number of **vw** for converting to px @@ -401,6 +436,18 @@ export const vwToMm = (vw: number, viewportWidth: number, options: ConverterOpti return applyOptionsOnConversion((vw * viewportWidth / 100) * 0.2645833333, options); }; +/** + * Converts **vw** to **percentage** based on given **viewportWidth** and **base** + * @param vw The number of **vw** for converting to percentage + * @param viewportWidth The size of viewport width in pixels + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const vwToPercentage = (vw: number, viewportWidth: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((((vw * viewportWidth) / 100) / base) * 100, options); +}; + /** * Converts **vh** to **px** based on given **viewportHeight** * @param vh The number of **vh** for converting to px @@ -503,6 +550,18 @@ export const vhToMm = (vh: number, viewportHeight: number, options: ConverterOpt return applyOptionsOnConversion((vh * viewportHeight / 100) * 0.2645833333, options); }; +/** + * Converts **vh** to **percentage** based on given **viewportHeight** and **base** + * @param vh The number of **vh** for converting to percentage + * @param viewportHeight The size of viewport height in pixels + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const vhToPercentage = (vh: number, viewportHeight: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((((vh * viewportHeight) / 100) / base) * 100, options); +}; + /** * Converts **pt** to **px** * @param pt The number of **pt** for converting to px @@ -597,6 +656,17 @@ export const ptToMm = (pt: number, options: ConverterOptions = {}): number => { return applyOptionsOnConversion((pt * 1.3333343412075) * 0.2645833333, options); }; +/** + * Converts **pt** to **percentage** based on given **base** + * @param pt The number of **pt** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const ptToPercentage = (pt: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((pt * 1.3333343412075) / base) * 100, options); +}; + /** * Converts **in** to **px** * @param inch The number of **in** for converting to px @@ -691,6 +761,17 @@ export const inToMm = (inch: number, options: ConverterOptions = {}): number => return applyOptionsOnConversion((inch * 96) * 0.2645833333, options); }; +/** + * Converts **inch** to **percentage** based on given **base** + * @param inch The number of **inch** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const inToPercentage = (inch: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((inch * 96) / base) * 100, options); +}; + /** * Converts **pc** to **px** * @param pc The number of **pc** for converting to px @@ -785,6 +866,17 @@ export const pcToMm = (pc: number, options: ConverterOptions = {}): number => { return applyOptionsOnConversion((pc * 16) * 0.2645833333, options); }; +/** + * Converts **pc** to **percentage** based on given **base** + * @param pc The number of **pc** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const pcToPercentage = (pc: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((pc * 16) / base) * 100, options); +}; + /** * Converts **cm** to **px** * @param cm The number of **cm** for converting to px @@ -879,6 +971,17 @@ export const cmToMm = (cm: number, options: ConverterOptions = {}): number => { return applyOptionsOnConversion((cm * 37.7952755906) * 0.2645833333, options); }; +/** + * Converts **cm** to **percentage** based on given **base** + * @param cm The number of **cm** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const cmToPercentage = (cm: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((cm * 37.7952755906) / base) * 100, options); +}; + /** * Converts **mm** to **px** * @param mm The number of **mm** for converting to px @@ -972,3 +1075,128 @@ export const mmToPc = (mm: number, options: ConverterOptions = {}): number => { export const mmToCm = (mm: number, options: ConverterOptions = {}): number => { return applyOptionsOnConversion((mm * 3.7795275591) * 0.0264583333, options); }; + +/** + * Converts **mm** to **percentage** based on given **base** + * @param mm The number of **mm** for converting to percentage + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **percentage** + */ +export const mmToPercentage = (mm: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((mm * 3.7795275591) / base) * 100, options); +}; + +/** + * Converts **percentage** to **px** based on given **base** + * @param percent The number of **percentage** for converting to px + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **px** + */ +export const percentageToPx = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((percent * base) / 100, options); +}; + +/** + * Converts **percentage** to **rem** based on given **base** and **remSize** + * @param percent The number of **percentage** for converting to rem + * @param base The size of **base** in pixels + * @param remSize The size of **1 rem** in pixels. By default, **16** + * @param options Conversion options object + * @returns {number} A number converted to **rem** + */ +export const percentageToRem = (percent: number, base: number, remSize = 16, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) / remSize, options); +}; + +/** + * Converts **percentage** to **em** based on given **base** and **emSize** + * @param percent The number of **percentage** for converting to em + * @param base The size of **base** in pixels + * @param emSize The size of **1 em** in pixels. By default, **16** + * @param options Conversion options object + * @returns {number} A number converted to **em** + */ +export const percentageToEm = (percent: number, base: number, emSize = 16, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) / emSize, options); +}; + +/** + * Converts **percentage** to **vw** based on given **base** and **viewportWidth** + * @param percent The number of **percentage** for converting to vw + * @param base The size of **base** in pixels + * @param viewportWidth The size of viewport width in pixels + * @param options Conversion options object + * @returns {number} A number converted to **vw** + */ +export const percentageToVw = (percent: number, base: number, viewportWidth: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((((percent * base) / 100) / viewportWidth) * 100, options); +}; + +/** + * Converts **percentage** to **vh** based on given **base** and **viewportHeight** + * @param percent The number of **percentage** for converting to vh + * @param base The size of **base** in pixels + * @param viewportHeight The size of viewport height in pixels + * @param options Conversion options object + * @returns {number} A number converted to **vh** + */ +export const percentageToVh = (percent: number, base: number, viewportHeight: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion((((percent * base) / 100) / viewportHeight) * 100, options); +}; + +/** + * Converts **percentage** to **pt** based on given **base** + * @param percent The number of **percentage** for converting to pt + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **pt** + */ +export const percentageToPt = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) * 0.74999943307122, options); +}; + +/** + * Converts **percentage** to **in** based on given **base** + * @param percent The number of **percentage** for converting to in + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **in** + */ +export const percentageToIn = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) / 96, options); +}; + +/** + * Converts **percentage** to **pc** based on given **base** + * @param percent The number of **percentage** for converting to pc + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **pc** + */ +export const percentageToPc = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) * 0.0625, options); +}; + +/** + * Converts **percentage** to **cm** based on given **base** + * @param percent The number of **percentage** for converting to cm + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **cm** + */ +export const percentageToCm = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) * 0.0264583333, options); +}; + +/** + * Converts **percentage** to **mm** based on given **base** + * @param percent The number of **percentage** for converting to mm + * @param base The size of **base** in pixels + * @param options Conversion options object + * @returns {number} A number converted to **mm** + */ +export const percentageToMm = (percent: number, base: number, options: ConverterOptions = {}): number => { + return applyOptionsOnConversion(((percent * base) / 100) * 0.2645833333, options); +}; From 5c72d96d617d46e0387b7b3c870e55909b761129 Mon Sep 17 00:00:00 2001 From: Arthur Arakelyan Date: Sat, 22 Jun 2024 18:30:34 +0300 Subject: [PATCH 2/4] 1.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1ea6933..9aa1cd2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-unit-converter-js", - "version": "1.0.1", + "version": "1.0.2", "description": "Converts all common CSS units", "private": false, "main": "dist/index.js", From 6dfe99fc95ffefd895c7bb615389906e7e3ee2c8 Mon Sep 17 00:00:00 2001 From: Arthur Arakelyan Date: Sun, 23 Jun 2024 15:08:38 +0300 Subject: [PATCH 3/4] feat: Added unit tests for percentage(%) unit converters --- tests/converters.test.ts | 284 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) diff --git a/tests/converters.test.ts b/tests/converters.test.ts index 3155170..f3ba882 100644 --- a/tests/converters.test.ts +++ b/tests/converters.test.ts @@ -8,6 +8,7 @@ import { pxToPc, pxToCm, pxToMm, + pxToPercentage, remToPx, remToEm, remToVw, @@ -17,6 +18,7 @@ import { remToPc, remToCm, remToMm, + remToPercentage, emToPx, emToRem, emToVw, @@ -26,6 +28,7 @@ import { emToPc, emToCm, emToMm, + emToPercentage, vwToPx, vwToRem, vwToEm, @@ -35,6 +38,7 @@ import { vwToPc, vwToCm, vwToMm, + vwToPercentage, vhToPx, vhToRem, vhToEm, @@ -44,6 +48,7 @@ import { vhToPc, vhToCm, vhToMm, + vhToPercentage, ptToPx, ptToRem, ptToEm, @@ -53,6 +58,7 @@ import { ptToPc, ptToCm, ptToMm, + ptToPercentage, inToPx, inToRem, inToEm, @@ -62,6 +68,7 @@ import { inToPc, inToCm, inToMm, + inToPercentage, pcToPx, pcToRem, pcToEm, @@ -71,6 +78,7 @@ import { pcToIn, pcToCm, pcToMm, + pcToPercentage, cmToPx, cmToRem, cmToEm, @@ -80,6 +88,7 @@ import { cmToIn, cmToPc, cmToMm, + cmToPercentage, mmToPx, mmToRem, mmToEm, @@ -89,6 +98,17 @@ import { mmToIn, mmToPc, mmToCm, + mmToPercentage, + percentageToPx, + percentageToRem, + percentageToEm, + percentageToVw, + percentageToVh, + percentageToPt, + percentageToIn, + percentageToPc, + percentageToCm, + percentageToMm, } from '../src/converters'; describe('pxToRem', () => { @@ -198,6 +218,20 @@ describe('pxToMm', () => { }); }); +describe('pxToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(pxToPercentage(10, mockBase)).toBe(1); + expect(pxToPercentage(500, mockBase)).toBe(50); + + expect(pxToPercentage(0, mockBase)).toBe(0); + + expect(pxToPercentage(-10, mockBase)).toBe(-1); + expect(pxToPercentage(10, -mockBase)).toBe(-1); + }); +}); + describe('remToPx', () => { test('should convert correctly', () => { expect(remToPx(1)).toBe(16); @@ -316,6 +350,19 @@ describe('remToMm', () => { }); }); +describe('remToPercentage', () => { + test('should convert correctly', () => { + expect(remToPercentage(1, 16, 1000)).toBe(1.6); + expect(remToPercentage(15, 16, 1000)).toBe(24); + + expect(remToPercentage(0, 16, 1000)).toBe(0); + + expect(remToPercentage(-1, 16, 1000)).toBe(-1.6); + expect(remToPercentage(1, -16, 1000)).toBe(-1.6); + expect(remToPercentage(1, 16, -1000)).toBe(-1.6); + }); +}); + describe('emToPx', () => { test('should convert correctly', () => { expect(emToPx(1)).toBe(16); @@ -434,6 +481,19 @@ describe('emToMm', () => { }); }); +describe('emToPercentage', () => { + test('should convert correctly', () => { + expect(emToPercentage(1, 16, 1000)).toBe(1.6); + expect(emToPercentage(15, 16, 1000)).toBe(24); + + expect(emToPercentage(0, 16, 1000)).toBe(0); + + expect(emToPercentage(-1, 16, 1000)).toBe(-1.6); + expect(emToPercentage(1, -16, 1000)).toBe(-1.6); + expect(emToPercentage(1, 16, -1000)).toBe(-1.6); + }); +}); + describe('vwToPx', () => { test('should convert correctly', () => { expect(vwToPx(1, 1920)).toBe(19.2); @@ -556,6 +616,20 @@ describe('vwToMm', () => { }); }); +describe('vwToPercentage', () => { + test('should convert correctly', () => { + expect(vwToPercentage(1, 1920, 1000)).toBe(1.92); + expect(vwToPercentage(50, 1920, 1000)).toBe(96); + expect(vwToPercentage(100, 1920, 1000)).toBe(192); + + expect(vwToPercentage(0, 1920, 1000)).toBe(0); + + expect(vwToPercentage(-1, 1920, 1000)).toBe(-1.92); + expect(vwToPercentage(1, -1920, 1000)).toBe(-1.92); + expect(vwToPercentage(1, 1920, -1000)).toBe(-1.92); + }); +}); + describe('vhToPx', () => { test('should convert correctly', () => { expect(vhToPx(1, 1000)).toBe(10); @@ -678,6 +752,20 @@ describe('vhToMm', () => { }); }); +describe('vhToPercentage', () => { + test('should convert correctly', () => { + expect(vhToPercentage(10, 1080, 1000)).toBe(10.8); + expect(vhToPercentage(125, 1080, 1000)).toBe(135); + expect(vhToPercentage(50, 1000, 1000)).toBe(50); + + expect(vhToPercentage(0, 1080, 1000)).toBe(0); + + expect(vhToPercentage(-10, 1080, 1000)).toBe(-10.8); + expect(vhToPercentage(10, -1080, 1000)).toBe(-10.8); + expect(vhToPercentage(10, 1080, -1000)).toBe(-10.8); + }); +}); + describe('ptToPx', () => { test('should convert correctly', () => { expect(ptToPx(9)).toBe(12); @@ -785,6 +873,20 @@ describe('ptToMm', () => { }); }); +describe('ptToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(ptToPercentage(10, mockBase)).toBe(1.333); + expect(ptToPercentage(500, mockBase)).toBe(66.667); + + expect(ptToPercentage(0, mockBase)).toBe(0); + + expect(ptToPercentage(-10, mockBase)).toBe(-1.333); + expect(ptToPercentage(10, -mockBase)).toBe(-1.333); + }); +}); + describe('inToPx', () => { test('should convert correctly', () => { expect(inToPx(1)).toBe(96); @@ -894,6 +996,20 @@ describe('inToMm', () => { }); }); +describe('inToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(inToPercentage(1, mockBase)).toBe(9.6); + expect(inToPercentage(12, mockBase)).toBe(115.2); + + expect(inToPercentage(0, mockBase)).toBe(0); + + expect(inToPercentage(-1, mockBase)).toBe(-9.6); + expect(inToPercentage(1, -mockBase)).toBe(-9.6); + }); +}); + describe('pcToPx', () => { test('should convert correctly', () => { expect(pcToPx(1)).toBe(16); @@ -1001,6 +1117,20 @@ describe('pcToMm', () => { }); }); +describe('pcToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(pcToPercentage(6, mockBase)).toBe(9.6); + expect(pcToPercentage(10, mockBase)).toBe(16); + + expect(pcToPercentage(0, mockBase)).toBe(0); + + expect(pcToPercentage(-6, mockBase)).toBe(-9.6); + expect(pcToPercentage(6, -mockBase)).toBe(-9.6); + }); +}); + describe('cmToPx', () => { test('should convert correctly', () => { expect(cmToPx(1)).toBe(37.795); @@ -1108,6 +1238,20 @@ describe('cmToMm', () => { }); }); +describe('cmToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(cmToPercentage(2, mockBase)).toBe(7.559); + expect(cmToPercentage(4, mockBase)).toBe(15.118); + + expect(cmToPercentage(0, mockBase)).toBe(0); + + expect(cmToPercentage(-2, mockBase)).toBe(-7.559); + expect(cmToPercentage(2, -mockBase)).toBe(-7.559); + }); +}); + describe('mmToPx', () => { test('should convert correctly', () => { expect(mmToPx(1)).toBe(3.78); @@ -1214,3 +1358,143 @@ describe('mmToCm', () => { expect(mmToCm(-2)).toBe(-0.2); }); }); + +describe('mmToPercentage', () => { + const mockBase = 1000; + + test('should convert correctly', () => { + expect(mmToPercentage(2, mockBase)).toBe(0.756); + expect(mmToPercentage(4, mockBase)).toBe(1.512); + + expect(mmToPercentage(0, mockBase)).toBe(0); + + expect(mmToPercentage(-2, mockBase)).toBe(-0.756); + expect(mmToPercentage(2, -mockBase)).toBe(-0.756); + }); +}); + +describe('percentageToPx', () => { + test('should convert correctly', () => { + expect(percentageToPx(10, 1000)).toBe(100); + expect(percentageToPx(100, 1000)).toBe(1000); + + expect(percentageToPx(0, 1000)).toBe(0); + + expect(percentageToPx(-10, 1000)).toBe(-100); + expect(percentageToPx(10, -1000)).toBe(-100); + }); +}); + +describe('percentageToRem', () => { + test('should convert correctly', () => { + expect(percentageToRem(10, 1000)).toBe(6.25); + expect(percentageToRem(100, 1000, 8)).toBe(125); + + expect(percentageToRem(0, 1000)).toBe(0); + + expect(percentageToRem(-10, 1000)).toBe(-6.25); + expect(percentageToRem(10, -1000)).toBe(-6.25); + expect(percentageToRem(10, 1000, -16)).toBe(-6.25); + }); +}); + +describe('percentageToEm', () => { + test('should convert correctly', () => { + expect(percentageToEm(10, 1000)).toBe(6.25); + expect(percentageToEm(100, 1000, 8)).toBe(125); + + expect(percentageToEm(0, 1000)).toBe(0); + + expect(percentageToEm(-10, 1000)).toBe(-6.25); + expect(percentageToEm(10, -1000)).toBe(-6.25); + expect(percentageToEm(10, 1000, -16)).toBe(-6.25); + }); +}); + +describe('percentageToVw', () => { + test('should convert correctly', () => { + expect(percentageToVw(1, 1000, 1920)).toBe(0.521); + expect(percentageToVw(50, 1000, 1920)).toBe(26.042); + expect(percentageToVw(100, 1000, 1920)).toBe(52.083); + + expect(percentageToVw(0, 1000, 1920)).toBe(0); + + expect(percentageToVw(-1, 1000, 1920)).toBe(-0.521); + expect(percentageToVw(1, -1000, 1920)).toBe(-0.521); + expect(percentageToVw(1, 1000, -1920)).toBe(-0.521); + }); +}); + +describe('percentageToVh', () => { + test('should convert correctly', () => { + expect(percentageToVh(1, 1000, 1080)).toBe(0.926); + expect(percentageToVh(50, 1000, 1080)).toBe(46.296); + expect(percentageToVh(100, 1000, 1080)).toBe(92.593); + + expect(percentageToVh(0, 1000, 1080)).toBe(0); + + expect(percentageToVh(-1, 1000, 1080)).toBe(-0.926); + expect(percentageToVh(1, -1000, 1080)).toBe(-0.926); + expect(percentageToVh(1, 1000, -1080)).toBe(-0.926); + }); +}); + +describe('percentageToPt', () => { + test('should convert correctly', () => { + expect(percentageToPt(10, 1000)).toBe(75); + expect(percentageToPt(50, 1000)).toBe(375); + + expect(percentageToPt(0, 1000)).toBe(0); + + expect(percentageToPt(-10, 1000)).toBe(-75); + expect(percentageToPt(10, -1000)).toBe(-75); + }); +}); + +describe('percentageToIn', () => { + test('should convert correctly', () => { + expect(percentageToIn(10, 1000)).toBe(1.042); + expect(percentageToIn(50, 1000)).toBe(5.208); + + expect(percentageToIn(0, 1000)).toBe(0); + + expect(percentageToIn(-10, 1000)).toBe(-1.042); + expect(percentageToIn(10, -1000)).toBe(-1.042); + }); +}); + +describe('percentageToPc', () => { + test('should convert correctly', () => { + expect(percentageToPc(10, 1000)).toBe(6.25); + expect(percentageToPc(50, 1000)).toBe(31.25); + + expect(percentageToPc(0, 1000)).toBe(0); + + expect(percentageToPc(-10, 1000)).toBe(-6.25); + expect(percentageToPc(10, -1000)).toBe(-6.25); + }); +}); + +describe('percentageToCm', () => { + test('should convert correctly', () => { + expect(percentageToCm(10, 1000)).toBe(2.646); + expect(percentageToCm(50, 1000)).toBe(13.229); + + expect(percentageToCm(0, 1000)).toBe(0); + + expect(percentageToCm(-10, 1000)).toBe(-2.646); + expect(percentageToCm(10, -1000)).toBe(-2.646); + }); +}); + +describe('percentageToMm', () => { + test('should convert correctly', () => { + expect(percentageToMm(10, 1000)).toBe(26.458); + expect(percentageToMm(50, 1000)).toBe(132.292); + + expect(percentageToMm(0, 1000)).toBe(0); + + expect(percentageToMm(-10, 1000)).toBe(-26.458); + expect(percentageToMm(10, -1000)).toBe(-26.458); + }); +}); From c06387eada2e8f53b25dbd10385ea0ee656b079f Mon Sep 17 00:00:00 2001 From: Arthur Arakelyan Date: Sun, 23 Jun 2024 15:19:43 +0300 Subject: [PATCH 4/4] feat: Added documentation for percentage(%) unit converters --- README.md | 204 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 112 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index aba5d63..0e8835c 100644 --- a/README.md +++ b/README.md @@ -59,98 +59,118 @@ pxToVw(23, 1920, { fraction: false }); // => 1.1979166666666667 ## Converters -| Converter | Arguments | -|-----------|-----------------------------------| -| pxToRem | px, remSize | -| pxToEm | px, emSize | -| pxToVw | px, viewportWidth | -| pxToVh | px, viewportHeight | -| pxToPt | px | -| pxToIn | px | -| pxToPc | px | -| pxToCm | px | -| pxToMm | px | -| remToPx | rem, remSize | -| remToEm | rem, remSize, emSize | -| remToVw | rem, remSize, viewportWidth | -| remToVh | rem, remSize, viewportHeight | -| remToPt | rem, remSize | -| remToIn | rem, remSize | -| remToPc | rem, remSize | -| remToCm | rem, remSize | -| remToMm | rem, remSize | -| emToPx | em, emSize | -| emToRem | em, emSize, remSize | -| emToVw | em, emSize, viewportWidth | -| emToVh | em, emSize, viewportHeight | -| emToPt | em, emSize | -| emToIn | em, emSize | -| emToPc | em, emSize | -| emToCm | em, emSize | -| emToMm | em, emSize | -| vwToPx | vw, viewportWidth | -| vwToRem | vw, viewportWidth, remSize | -| vwToEm | vw, viewportWidth, emSize | -| vwToVh | vw, viewportWidth, viewportHeight | -| vwToPt | vw, viewportWidth | -| vwToIn | vw, viewportWidth | -| vwToPc | vw, viewportWidth | -| vwToCm | vw, viewportWidth | -| vwToMm | vw, viewportWidth | -| vhToPx | vh, viewportHeight | -| vhToRem | vh, viewportHeight, remSize | -| vhToEm | vh, viewportHeight, emSize | -| vhToVw | vh, viewportHeight, viewportWidth | -| vhToPt | vh, viewportHeight | -| vhToIn | vh, viewportHeight | -| vhToPc | vh, viewportHeight | -| vhToCm | vh, viewportHeight | -| vhToMm | vh, viewportHeight | -| ptToPx | pt | -| ptToRem | pt, remSize | -| ptToEm | pt, emSize | -| ptToVw | pt, viewportWidth | -| ptToVh | pt, viewportHeight | -| ptToIn | pt | -| ptToPc | pt | -| ptToCm | pt | -| ptToMm | pt | -| inToPx | inch | -| inToRem | inch, remSize | -| inToEm | inch, emSize | -| inToVw | inch, viewportWidth | -| inToVh | inch, viewportHeight | -| inToPt | inch | -| inToPc | inch | -| inToCm | inch | -| inToMm | inch | -| pcToPx | pc | -| pcToRem | pc, remSize | -| pcToEm | pc, emSize | -| pcToVw | pc, viewportWidth | -| pcToVh | pc, viewportHeight | -| pcToPt | pc | -| pcToIn | pc | -| pcToCm | pc | -| pcToMm | pc | -| cmToPx | cm | -| cmToRem | cm, remSize | -| cmToEm | cm, emSize | -| cmToVw | cm, viewportWidth | -| cmToVh | cm, viewportHeight | -| cmToPt | cm | -| cmToIn | cm | -| cmToPc | cm | -| cmToMm | cm | -| mmToPx | mm | -| mmToRem | mm, remSize | -| mmToEm | mm, emSize | -| mmToVw | mm, viewportWidth | -| mmToVh | mm, viewportHeight | -| mmToPt | mm | -| mmToIn | mm | -| mmToPc | mm | -| mmToCm | mm | +| Converter | Arguments | +|-----------------|-----------------------------------| +| pxToRem | px, remSize | +| pxToEm | px, emSize | +| pxToVw | px, viewportWidth | +| pxToVh | px, viewportHeight | +| pxToPt | px | +| pxToIn | px | +| pxToPc | px | +| pxToCm | px | +| pxToMm | px | +| pxToPercentage | px, base | +| remToPx | rem, remSize | +| remToEm | rem, remSize, emSize | +| remToVw | rem, remSize, viewportWidth | +| remToVh | rem, remSize, viewportHeight | +| remToPt | rem, remSize | +| remToIn | rem, remSize | +| remToPc | rem, remSize | +| remToCm | rem, remSize | +| remToMm | rem, remSize | +| remToPercentage | rem, remSize, base | +| emToPx | em, emSize | +| emToRem | em, emSize, remSize | +| emToVw | em, emSize, viewportWidth | +| emToVh | em, emSize, viewportHeight | +| emToPt | em, emSize | +| emToIn | em, emSize | +| emToPc | em, emSize | +| emToCm | em, emSize | +| emToMm | em, emSize | +| emToPercentage | em, emSize, base | +| vwToPx | vw, viewportWidth | +| vwToRem | vw, viewportWidth, remSize | +| vwToEm | vw, viewportWidth, emSize | +| vwToVh | vw, viewportWidth, viewportHeight | +| vwToPt | vw, viewportWidth | +| vwToIn | vw, viewportWidth | +| vwToPc | vw, viewportWidth | +| vwToCm | vw, viewportWidth | +| vwToMm | vw, viewportWidth | +| vwToPercentage | vw, viewportWidth, base | +| vhToPx | vh, viewportHeight | +| vhToRem | vh, viewportHeight, remSize | +| vhToEm | vh, viewportHeight, emSize | +| vhToVw | vh, viewportHeight, viewportWidth | +| vhToPt | vh, viewportHeight | +| vhToIn | vh, viewportHeight | +| vhToPc | vh, viewportHeight | +| vhToCm | vh, viewportHeight | +| vhToMm | vh, viewportHeight | +| vhToPercentage | vh, viewportHeight, base | +| ptToPx | pt | +| ptToRem | pt, remSize | +| ptToEm | pt, emSize | +| ptToVw | pt, viewportWidth | +| ptToVh | pt, viewportHeight | +| ptToIn | pt | +| ptToPc | pt | +| ptToCm | pt | +| ptToMm | pt | +| ptToPercentage | pt, base | +| inToPx | inch | +| inToRem | inch, remSize | +| inToEm | inch, emSize | +| inToVw | inch, viewportWidth | +| inToVh | inch, viewportHeight | +| inToPt | inch | +| inToPc | inch | +| inToCm | inch | +| inToMm | inch | +| inToPercentage | inch, base | +| pcToPx | pc | +| pcToRem | pc, remSize | +| pcToEm | pc, emSize | +| pcToVw | pc, viewportWidth | +| pcToVh | pc, viewportHeight | +| pcToPt | pc | +| pcToIn | pc | +| pcToCm | pc | +| pcToMm | pc | +| pcToPercentage | pc, base | +| cmToPx | cm | +| cmToRem | cm, remSize | +| cmToEm | cm, emSize | +| cmToVw | cm, viewportWidth | +| cmToVh | cm, viewportHeight | +| cmToPt | cm | +| cmToIn | cm | +| cmToPc | cm | +| cmToMm | cm | +| cmToPercentage | cm, base | +| mmToPx | mm | +| mmToRem | mm, remSize | +| mmToEm | mm, emSize | +| mmToVw | mm, viewportWidth | +| mmToVh | mm, viewportHeight | +| mmToPt | mm | +| mmToIn | mm | +| mmToPc | mm | +| mmToCm | mm | +| mmToPercentage | mm, base | +| percentageToPx | percent, base | +| percentageToRem | percent, base, remSize | +| percentageToEm | percent, base, emSize | +| percentageToVw | percent, base, viewportWidth | +| percentageToVh | percent, base, viewportHeight | +| percentageToPt | percent, base | +| percentageToIn | percent, base | +| percentageToPc | percent, base | +| percentageToCm | percent, base | +| percentageToMm | percent, base | ## Communities