Rakesh9100 · Rakesh9100 · Feb 11, 2024 · Feb 11, 2024 · Feb 11, 2024 · Feb 11, 2024
diff --git a/...I-percent-sign-calculator-red-symbols.jpg → ...I-percent-sign-calculator-red-symbols.jpg b/...I-percent-sign-calculator-red-symbols.jpg → ...I-percent-sign-calculator-red-symbols.jpg
diff --git a/Calculators/Percentage-Fraction-Calculator/Readme.md b/Calculators/Percentage-Fraction-Calculator/Readme.md
@@ -0,0 +1,19 @@
+# <p align="center">Percentage Fraction Calculator</div>
+
+ This is a simple online calculator which converts Percent to a Fraction and vice-versa.
+
+## Features :-
+
+- Converts Percent to Fraction or Fraction to Percent.
+- It also provide detail solution.
+- You can reset the calculation to starting.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/3e9341d1-25c4-426e-b615-6f7ccaed2baa)
diff --git a/Calculators/Percentage-Fraction-Calculator/index.html b/Calculators/Percentage-Fraction-Calculator/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>Percentage Fraction Calculator</title>
+</head>
+
+<body>
+
+  <div class="calculator">
+    <h1>Percentage Fraction Calculator</h1>
+
+    <!-- Percentage input section -->
+    <div class="inp">
+      <label for="percentInput">Enter a Percentage:</label>
+      <input type="text" id="percentInput" placeholder="Enter percent">
+      <button onclick="convertPercentToFraction()">Convert to Fraction</button>
+    </div>
+
+    <!-- Fraction input section -->
+    <div class="inp">
+      <label for="fractionInput">Enter a Fraction:</label>
+      <input type="text" id="fractionInput" placeholder="Enter fraction (e.g., 3/4)">
+      <button onclick="convertFractionToPercent()">Convert to Percentage</button>
+    </div>
+
+    <!-- Result display -->
+    <div id="result">
+      <p class="answer">Answer:</p>
+      <p class="resultValue" id="resultValue"></p>
+      <p class="showingWorkText">Showing Work:</p>
+      <p class="showingWork" id="showingWork"></p>
+    </div>
+
+    <!-- Clear button -->
+    <button id="clearButton" onclick="clearInputs()">Clear</button>
+  </div>
+
+  <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Calculators/Percentage-Fraction-Calculator/script.js b/Calculators/Percentage-Fraction-Calculator/script.js
@@ -0,0 +1,105 @@
+window.convertPercentToFraction = function () {
+    var percentInput = document.getElementById('percentInput').value;
+
+    // Check if the input is empty or not a valid number
+    if (percentInput.trim() === '' || isNaN(percentInput)) {
+        alert('Please enter a valid number.');
+        return;
+    }
+
+    // Convert percent to fraction
+    var decimalValue = parseFloat(percentInput) / 100;
+    var fraction = decimalToFraction(decimalValue);
+
+    // Display the result
+    document.getElementById('resultValue').innerText = '= ' + fraction.numerator + '/' + fraction.denominator;
+    document.getElementById('showingWork').innerText =
+        percentInput + '% = ' + percentInput + '/100 = ' + decimalValue + ' = ' + fraction.numerator + '/' + fraction.denominator;
+};
+
+window.convertFractionToPercent = function () {
+    var fractionInput = document.getElementById('fractionInput').value;
+
+    // Check if the input is empty or not a valid fraction
+    if (fractionInput.trim() === '' || !isValidFraction(fractionInput)) {
+        alert('Please enter a valid fraction.');
+        return;
+    }
+
+    // Split fraction into numerator and denominator
+    var parts = fractionInput.split('/');
+    var numerator = parseInt(parts[0]);
+    var denominator = parseInt(parts[1]);
+
+    // Check if denominator is zero
+    if (denominator === 0) {
+        alert('Denominator cannot be zero. Please enter a valid fraction.');
+        return;
+    }
+
+    // Calculate percentage
+    var percent = (numerator / denominator) * 100;
+
+    // Simplify fraction
+    var gcd = findGCD(numerator, denominator);
+    var simplifiedNumerator = numerator / gcd;
+    var simplifiedDenominator = denominator / gcd;
+
+    // Display the result
+    document.getElementById('resultValue').innerText = '= ' + percent.toFixed(2) + '%';
+
+    // Showing work steps
+    var workSteps = fractionInput + ' = (' + numerator + '/' + denominator + ') * 100';
+    workSteps += ' = ' + percent.toFixed(2) + '%';
+
+    // Display the work steps
+    document.getElementById('showingWork').innerText = workSteps;
+};
+
+// Function to find the greatest common divisor (GCD) of two numbers
+function findGCD(a, b) {
+    return b === 0 ? a : findGCD(b, a % b);
+}
+
+
+window.clearInputs = function () {
+    document.getElementById('percentInput').value = '';
+    document.getElementById('fractionInput').value = '';
+    document.getElementById('resultValue').innerText = '';
+    document.getElementById('showingWork').innerText = '';
+};
+
+// Function to convert decimal to fraction
+function decimalToFraction(decimalValue) {
+    const tolerance = 1.0e-9;
+
+    for (var denominator = 1; ; ++denominator) {
+        var numerator = Math.round(decimalValue * denominator);
+
+        if (Math.abs(decimalValue - numerator / denominator) < tolerance) {
+            return {
+                numerator: numerator,
+                denominator: denominator,
+            };
+        }
+    }
+}
+
+// Function to check if the input is a valid fraction
+function isValidFraction(input) {
+    return /^-?\d+\/\d+$/.test(input);
+}
+
+// Function to convert fraction to percent
+function fractionToPercent(fraction) {
+    var parts = fraction.split('/');
+    var numerator = parseInt(parts[0]);
+    var denominator = parseInt(parts[1]);
+
+    // Check if denominator is zero
+    if (denominator === 0) {
+        return NaN; // Return NaN to indicate invalid input
+    }
+
+    return (numerator / denominator) * 100;
+}
diff --git a/...rcentage-To-Fraction-Calculator/style.css → .../Percentage-Fraction-Calculator/style.css b/...rcentage-To-Fraction-Calculator/style.css → .../Percentage-Fraction-Calculator/style.css
@@ -1,86 +1,111 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Body styles with background image */
-body {
-    font-family: 'Arial', sans-serif;
-    background: url('DTI-percent-sign-calculator-red-symbols.jpg') center/cover fixed;
-    /* Add your background image URL here */
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-/* Calculator styles */
-.calculator {
-    width: 100%;
-    max-width: 500px;
-    padding: 20px;
-    background-color: rgba(146, 206, 229, 0.8);
-    /* Semi-transparent white background */
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    text-align: center;
-}
-
-h1 {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-label {
-    display: block;
-    margin-bottom: 5px;
-}
-
-input[type="text"] {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    font-size: 16px;
-    color: #555;
-}
-
-button {
-    cursor: pointer;
-    padding: 10px 20px;
-    background-color: #337ab7;
-    color: #fff;
-    border: 1px solid #337ab7;
-    margin-right: 10px;
-    transition: background-color 0.3s ease;
-    /* Smooth transition on hover */
-}
-
-button:hover {
-    background-color: #49c36a;
-    /* Change both Convert and Clear hover color to red */
-}
-
-#result {
-    margin-top: 20px;
-    padding: 20px;
-    background-color: #fff;
-}
-
-.answer {
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.fraction {
-    font-size: 1.5rem;
-}
-
-.showingWork {
-    font-style: italic;
-    margin-top: 12px;
-    margin-bottom: 15px;
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body styles with background image */
+body {
+    font-family: 'Arial', sans-serif;
+    background: url('DTI-percent-sign-calculator-red-symbols.jpg') center/cover fixed;
+    /* Add your background image URL here */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+/* Calculator styles */
+.calculator {
+    width: 100%;
+    max-width: 500px;
+    padding: 20px;
+    background-color: rgba(146, 206, 229, 0.8);
+    /* Semi-transparent white background */
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.inp {
+    margin-top: 20px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    font-size: 16px;
+    color: #555;
+}
+
+button {
+    cursor: pointer;
+    padding: 10px 20px;
+    background-color: #337ab7;
+    color: #fff;
+    border: 1px solid #337ab7;
+    margin-right: 10px;
+    transition: background-color 0.3s ease;
+    /* Smooth transition on hover */
+}
+
+button:hover {
+    background-color: #49c36a;
+    /* Change both Convert and Clear hover color to red */
+}
+
+#clearButton {
+    margin-top: 10px;
+}
+
+#result {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #fff;
+}
+
+.answer {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.fraction {
+    font-size: 1.5rem;
+}
+
+.showingWork {
+    font-style: italic;
+    margin-top: 12px;
+    margin-bottom: 15px;
+}
+
+.showingWorkText {
+    font-style: italic;
+    margin-top: 12px;
+    margin-bottom: 15px;
+}
+
+#percentResult {
+    font-weight: bold;
+    margin-top: 30px;
+}
+
+#workStepsFraction {
+    font-style: italic;
+    margin-top: 15px;
+    margin-bottom: 20px;
+}
diff --git a/Calculators/Percentage-To-Fraction-Calculator/Readme.md b/Calculators/Percentage-To-Fraction-Calculator/Readme.md
diff --git a/Calculators/Percentage-To-Fraction-Calculator/image.png b/Calculators/Percentage-To-Fraction-Calculator/image.png