-
Notifications
You must be signed in to change notification settings - Fork 397
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added vice versa in Percentage to Fraction Calculator (#579)
- Loading branch information
1 parent
9e6d47e
commit 5cd8fdd
Showing
10 changed files
with
285 additions
and
182 deletions.
There are no files selected for viewing
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 :- | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
197 changes: 111 additions & 86 deletions
197
...rcentage-To-Fraction-Calculator/style.css → .../Percentage-Fraction-Calculator/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file was deleted.
Oops, something went wrong.
Binary file not shown.
Oops, something went wrong.