I used the math.js library to be able to create a calculator which converts any number from radian to degree or vice versa. The calculations work perfectly, but the problem comes when trying to display the result from degrees to radians. For exampple, If I place 360 degrees to calculate to radians it returns 6.28, instead of 2π. From radians to degrees it displays the result perfectly because it doesn't need to give me the result in fraction form plus a pi sign. Is there a way to convert my answer into fraction form and add the pi sign to it ?
my Html :
<section id="Radian/Deegree_Converter">
<h3 id="Radian/DegreeTitle">Radian-Degree Converter</h3>
<input type="text" placeholder="Number" id="placeDegRadNumber">
<span>=</span>
<input type="text" placeholder="Result" id="displayDegRadResult">
<select id="assignDegRadUnit">
<option value="choseDegrees">Degrees</option>
<option value="choseRadians">Radians</option>
</select>
<select id="convertToDegRadUnit">
<option value="choseDegrees">Degrees</option>
<option value="choseRadians">Radians</option>
</select>
<button id="piButton">π</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.1.0/math.min.js"></script>
</section>
my Javascript :
//RadianDegree Converter---------------------------------------------------------------------------------------
const numberInput = document.getElementById('placeDegRadNumber');
const resultInput = document.getElementById('displayDegRadResult');
const assignUnitSelect = document.getElementById('assignDegRadUnit');
const convertToUnitSelect = document.getElementById('convertToDegRadUnit');
const piButton = document.getElementById('piButton');
piButton.addEventListener('click', function () {
numberInput.value += 'π';
convertUnits(); // Trigger conversion when π is added
});
numberInput.addEventListener('input', convertUnits);
assignUnitSelect.addEventListener('change', convertUnits);
convertToUnitSelect.addEventListener('change', convertUnits);
function convertUnits() {
const inputValue = math.evaluate(numberInput.value.replace(/π/g, 'pi')) || 0;
const assignUnit = assignUnitSelect.value;
const convertToUnit = convertToUnitSelect.value;
let result;
if (assignUnit === 'choseDegrees' && convertToUnit === 'choseRadians') {
result = math.format(math.unit(inputValue, 'deg').to('rad'), { fraction: 'ratio' });
} else if (assignUnit === 'choseRadians' && convertToUnit === 'choseDegrees') {
result = math.format(math.unit(inputValue, 'rad').to('deg'), { fraction: 'ratio' });
} else {
result = inputValue;
}
// Remove the unit label from the result and update the input field
resultInput.value = Number(result.replace(/[^\d.-]/g, '')).toFixed(2);
}
I tried adding a string with the π sign to be added when displaying the result in a fraction form, but it didnt work
Referring to the solution provided here
var gcd = function(a, b) {
// Since there is a limited precision we need to limit the value.
if (b < 0.0000001) return a;
// Discard any fractions due to limitations in precision.
return gcd(b, Math.floor(a % b));
};
function getFractionValue (fraction) {
var len = fraction.toString().length - 2;
var denominator = Math.pow(10, len);
var numerator = fraction * denominator;
var divisor = gcd(numerator, denominator); // Should be 5
numerator /= divisor; // Should be 687
denominator /= divisor; // Should be 2000
return (Math.floor(numerator) + '/' + Math.floor(denominator));
}
// Remove the unit label from the result and update the input field
if (convertToUnit === 'choseRadians') {
radians = Number(result.replace(/[^\d.-]/g, '')).toFixed(2);
decimalRadians = radians/Math.PI;
fractionValue = getFractionValue(decimalRadians);
resultInput.value = fractionValue + 'π';
} else {
resultInput.value = Number(result.replace(/[^\d.-]/g, '')).toFixed(2);
}