I have a form where user can add height in feet and inches(can't be greater than 12) where it can be in decimal form as well. The values are taken in feet and inches and then they are combined together to send to backend. From backend, only that height value is send so I need to decode it to ft and inches. So far it's been done this way;
submit case
const newHeight = +this.heightFt + +this.heightIn / 12;
while rendering in input field
heightFt: +getDecodedFeet(this.group.height), // this is the value that was generated while submitting(+this.heightFt + +this.heightIn/12)
heightIn: +getDecodedInch(this.group.height),
Here is how I am trying to decode ft and inch from just the height value. However, the way I am doing does not work properly. By properly, I mean if I provide value like 4.5 to heightFt and 2 for inch then while decoding I get 4.666666666666667 and 8 as inch but if I give 5 as heightFt and 0 as heightIn I can decode it to same.
const getFeet = (value = 0) => {
return value;
};
const getInch = (value = 0) => {
const inch = Math.round((value % 1) * 12);
return inch;
};
const getDecodedFeet = (value = 0) => {
return getFeet(value) - getDecodedInch(value) / 12;
};
const getDecodedInch = (value = 0) => {
return parseInt(getInch(value) - value);
};
getHeight takes height as inches and return it to you in either inches or feet and inches. setHeight takes values in feet or feet and inches and return it to you in inches.
It might seem redundant to have a function that takes values in inches and return it back it the same, but I think internalising logic like this inside the function gets rid of extra junk in code and helps standardise the format with which to work.
// value in inches and format 0 = return value in ft, in and 1 = return value in just inches
// return value is in an array of length 2 in the format [x(feet), y(inches)]
const getHeight = (value, format = 0) => {
if (format === 0) {
//in feet and inches
const heightInFeet = Math.floor(value/12);
const remainderInInches = value%12;
return [heightInFeet, remainderInInches];
}
if (format === 1) {
//in inches
return [0, value];
}
}
// accepts 2 parameters, feet (decimals are OK) and optional inches and calculates them into inches.
const setHeight = (feet, inches) => {
let value = inches ? inches : 0;
value += feet*12;
return value;
}
console.log(getHeight(setHeight(5,4)));
console.log(getHeight(setHeight(5,4), 1));
//in decimals
console.log(getHeight(setHeight(5.5,6)));
console.log(getHeight(setHeight(5.5)));
console.log(getHeight(setHeight(5.5,0.5)));
console.log(getHeight(setHeight(5.542,5.5)));
console.log(setHeight(5.5));
console.log(setHeight(5.5,0.5));