Rakesh9100 · Vipullakum007 · Jun 6, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/Calculators/Gauss-Jordan-Calculator/index.html b/Calculators/Gauss-Jordan-Calculator/index.html
@@ -0,0 +1,39 @@
+<!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" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.0.0/math.min.js"></script>
+    <title>Gauss-Jordan Elimination Calculator</title>
+</head>
+
+<body>
+    <div id="matrixCalculator">
+        <h2>Gauss-Jordan Elimination Calculator</h2>
+
+        <label for="matrixRows">Rows:</label>
+        <input type="number" id="matrixRows" value="2" min="2" max="10" onchange="createMatrixInputs()" />
+
+        <label for="matrixCols">Columns:</label>
+        <input type="number" id="matrixCols" value="3" min="2" max="10" onchange="createMatrixInputs()" />
+
+        <div id="matrixInputs">
+            <!-- Matrix input table will be generated here -->
+        </div>
+
+        <div class="buttons">
+            <button onclick="calculate()">Calculate</button>
+            <button onclick="resetForm()">Reset</button>
+        </div>
+
+        <h3>Result</h3>
+        <div id="result"></div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Gauss-Jordan-Calculator/script.js b/Calculators/Gauss-Jordan-Calculator/script.js
@@ -0,0 +1,127 @@
+document.addEventListener("DOMContentLoaded", () => {
+    createMatrixInputs();
+});
+
+function createMatrixInputs() {
+    const rows = parseInt(document.getElementById("matrixRows").value, 10);
+    const cols = parseInt(document.getElementById("matrixCols").value, 10);
+    const matrixContainer = document.getElementById("matrixInputs");
+
+    matrixContainer.innerHTML = generateMatrixInputs(rows, cols);
+}
+
+function generateMatrixInputs(rows, cols) {
+    let matrixInputs = '<div class="matrixRow"><div class="matrixCell"></div>';
+    for (let j = 1; j < cols; j++) {
+        matrixInputs += `<div class="matrixCell">X${j}</div>`;
+    }
+    matrixInputs += '<div class="matrixCell">b</div></div>';
+
+    for (let i = 0; i < rows; i++) {
+        matrixInputs += '<div class="matrixRow"><div class="matrixCell">' + (i + 1) + '</div>';
+        for (let j = 0; j < cols-1; j++) {
+            matrixInputs += `<div class="matrixCell"><input type="number" id="matrix_${i}_${j}" /></div>`;
+        }
+        matrixInputs += '<div class="matrixCell"><input type="number" id="matrix_' + i + '_b" /></div></div>';
+    }
+
+    return matrixInputs;
+}
+
+function getMatrixValues() {
+    const rows = parseInt(document.getElementById("matrixRows").value, 10);
+    const cols = parseInt(document.getElementById("matrixCols").value, 10);
+    const matrixValues = [];
+
+    for (let i = 0; i < rows; i++) {
+        matrixValues[i] = [];
+        for (let j = 0; j < cols-1; j++) {
+            const inputId = `matrix_${i}_${j}`;
+            matrixValues[i][j] = parseFloat(document.getElementById(inputId).value) || 0;
+        }
+        matrixValues[i][cols] = parseFloat(document.getElementById(`matrix_${i}_b`).value) || 0;
+    }
+
+    return matrixValues;
+}
+
+function displayResult(matrix) {
+    const resultContainer = document.getElementById("result");
+    const rows = matrix.length;
+    const cols = matrix[0].length;
+    let solutionSet = "Solution set:<br>";
+
+    for (let i = 0; i < rows; i++) {
+        if (i < cols - 1) {
+            solutionSet += `x${i + 1} = ${matrix[i][cols - 1]} <br>`;
+        }
+    }
+    for(let i=rows+1 ; i<cols-1 ; i++){
+        solutionSet+=`x${i} = free <br> `;
+    }
+
+    resultContainer.innerHTML = solutionSet;
+}
+
+function calculate() {
+    const matrix = getMatrixValues();
+    console.log(matrix);
+    const result = gaussJordanElimination(matrix);
+    displayResult(result);
+}
+
+function resetForm() {
+    const matrixInputs = document.querySelectorAll('input[type="number"]');
+    matrixInputs.forEach(input => (input.value = ''));
+
+    const resultContainer = document.getElementById("result");
+    resultContainer.innerHTML = '';
+    createMatrixInputs();
+}
+
+function solve() {
+    const matrix = getMatrixValues();
+    const result = gaussJordanElimination(matrix);
+    displayResult(result);
+}
+
+function gaussJordanElimination(matrix) {
+    const rows = matrix.length;
+    const cols = matrix[0].length;
+
+    for (let i = 0; i < rows; i++) {
+        // Make the diagonal contain all 1's
+        const diagElement = matrix[i][i];
+        for (let j = 0; j < cols; j++) {
+            matrix[i][j] /= diagElement;
+        }
+
+        // Make the other elements in the current column 0
+        for (let k = 0; k < rows; k++) {
+            if (k !== i) {
+                const factor = matrix[k][i];
+                for (let j = 0; j < cols; j++) {
+                    matrix[k][j] -= factor * matrix[i][j];
+                }
+            }
+        }
+    }
+
+    return matrix;
+}
+
+// function displayResult(matrix) {
+//     const resultContainer = document.getElementById("result");
+//     const rows = matrix.length;
+//     const cols = matrix[0].length;
+//     let solutionSet = "Solution set:<br>";
+
+//     for (let i = 0; i < rows; i++) {
+//         if (i < cols - 1) {
+//             solutionSet += `x${i + 1} = ${matrix[i][cols - 1]}<br>`;
+//         }
+//     }
+
+//     resultContainer.innerHTML = solutionSet;
+// }
+
diff --git a/Calculators/Gauss-Jordan-Calculator/style.css b/Calculators/Gauss-Jordan-Calculator/style.css
@@ -0,0 +1,95 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f4f7;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#matrixCalculator {
+    background-color: #fff;
+    padding: 20px 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 600px;
+    box-sizing: border-box;
+}
+
+h2 {
+    margin-bottom: 20px;
+    text-decoration: underline;
+    color: #333;
+    text-align: center;
+}
+
+label {
+    display: block;
+    margin: 10px 0 5px;
+    font-weight: bold;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 5px;
+    margin: 5px 0;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+#matrixInputs {
+    margin-bottom: 20px;
+    overflow-x: auto;
+}
+.matrixRow {
+    display: flex;
+}
+
+.matrixCell {
+    flex: 1;
+    padding: 10px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+
+.matrixCell input {
+    width: 80%;
+}
+
+h3 {
+    text-align: center;
+    color: #ff0000;
+    text-decoration:underline;
+}
+
+#result {
+    background-color: #f9f9f9;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    color: #333;
+    min-height: 50px;
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
diff --git a/index.html b/index.html
@@ -3996,6 +3996,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Gauss Jordan Calculator</h2>
+                <h3>Find roots Of Equations.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Gauss-Jordan-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Gauss-Jordan-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
 
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">