Added more functionality in Fraction Calculator (#1776)

Rakesh9100 · Aug 10, 2024 · a0417d6 · a0417d6
1 parent bf8bd8b
commit a0417d6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 33 deletions.
diff --git a/Calculators/Fraction-Calculator/README.md b/Calculators/Fraction-Calculator/README.md
@@ -1,19 +1,31 @@
-# <p align="center">Fraction Calculator</p>
+<p align="center">Fraction Calculator</p>
 
 ## Description :-
 
-The Operational Fraction Calculator is a web-based tool that enables users to perform basic arithmetic operations (addition, subtraction, multiplication, and division) on fractions.
+The Fraction Calculator is a web-based tool that enables users to perform basic arithmetic operations (addition, subtraction, multiplication, and division) on fractions. It also converts the resulting fraction to a decimal and checks if the result is a real number.
 
 ## Tech Stacks :-
 
 - HTML
 - CSS
 - JavaScript
 
+## Features :-
+
+- Perform arithmetic operations on fractions: addition, subtraction, multiplication, and division.
+- Convert the resulting fraction to a decimal.
+- Display whether the result is a real number or not.
+
+## Usage :-
+
+1. Enter the numerators and denominators of the two fractions.
+2. Select the arithmetic operation to be performed.
+3. Click the "=" button to compute the result.
+4. The result will be displayed as a fraction and a decimal. An alert will notify if the result is a real number or not.
+
 ## Screenshots :-
 
-### Outlook
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/21474ab2-77ac-4bbd-bb6a-92a3d4af7daf)
+![image](https://github.com/user-attachments/assets/13fada3e-c906-428a-b7ff-9fa8087185f3)
 
 ### Sample Output 1
 ![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/4dc44163-55a7-4816-b63d-471512e83f08)

diff --git a/Calculators/Fraction-Calculator/index.html b/Calculators/Fraction-Calculator/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
     <title>Fraction Calculator</title>
 </head>
 <body>
@@ -13,8 +13,8 @@ <h2>Fraction Calculator</h2>
             <form name="calc">
                 <div class="fraction-inputs">
                     <div class="fraction">
-                        <input type="text" name="n1" id="n1" placeholder="Numerator" tabindex="1">
-                        <input type="text" name="d1" id="d1" placeholder="Denominator" tabindex="2">
+                        <input type="text" name="n1" id="n1" placeholder="Numerator" tabindex="1" />
+                        <input type="text" name="d1" id="d1" placeholder="Denominator" tabindex="2" />
                     </div>
                     <center>
                         <select name="Op" tabindex="3" class="operator">
@@ -25,13 +25,16 @@ <h2>Fraction Calculator</h2>
                         </select>
                     </center>
                     <div class="fraction">
-                        <input type="text" name="n2" id="n2" placeholder="Numerator" tabindex="4">
-                        <input type="text" name="d2" id="d2" placeholder="Denominator" tabindex="5">
+                        <input type="text" name="n2" id="n2" placeholder="Numerator" tabindex="4" />
+                        <input type="text" name="d2" id="d2" placeholder="Denominator" tabindex="5" />
                     </div>
                     <button type="button" onClick="solve();" tabindex="6">=</button>
                     <div class="fraction">
-                        <input type="text" name="An" id="An" readonly placeholder="Result Numerator">
-                        <input type="text" name="Ad" id="Ad" readonly placeholder="Result Denominator">
+                        <input type="text" name="An" id="An" readonly placeholder="Result Numerator" />
+                        <input type="text" name="Ad" id="Ad" readonly placeholder="Result Denominator" />
+                    </div>
+                    <div class="fraction">
+                        <input type="text" name="decimalResult" id="decimalResult" readonly placeholder="Decimal Result" />
                     </div>
                 </div>
             </form>

diff --git a/Calculators/Fraction-Calculator/script.js b/Calculators/Fraction-Calculator/script.js
@@ -1,59 +1,69 @@
-var n1, n2, d1, d2, An, Ad, Op;
+var n1, n2, d1, d2, An, Ad, Op, decimalResult;
 var neg = 1;
 
 function solve() {
-    if (!isNaN(document.calc.n1.value) && !isNaN(document.calc.d1.value) &&
-        !isNaN(document.calc.n2.value) && !isNaN(document.calc.d2.value)) {
-        if (document.calc.n1.value !== '' && document.calc.d1.value !== '' &&
-            document.calc.n2.value !== '' && document.calc.d2.value !== '') {
+    if (
+        !isNaN(document.calc.n1.value) &&
+        !isNaN(document.calc.d1.value) &&
+        !isNaN(document.calc.n2.value) &&
+        !isNaN(document.calc.d2.value)
+    ) {
+        if (
+            document.calc.n1.value !== "" &&
+            document.calc.d1.value !== "" &&
+            document.calc.n2.value !== "" &&
+            document.calc.d2.value !== ""
+        ) {
             n1 = parseInt(document.calc.n1.value);
             d1 = parseInt(document.calc.d1.value);
             n2 = parseInt(document.calc.n2.value);
             d2 = parseInt(document.calc.d2.value);
             Op = document.calc.Op.value;
         } else {
-            alert('Please fill in all fields!');
+            alert("Please fill in all fields!");
             return;
         }
     } else {
-        alert('Please enter only numbers into the fields!');
+        alert("Please enter only numbers into the fields!");
         return;
     }
 
     switch (Op) {
-        case '+':
-            An = (n1 * d2) + (n2 * d1);
-            Ad = (d1 * d2);
+        case "+":
+            An = n1 * d2 + n2 * d1;
+            Ad = d1 * d2;
             break;
-        case '-':
-            An = (n1 * d2) - (n2 * d1);
-            Ad = (d1 * d2);
+        case "-":
+            An = n1 * d2 - n2 * d1;
+            Ad = d1 * d2;
             break;
-        case '*':
+        case "*":
             An = n1 * n2;
             Ad = d1 * d2;
             break;
-        case '/':
+        case "/":
             An = n1 * d2;
             Ad = d1 * n2;
             break;
         default:
-            alert('Unknown operator');
+            alert("Unknown operator");
             return;
     }
 
     // Reduce the fraction
     reduce();
 
+    // Calculate the decimal result
+    decimalResult = An / Ad;
+
     display();
 }
 
-// Function to reduce the fraction
 function reduce() {
     neg = An < 0 ? -1 : 1;
     An = Math.abs(An);
     Ad = Math.abs(Ad);
-    let gcd = (a, b) => b ? gcd(b, a % b) : a;
+    let gcd = (a, b) => (b ? gcd(b, a % b) : a);
     let commonFactor = gcd(An, Ad);
     An = (An / commonFactor) * neg;
     Ad = Ad / commonFactor;
@@ -62,4 +72,12 @@ function reduce() {
 function display() {
     document.calc.An.value = An;
     document.calc.Ad.value = Ad;
+    document.calc.decimalResult.value = decimalResult;
+
+    // Check if the result is a real number
+    if (!Number.isFinite(decimalResult)) {
+        alert("The result is not a real number.");
+    } else {
+        alert("The result is a real number.");
+    }
 }
diff --git a/Calculators/Fraction-Calculator/style.css b/Calculators/Fraction-Calculator/style.css
@@ -1,6 +1,6 @@
 body {
-    background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
-    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
+    font-family: "Arial", sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -139,6 +139,9 @@ button:hover {
 
 .divider {
     height: 1px;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
+    background: linear-gradient(90deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.15) 50%,
+            rgba(0, 0, 0, 0) 100%);
     margin: 20px 0;
 }