Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added more functionality in Fraction Calculator #1776

Merged
merged 5 commits into from
Aug 10, 2024
Merged

Added more functionality in Fraction Calculator #1776

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7f8c7b
Updated Fraction-Calculation
Dark-S8uL Aug 3, 2024
a3d0084
Update style.css
Rakesh9100 Aug 10, 2024
01219ed
Update script.js
Rakesh9100 Aug 10, 2024
5645240
Update index.html
Rakesh9100 Aug 10, 2024
3c6339e
Update README.md
Rakesh9100 Aug 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 13 additions & 18 deletions Calculators/Fraction-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,23 @@
# <p align="center">Fraction Calculator</p>
# Fraction Calculator
## Description

## Description :-
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.

The Operational Fraction Calculator is a web-based tool that enables users to perform basic arithmetic operations (addition, subtraction, multiplication, and division) on fractions.

## Tech Stacks :-
## Tech Stacks

- HTML
- CSS
- JavaScript

## Screenshots :-

### Outlook
![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/21474ab2-77ac-4bbd-bb6a-92a3d4af7daf)

### Sample Output 1
![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/4dc44163-55a7-4816-b63d-471512e83f08)
## Features

### Sample Output 2
![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/b76d5303-a526-4338-9e6f-33dbaf54a051)
- 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.

### Sample Output 3
![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/508f8314-1356-417a-91c9-60af5070ef61)
## Usage

### Sample Output 4
![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/16ac9459-6f8b-4057-96fc-0887af7f5050)
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.
111 changes: 74 additions & 37 deletions Calculators/Fraction-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Fraction Calculator</title>
</head>
<body>
</head>
<body>
<div id="calculator-container">
<div class="calculator-card">
<h2>Fraction Calculator</h2>
<p>Perform basic arithmetic operations on fractions.</p>
<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">
</div>
<center>
<select name="Op" tabindex="3" class="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</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">
</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">
</div>
</div>
</form>
</div>
<div class="calculator-card">
<h2>Fraction Calculator</h2>
<p>Perform basic arithmetic operations on fractions.</p>
<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" />
</div>
<center>
<select name="Op" tabindex="3" class="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</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" />
</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" />
</div>
<div class="fraction">
<input
type="text"
name="decimalResult"
id="decimalResult"
readonly
placeholder="Decimal Result" />
</div>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</body>
</html>
118 changes: 68 additions & 50 deletions Calculators/Fraction-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,83 @@
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 !== '') {
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!');
return;
}
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 enter only numbers into the fields!');
return;
alert("Please fill in all fields!");
return;
}
} else {
alert("Please enter only numbers into the fields!");
return;
}

switch (Op) {
case '+':
An = (n1 * d2) + (n2 * d1);
Ad = (d1 * d2);
break;
case '-':
An = (n1 * d2) - (n2 * d1);
Ad = (d1 * d2);
break;
case '*':
An = n1 * n2;
Ad = d1 * d2;
break;
case '/':
An = n1 * d2;
Ad = d1 * n2;
break;
default:
alert('Unknown operator');
return;
}
switch (Op) {
case "+":
An = n1 * d2 + n2 * d1;
Ad = d1 * d2;
break;
case "-":
An = n1 * d2 - n2 * d1;
Ad = d1 * d2;
break;
case "*":
An = n1 * n2;
Ad = d1 * d2;
break;
case "/":
An = n1 * d2;
Ad = d1 * n2;
break;
default:
alert("Unknown operator");
return;
}

// Reduce the fraction
reduce();

// Reduce the fraction
reduce();
// Calculate the decimal result
decimalResult = An / Ad;

display();
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 commonFactor = gcd(An, Ad);
An = (An / commonFactor) * neg;
Ad = Ad / commonFactor;
neg = An < 0 ? -1 : 1;
An = Math.abs(An);
Ad = Math.abs(Ad);
let gcd = (a, b) => (b ? gcd(b, a % b) : a);
let commonFactor = gcd(An, Ad);
An = (An / commonFactor) * neg;
Ad = Ad / commonFactor;
}

function display() {
document.calc.An.value = An;
document.calc.Ad.value = Ad;
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.");
}
}
Loading