Rakesh9100 · its-harshitgoel · Aug 10, 2024 · Aug 10, 2024
diff --git a/Calculators/Matrix-Rank-Calculator/README.md b/Calculators/Matrix-Rank-Calculator/README.md
@@ -0,0 +1,29 @@
+# Matrix Rank Calculator
+
+## Description
+The **Matrix Rank Calculator** is a web-based tool that allows users to calculate the rank of a matrix. Users can specify the dimensions of the matrix, input the values, and instantly get the rank. This tool is useful for students, mathematicians, and engineers who need to perform matrix operations quickly and efficiently.
+
+## Tech Stack
+- **HTML**: Structure of the web page.
+- **CSS**: Styling and layout of the application, ensuring a responsive and modern design.
+- **JavaScript**: Logic for generating matrix inputs, calculating the rank, and handling user interactions.
+
+## Features
+- User-friendly interface with a clean and modern design.
+- Dynamic generation of matrix input fields based on user-specified dimensions.
+- Modal popup for entering matrix values.
+- Real-time calculation of matrix rank using Gaussian elimination.
+- Responsive design, making it accessible on various devices.
+
+## Screenshots
+*Example of the Matrix Rank Calculator in action.*
+![Matrix Rank Calculator](image.png)
+
+![Generate Rank Of A Matrix](image-1.png)
+
+
+## Usage
+1. Enter the number of rows and columns for the matrix.
+2. Click "Generate Matrix Inputs" to open the matrix input form in a modal.
+3. Enter the values of the matrix.
+4. Click "Calculate Rank" to view the rank of the matrix.
diff --git a/Calculators/Matrix-Rank-Calculator/image-1.png b/Calculators/Matrix-Rank-Calculator/image-1.png
diff --git a/Calculators/Matrix-Rank-Calculator/image.png b/Calculators/Matrix-Rank-Calculator/image.png
diff --git a/Calculators/Matrix-Rank-Calculator/index.html b/Calculators/Matrix-Rank-Calculator/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matrix Rank Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Matrix Rank Calculator</h1>
+        <form id="matrix-form">
+            <div class="matrix-inputs">
+                <label for="rows">Number of Rows:</label>
+                <input type="number" id="rows" min="1" value="3">
+                <label for="columns">Number of Columns:</label>
+                <input type="number" id="columns" min="1" value="3">
+            </div>
+            <button type="button" onclick="generateMatrixInputs()">Generate Matrix Inputs</button>
+            <br>
+            <div id="matrix-container"></div>
+            <button type="button" onclick="calculateRank()">Calculate Rank</button>
+        </form>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Matrix-Rank-Calculator/script.js b/Calculators/Matrix-Rank-Calculator/script.js
@@ -0,0 +1,69 @@
+function generateMatrixInputs() {
+    const rows = parseInt(document.getElementById('rows').value);
+    const columns = parseInt(document.getElementById('columns').value);
+    const matrixContainer = document.getElementById('matrix-container');
+
+    matrixContainer.innerHTML = ''; // Clear previous inputs
+
+    for (let i = 0; i < rows; i++) {
+        const rowDiv = document.createElement('div');
+        for (let j = 0; j < columns; j++) {
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.dataset.row = i;
+            input.dataset.column = j;
+            rowDiv.appendChild(input);
+        }
+        matrixContainer.appendChild(rowDiv);
+    }
+}
+
+function calculateRank() {
+    const inputs = document.querySelectorAll('#matrix-container input');
+    const rows = parseInt(document.getElementById('rows').value);
+    const columns = parseInt(document.getElementById('columns').value);
+    const matrix = Array.from({ length: rows }, () => Array(columns).fill(0));
+
+    inputs.forEach(input => {
+        const row = parseInt(input.dataset.row);
+        const column = parseInt(input.dataset.column);
+        matrix[row][column] = parseFloat(input.value);
+    });
+
+    const rank = getMatrixRank(matrix);
+    document.getElementById('result').textContent = `The rank of the matrix is: ${rank}`;
+}
+
+function getMatrixRank(matrix) {
+    const m = matrix.length;
+    const n = matrix[0].length;
+    let rank = 0;
+
+    const mat = matrix.map(row => [...row]); // Create a copy of the matrix
+
+    for (let i = 0; i < m; i++) {
+        let maxRow = i;
+        for (let k = i + 1; k < m; k++) {
+            if (Math.abs(mat[k][i]) > Math.abs(mat[maxRow][i])) {
+                maxRow = k;
+            }
+        }
+
+        if (mat[maxRow][i] === 0) {
+            continue;
+        }
+
+        [mat[i], mat[maxRow]] = [mat[maxRow], mat[i]];
+
+        for (let k = i + 1; k < m; k++) {
+            const factor = mat[k][i] / mat[i][i];
+            for (let j = i; j < n; j++) {
+                mat[k][j] -= factor * mat[i][j];
+            }
+        }
+
+        rank++;
+    }
+
+    return rank;
+}
diff --git a/Calculators/Matrix-Rank-Calculator/styles.css b/Calculators/Matrix-Rank-Calculator/styles.css
@@ -0,0 +1,92 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #f0f4f8, #d3e0e9);
+}
+
+.container {
+    background-color: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 700px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.matrix-inputs {
+    margin-bottom: 20px;
+}
+
+.matrix-inputs label {
+    display: block;
+    margin: 10px 0;
+    font-weight: bold;
+}
+
+.matrix-inputs input[type="number"] {
+    padding: 8px;
+    margin: 10px 0;
+    font-size: 1em;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+}
+
+button {
+    padding: 12px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    transition: background-color 0.3s, transform 0.2s;
+    margin: 10px 0;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: translateY(-2px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+#matrix-container {
+    margin-bottom: 20px;
+    display: grid;
+    gap: 10px;
+}
+
+#matrix-container div {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+#matrix-container input {
+    width: 50px;
+    text-align: center;
+    padding: 8px;
+    font-size: 1em;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2em;
+    color: #333;
+    font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -3111,6 +3111,20 @@ <h3>Your key to matrix operations!</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Matrix Rank Calculator</h2>
+                <h3>Your key to matrix operations!</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Matrix-Rank-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Matrix-Rank-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Meal Calorie Calculator</h2>