Added Circle Equation Solving Calculator (#1973)

Rakesh9100 · Jan 7, 2025 · 2fabca5 · 2fabca5
1 parent 8c934d0
commit 2fabca5
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 0 deletions.
diff --git a/Calculators/Circle-Equation-Calculator/README.md b/Calculators/Circle-Equation-Calculator/README.md
@@ -0,0 +1,28 @@
+# <p align="center">Circle Equation Calculator</p>
+
+## Description :-
+
+A web-based Circle Equation Calculator where the user enters the coefficients D, E and F from the general circle equation x² + y² + Dx + Ey + F = 0.
+
+Output:
+    1.Displays the center and radius of the circle from the provided equation.
+    2.If the radius squared is negative, it shows an error message indicating the equation is invalid for a real circle.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Calculation :-
+
+Once the values of D, E and F from the general equation of a cicle x² + y² + Dx + Ey + F = 0 are assigned,
+Radius is computed using:- 
+    radius = √(h² + k² - F)
+Centre(h,k) is computed using:-
+    h = -D/2
+    k = -E/2
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/5ea94981-e6a0-4f29-a102-b346503a1f16)
diff --git a/Calculators/Circle-Equation-Calculator/assets/background.jpg b/Calculators/Circle-Equation-Calculator/assets/background.jpg
diff --git a/Calculators/Circle-Equation-Calculator/index.html b/Calculators/Circle-Equation-Calculator/index.html
@@ -0,0 +1,35 @@
+<!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>Circle Equation Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Circle Equation Calculator</h1>
+        <h2>x² + y² + Dx + Ey + F = 0</h2>
+        <!-- Input group for coefficients of the circle equation -->
+        <div class="input-grp">
+            <label for="d">D (coefficient of x): </label>
+            <input type="number" id="d" placeholder="Enter D" step="any">
+        </div>
+
+        <div class="input-grp">
+            <label for="e">E (coefficient of y): </label>
+            <input type="number" id="e" placeholder="Enter E" step="any">
+        </div>
+
+        <div class="input-grp">
+            <label for="f">F (constant): </label>
+            <input type="number" id="f" placeholder="Enter F" step="any">
+        </div>
+
+        <button onclick="calculateCircle()">Calculate</button>
+        <div class="result" id="result"></div> 
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Circle-Equation-Calculator/script.js b/Calculators/Circle-Equation-Calculator/script.js
@@ -0,0 +1,33 @@
+function calculateCircle() {
+    // Get the input values
+    const d = parseFloat(document.getElementById('d').value);
+    const e = parseFloat(document.getElementById('e').value);
+    const f = parseFloat(document.getElementById('f').value);
+
+    // Validate input
+    if (isNaN(d) || isNaN(e) || isNaN(f)) {
+        document.getElementById('result').innerHTML = `
+            <p style="color: red;">Please enter valid numerical values for D, E, and F.</p>
+        `;
+        return;
+    }
+
+    // Calculate the center and radius
+    const h = -d / 2;
+    const k = -e / 2;
+    const radiusSquared = h * h + k * k - f;
+
+    // Display the result
+    const resultDiv = document.getElementById('result');
+    if (radiusSquared >= 0) {
+        const radius = Math.sqrt(radiusSquared).toFixed(2);
+        resultDiv.innerHTML = `
+            <p><strong>Center:</strong> (${h.toFixed(2)}, ${k.toFixed(2)})</p>
+            <p><strong>Radius:</strong> ${radius}</p>
+        `;
+    } else {
+        resultDiv.innerHTML = `
+            <p style="color: red;">Invalid equation. The radius squared is negative, which is not possible for a real circle.</p>
+        `;
+    }
+}
diff --git a/Calculators/Circle-Equation-Calculator/style.css b/Calculators/Circle-Equation-Calculator/style.css
@@ -0,0 +1,117 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+label {
+    color: rgb(8, 8, 2);
+    font-weight: bold;
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.container {
+    background-color: purple;
+    border-radius: 10px;
+    padding: 20px;
+    animation: fadeIn 1s ease-in-out;
+    box-shadow: 0 4px 6px rgba(64, 84, 110, 0.1);
+    transition: box-shadow 0.3s ease-in-out;
+    width: 400px;
+    text-align: center;
+}
+
+h1 {
+    color: white;
+}
+
+h2 {
+    color: wheat;
+}
+
+.container:hover {
+    box-shadow: 0 8px 12px rgba(48, 105, 185, 0.2);
+}
+
+.input-grp {
+    margin-bottom: 15px;
+}
+
+input {
+    margin-bottom: 10px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 3px solid #030303;
+    border-radius: 8px;
+    transition: border-color 0.3s ease-in-out;
+}
+
+input:focus {
+    border-color: #332b91;
+    outline: none;
+}
+
+button {
+    padding: 12px;
+    cursor: pointer;
+    text-align: center;
+    background: linear-gradient(90deg, #5beca1, #4dffde);
+    color: rgb(0, 0, 0);
+    font-weight: bolder;
+    border: black;
+    border-radius: 5px;
+    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+button:hover {
+    background: linear-gradient(90deg, #4ef15c, #906fea);
+    transform: scale(1.05);
+    border: black;
+}
+
+#result {
+    margin-top: 20px;
+    font-weight: bolder;
+    color: #0c0404;
+    animation: fadeIn 1s ease-in-out;
+    align-items: center;
+    text-align: center;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 600px) {
+    .container {
+        width: 90%;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+    }
+}
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 radius and centre of the circle by taking its equation as input.",
+        "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.",