Rakesh9100 · rrbharath · May 2, 2026 · May 2, 2026 · May 2, 2026
diff --git a/Calculators/Manhattan-Distance-Calculator/README.md b/Calculators/Manhattan-Distance-Calculator/README.md
@@ -0,0 +1,27 @@
+# <p align="center">Manhattan Distance Calculator</p>
+
+## Description :-
+
+The Manhattan Distance is the difference between two points by taking the difference of their absolute value between x1, x2, y1, y2.
+
+Example:
+
+x1 = 2
+x2 = 3
+y1 = 5
+y2 = 3
+
+Manhattan Distance = |x2 - x1| + |y2 - y1|
+                   = |3 - 2| + |3 - 5|
+                   = 1 + 2
+                   = 3 
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+<img width="567" height="892" alt="Screenshot 2026-04-30 222700" src="https://github.com/user-attachments/assets/bc34dfc9-53ab-40d5-be2a-e113f54c06f1" />
diff --git a/Calculators/Manhattan-Distance-Calculator/index.html b/Calculators/Manhattan-Distance-Calculator/index.html
@@ -0,0 +1,44 @@
+<!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>Manhattan Distance Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+        <h1>Manhattan Distance Calculator</h1>
+        <p>Enter the coordinates of two points to calculate the Manhattan distance between them.</p>
+
+        <div class="point-group">
+            <h2>Point A</h2>
+            <div class="input-group">
+                <label for="x1">X-coordinate</label>
+                <input type="number" id="x1" placeholder="Enter X coordinate">
+            </div>
+            <div class="input-group">
+                <label for="y1">Y-coordinate</label>
+                <input type="number" id="y1" placeholder="Enter Y coordinate">
+            </div>
+        </div>
+
+        <div class="point-group">
+            <h2>Point B</h2>
+            <div class="input-group">
+                <label for="x2">X-coordinate</label>
+                <input type="number" id="x2" placeholder="Enter X coordinate">
+            </div>
+            <div class="input-group">
+                <label for="y2">Y-coordinate</label>
+                <input type="number" id="y2" placeholder="Enter Y coordinate">
+            </div>
+        </div>
+
+        <button onclick="calculateManhattanDistance()">Calculate Distance</button>
+        <div class="result" id="result"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Manhattan-Distance-Calculator/script.js b/Calculators/Manhattan-Distance-Calculator/script.js
@@ -0,0 +1,15 @@
+function calculateManhattanDistance() {
+    const x1 = parseFloat(document.getElementById('x1').value);
+    const y1 = parseFloat(document.getElementById('y1').value);
+    const x2 = parseFloat(document.getElementById('x2').value);
+    const y2 = parseFloat(document.getElementById('y2').value);
+    const resultDiv = document.getElementById('result');
+
+    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) {
+        resultDiv.textContent = "Please enter valid coordinates.";
+        return;
+    }
+
+    const distance = Math.abs(x2 - x1) + Math.abs(y2 - y1);
+    resultDiv.textContent = `The Manhattan Distance between (${x1}, ${y1}) and (${x2}, ${y2}) is: ${distance}`;
+}
diff --git a/Calculators/Manhattan-Distance-Calculator/style.css b/Calculators/Manhattan-Distance-Calculator/style.css
@@ -0,0 +1,112 @@
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: Inter, Arial, sans-serif;
+        background: radial-gradient(circle at top, #e8f0ff 0%, #f3f6fb 45%, #eef2f7 100%);
+        color: #1f2937;
+    }
+
+    .calculator {
+        width: min(100%, 420px);
+        padding: 28px 28px 32px;
+        border-radius: 24px;
+        background: #ffffff;
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+        text-align: left;
+    }
+
+    h1 {
+        margin: 0 0 10px;
+        font-size: clamp(1.8rem, 2.1vw, 2.3rem);
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+    }
+
+    p {
+        margin: 0 0 24px;
+        color: #4b5563;
+        line-height: 1.7;
+        font-size: 0.98rem;
+    }
+
+    .point-group {
+        margin-bottom: 22px;
+    }
+
+    .point-group h2 {
+        margin: 0 0 12px;
+        font-size: 1rem;
+        color: #111827;
+    }
+
+    .input-group {
+        display: grid;
+        gap: 8px;
+        margin-bottom: 16px;
+    }
+
+    label {
+        font-size: 0.94rem;
+        color: #374151;
+    }
+
+    input[type="number"] {
+        width: 100%;
+        padding: 12px 14px;
+        border: 1px solid #d1d5db;
+        border-radius: 12px;
+        background: #f9fafb;
+        color: #111827;
+        font-size: 1rem;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    }
+
+    input[type="number"]:focus {
+        outline: none;
+        border-color: #3b82f6;
+        background: #fff;
+        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
+    }
+
+    button {
+        width: 100%;
+        padding: 14px 18px;
+        margin-top: 8px;
+        background: linear-gradient(135deg, #2563eb, #1d4ed8);
+        color: #ffffff;
+        border: none;
+        border-radius: 14px;
+        cursor: pointer;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
+    }
+
+    button:hover {
+        transform: translateY(-1px);
+        background: linear-gradient(135deg, #1d4ed8, #2563eb);
+    }
+
+    .result {
+        margin-top: 24px;
+        padding: 18px 16px;
+        border-radius: 16px;
+        background: #eef2ff;
+        color: #1e40af;
+        text-align: center;
+        font-size: 1rem;
+        font-weight: 700;
+        min-height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
diff --git a/calculators.json b/calculators.json
@@ -1499,6 +1499,12 @@
         "link": "./Calculators/Magic-Number-Calculator/index.html",
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Magic-Number-Calculator"
     },
+    {
+        "title": "Manhattan Distance Calculator",
+        "description": "Calculates the Manhattan distance between two points.",
+        "link": "./Calculators/Manhattan-Distance-Calculator/index.html",
+        "source": "https://github.com/rrbharath/CalcDiverse/tree/feat/manhattan-distance-calculatorr"
+    },
     {
         "title": "Marks Percentage Calculator",
         "description": "Calculate the percentage of total marks from all subjects.",