Created
March 25, 2022 15:26
-
-
Save stevenslack/cb9382bb1f5b2e85a299ae2ac5c1d83b to your computer and use it in GitHub Desktop.
Calculate the height for a specific width and aspect ratio with JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Calculate the height for a specific width and aspect ratio. | |
* | |
* @param {Number} width The width used to generate a height for the aspect ratio. | |
* @param {string} aspectRatio The aspect ratio with the ':' as a delimiter. Example: '16:9'. | |
* @returns {Number} the height for the aspect ratio. | |
*/ | |
export default function calcAspectRatioHeight(width = 100, aspectRatio = '16:9') { | |
let y = String(aspectRatio); // make a copy of the aspect ratio. | |
const errorMessage = `calcAspectRatioHeight() contains an invalid aspect ratio format of "${aspectRatio}"`; | |
// If the aspect ratio is invalid use the default value of 16:9. | |
if (!y || !y.includes(':')) { | |
y = '16:9'; | |
// eslint-disable-next-line no-console | |
console.log(errorMessage); | |
} | |
// Split the string between the delimiter in order to run the aspect ratio calculation. | |
let [divisor, dividend] = y.split(':', 2); | |
// Cast the divisor and dividend as integers. | |
divisor = Number(divisor); | |
dividend = Number(dividend); | |
let quotient = dividend / divisor; | |
// Check for empty values for quotient assignment and fallback to 16:9 otherwise. | |
if ((!divisor || Number.isNaN(divisor)) || (!dividend || Number.isNaN(dividend))) { | |
quotient = 9 / 16; | |
} | |
// In the case that the quotient is invalid or not a number, use the default aspect ratio. | |
if (Number.isNaN(quotient)) { | |
// eslint-disable-next-line no-console | |
console.log(errorMessage); | |
quotient = 9 / 16; | |
} | |
// Set the width as a number and fallback to 100 as a default. | |
const x = width ? Number(width) : 100; | |
return quotient * x; | |
} | |
/** | |
* Set the following as a Jest test in an adjacent file. e.g. 'calcAspectRatioHeight.test.js' | |
* | |
* @jest-environment jsdom | |
*/ | |
// import calcAspectRatioHeight from './calcAspectRatioHeight'; | |
describe('Test function `calcAspectRatioHeight`.', () => { | |
test('Should be 56.25 if no params are passed.', () => { | |
expect(calcAspectRatioHeight()).toBe(56.25); | |
}); | |
test('Should use default 16:9 aspect ratio if only width parameter is passed.', () => { | |
expect(calcAspectRatioHeight(78)).toBe(43.875); | |
expect(calcAspectRatioHeight(100)).toBe(56.25); | |
}); | |
test('An aspect ratio should output the correct height calculation.', () => { | |
expect(calcAspectRatioHeight(100, '4:3')).toBe(75); | |
expect(calcAspectRatioHeight(100, '5:4')).toBe(80); | |
expect(calcAspectRatioHeight(100, '9:16')).toBe(177.77777777777777); | |
expect(calcAspectRatioHeight(100, '16:9')).toBe(56.25); | |
expect(calcAspectRatioHeight(100, '1:1')).toBe(100); | |
}); | |
test('Should output correct height if width is passed as a string.', () => { | |
expect(calcAspectRatioHeight('100', '16:9')).toBe(56.25); | |
}); | |
test('Should output the default 16:9 height if the aspect ratio is invalid.', () => { | |
expect(calcAspectRatioHeight(100, ':')).toBe(56.25); | |
expect(calcAspectRatioHeight(100, '')).toBe(56.25); | |
expect(calcAspectRatioHeight(100, 3495807)).toBe(56.25); | |
expect(calcAspectRatioHeight(100, '//&:ll')).toBe(56.25); | |
expect(calcAspectRatioHeight(1, '//&:luu')).toBe(0.5625); | |
expect(calcAspectRatioHeight(78, ':')).toBe(43.875); | |
expect(calcAspectRatioHeight(78, '')).toBe(43.875); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment