Circular Equation Calculator
+ +## 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 :- + + + + + + \ No newline at end of file diff --git a/Calculators/Circle-Equation-Calculator/script.js b/Calculators/Circle-Equation-Calculator/script.js new file mode 100644 index 000000000..367cce224 --- /dev/null +++ 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 = `Center: (${h}, ${k})
Radius: ${formattedRadius}
`; + } else { + resultDiv.innerHTML = "Invalid equation format! Please use the form (x-h)^2 + (y-k)^2 = r^2.
"; + } +} + +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 = `General Form: x² + y² ${D >= 0 ? "+" : ""}${D}x ${E >= 0 ? "+" : ""}${E}y ${F >= 0 ? "+" : ""}${F} = 0
`; + } else { + resultDiv.innerHTML = "Invalid equation format! Please use the form (x-h)^2 + (y-k)^2 = r^2.
"; + } +} + +// 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 new file mode 100644 index 000000000..26f512b8a --- /dev/null +++ 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 index 3ebfb0762..b5dc297b7 100644 --- 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.",