Rakesh9100 · Bishal-35 · Jan 6, 2025 · Jan 6, 2025
diff --git a/Calculators/Circle-Equation-Calculator/1.png b/Calculators/Circle-Equation-Calculator/1.png
diff --git a/Calculators/Circle-Equation-Calculator/2.png b/Calculators/Circle-Equation-Calculator/2.png
diff --git a/Calculators/Circle-Equation-Calculator/3.png b/Calculators/Circle-Equation-Calculator/3.png
diff --git a/Calculators/Circle-Equation-Calculator/assets/image.jpg b/Calculators/Circle-Equation-Calculator/assets/image.jpg
diff --git a/Calculators/Circle-Equation-Calculator/index.html b/Calculators/Circle-Equation-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>Circle Equation Solver</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Circle Equation Solver</h1>
+        <form id="circle-form">
+            <label for="equation" id="circle-form-heading">Enter the circle equation</label>
+            <input type="text" id="equation" placeholder="E.g., (x-3)^2 + (y+2)^2 = 16" required>
+            <div class="buttons">
+                <button type="button" id="extract">Extract Center & Radius</button>
+                <button type="button" id="convert">Convert to General Form</button>
+                <button type="button" id="reset">Reset</button>
+            </div>
+        </form>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Circle-Equation-Calculator/readme.md b/Calculators/Circle-Equation-Calculator/readme.md
@@ -0,0 +1,39 @@
+# <p align="center">Circular Equation Calculator</p>
+
+## Description :-
+
+A Circle Equation Solver is helps solve or derive key characteristics of a circle based on its equation. Specifically, it can take an equation of a circle (in either standard or general form) and calculate the center and radius of the circle, or it can convert between different forms of the equation.
+
+A Circle Equation Solver takes an equation of a circle and either:
+
+- Extracts the center and radius from the equation.
+- Converts the equation from one form to another (e.g., from general form to standard form).
+- Solves for unknowns, such as the center coordinates or radius, based on the given information
+
+
+Examples:
+
+**Input:** 
+
+Standard Form : (x-3)^2 + (y+2)^2 = 16
+
+**Output:** 
+
+Centre: (3 , -2)            
+Radius: 4
+
+General Form : x² + y² -6x +4y -3 = 0
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![alt text](1.png)
+
+![alt text](2.png)
+
+![alt text](3.png)
diff --git a/Calculators/Circle-Equation-Calculator/script.js b/Calculators/Circle-Equation-Calculator/script.js
@@ -0,0 +1,62 @@
+document.getElementById("extract").addEventListener("click", extractCenterRadius);
+document.getElementById("convert").addEventListener("click", convertToGeneral);
+document.getElementById("reset").addEventListener("click", resetForm); // Adding event listener for reset
+
+function extractCenterRadius() {
+  const equation = normalizeInput(document.getElementById("equation").value);
+  const resultDiv = document.getElementById("result");
+
+  // Match standard form: (x-h)^2 + (y-k)^2 = r^2
+  const regex = /^\(x([-+]?\d*\.?\d*)\)\^2\+\(y([-+]?\d*\.?\d*)\)\^2=(\d*\.?\d+)$/;
+
+  const matches = equation.match(regex);
+
+  if (matches) {
+    const h = -parseFloat(matches[1] || 0); // Handle empty values as 0
+    const k = -parseFloat(matches[2] || 0);
+    const r = Math.sqrt(parseFloat(matches[3]));
+
+    // Format radius: integer if whole number, float if not
+    const formattedRadius = Number.isInteger(r) ? r : r.toFixed(2);
+
+    resultDiv.innerHTML = `<p>Center: (${h}, ${k})</p><p>Radius: ${formattedRadius}</p>`;
+  } else {
+    resultDiv.innerHTML = "<p>Invalid equation format! Please use the form (x-h)^2 + (y-k)^2 = r^2.</p>";
+  }
+}
+
+function convertToGeneral() {
+  const equation = normalizeInput(document.getElementById("equation").value);
+  const resultDiv = document.getElementById("result");
+
+  const regex = /^\(x([-+]?\d*\.?\d*)\)\^2\+\(y([-+]?\d*\.?\d*)\)\^2=(\d*\.?\d+)$/;
+
+  const matches = equation.match(regex);
+
+  if (matches) {
+    const h = -parseFloat(matches[1] || 0); // Handle empty values as 0
+    const k = -parseFloat(matches[2] || 0);
+    const rSquared = parseFloat(matches[3]);
+
+    const D = -2 * h;
+    const E = -2 * k;
+    const F = h * h + k * k - rSquared;
+
+    resultDiv.innerHTML = `<p>General Form: x² + y² ${D >= 0 ? "+" : ""}${D}x ${E >= 0 ? "+" : ""}${E}y ${F >= 0 ? "+" : ""}${F} = 0</p>`;
+  } else {
+    resultDiv.innerHTML = "<p>Invalid equation format! Please use the form (x-h)^2 + (y-k)^2 = r^2.</p>";
+  }
+}
+
+// Normalize input to remove all spaces and replace non-standard minus signs
+function normalizeInput(input) {
+  return input
+    .replace(/−/g, "-") // Replace non-standard minus sign with standard hyphen
+    .replace(/\s+/g, ""); // Remove all spaces
+}
+
+// Reset the form and result area
+function resetForm() {
+  document.getElementById("equation").value = ''; // Clear the input field
+  document.getElementById("result").innerHTML = ''; // Clear the result area
+}
diff --git a/Calculators/Circle-Equation-Calculator/style.css b/Calculators/Circle-Equation-Calculator/style.css
@@ -0,0 +1,115 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f7f6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('assets/image.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.container {
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
+    width: 100%;
+    max-width: 500px;
+    padding: 30px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+#circle-form-heading {
+    font-weight: 550;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 12px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-top: 10px;
+    margin-bottom: 15px;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus {
+    border-color: #007BFF;
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+button {
+    padding: 12px 20px;
+    font-size: 1rem;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+button:focus {
+    outline: none;
+}
+
+#reset {
+    background-color: #dc3545;
+}
+
+#reset:hover {
+    background-color: #c82333;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #333;
+    padding: 10px;
+    border-radius: 4px;
+    background-color: #f8f9fa;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: auto;
+    }
+
+    button {
+        width: auto;
+    }
+
+    .buttons {
+        flex-direction: column;
+        gap: 10px;
+    }
+}
diff --git a/calculators.json b/calculators.json
@@ -479,6 +479,12 @@
         "link": "./Calculators/Chinese-Zodiac-Calculator/index.html",
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Chinese-Zodiac-Calculator"
     },
+    {
+        "title": "Circle Equation Calculator",
+        "description": "Calculates the centre and radius from the Standard Form and also converts the Standard Form to General Form.",
+        "link": "./Calculators/Circle-Equation-Calculator/index.html",
+        "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Circle-Equation-Calculator"
+    },
     {
         "title": "Circular Motion Calculator",
         "description": "Calculates Centripetal Acceleration, Angular Frequency, Period and Frequency.",