Rakesh9100 · R2-STAR · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025 · Jan 7, 2025
diff --git a/Calculators/Circle-Equation-Solving-Calculator/README.md b/Calculators/Circle-Equation-Solving-Calculator/README.md
@@ -0,0 +1,29 @@
+# <p align="center">Circle Equation Solving Calculator</p>
+
+## Description :-
+
+A web-based Circle-Equation-Solving-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.
+
+## 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
+
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://imgur.com/y4a6iL0)
diff --git a/Calculators/Circle-Equation-Solving-Calculator/assets/bg-img.jpg b/Calculators/Circle-Equation-Solving-Calculator/assets/bg-img.jpg
diff --git a/Calculators/Circle-Equation-Solving-Calculator/index.html b/Calculators/Circle-Equation-Solving-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 Solving Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Circle Equation Solving 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-Solving-Calculator/script.js b/Calculators/Circle-Equation-Solving-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-Solving-Calculator/style.css b/Calculators/Circle-Equation-Solving-Calculator/style.css
@@ -0,0 +1,109 @@
+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/bg-img.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;
+}
+
+.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/Data-Visualization-Calculator/README.md b/Calculators/Data-Visualization-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Cut Off Calculator</p>
+
+## Description :-
+
+This is a simple web-based calculator that allows users to input numerical data and visualize it using bar charts.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+1.User Input: Accepts numerical input from the user.
+2.Bar Chart Visualization: Displays a bar for each input number.
+3.Clear Functionality: Resets the chart.
+
+## ScreenShots :-
+
+![image](https://imgur.com/a/5YciN8T)
diff --git a/Calculators/Data-Visualization-Calculator/assets/bg.jpg b/Calculators/Data-Visualization-Calculator/assets/bg.jpg
diff --git a/Calculators/Data-Visualization-Calculator/image.png b/Calculators/Data-Visualization-Calculator/image.png
diff --git a/Calculators/Data-Visualization-Calculator/index.html b/Calculators/Data-Visualization-Calculator/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Data Visualization Calculator</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>Data Visualization Calculator</h1>
+    <form id="data-form">
+      <div class="form-group">
+        <label for="labels">Enter Labels (comma-separated):</label>
+        <input type="text" id="labels" placeholder="e.g., January, February, March" required>
+      </div>
+
+      <div class="form-group">
+        <label for="values">Enter Values (comma-separated):</label>
+        <input type="text" id="values" placeholder="e.g., 10, 20, 30" required>
+      </div>
+
+      <button type="button" id="generate-chart">Generate Chart</button>
+    </form>
+
+    <div class="chart-container">
+      <canvas id="chart"></canvas>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Data-Visualization-Calculator/script.js b/Calculators/Data-Visualization-Calculator/script.js
@@ -0,0 +1,48 @@
+document.getElementById("generate-chart").addEventListener("click", function () {
+    const labelsInput = document.getElementById("labels").value;
+    const valuesInput = document.getElementById("values").value;
+
+    if (!labelsInput || !valuesInput) {
+      alert("Please fill in both labels and values!");
+      return;
+    }
+
+    const labels = labelsInput.split(",").map(label => label.trim());
+    const values = valuesInput.split(",").map(value => parseFloat(value.trim()));
+
+    if (labels.length !== values.length) {
+      alert("The number of labels must match the number of values!");
+      return;
+    }
+
+    // Create the chart
+    const ctx = document.getElementById("chart").getContext("2d");
+
+    // Destroy the previous chart instance if it exists
+    if (window.myChart) {
+      window.myChart.destroy();
+    }
+
+    window.myChart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: 'Values',
+          data: values,
+          backgroundColor: 'rgba(54, 162, 235, 0.6)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        scales: {
+          y: {
+            beginAtZero: true
+          }
+        }
+      }
+    });
+  });
+
diff --git a/Calculators/Data-Visualization-Calculator/style.css b/Calculators/Data-Visualization-Calculator/style.css
@@ -0,0 +1,64 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f9;
+    background-image: url('assets/bg.jpg');
+    background-size: cover;
+    background-position: center;
+  }
+
+  .container {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+  }
+
+  label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  button {
+    width: 100%;
+    padding: 10px;
+    color: #fff;
+    background: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #0056b3;
+  }
+
+  .chart-container {
+    margin-top: 20px;
+    padding: 15px;
+    background: #e9f7ef;
+    border: 1px solid #c3e6cb;
+    border-radius: 4px;
+  }
+
diff --git a/Calculators/Gaming-Efficiency-Calculator/README.md b/Calculators/Gaming-Efficiency-Calculator/README.md
@@ -0,0 +1,13 @@
+# <p align="center">Gaming Efficiency Calculator</p>
+
+## Description :-
+
+This calculator will help you calculate your gaming efficiency using kills, deaths, assists, headshots and time played.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+
diff --git a/Calculators/Gaming-Efficiency-Calculator/assets/bg-image.jpg b/Calculators/Gaming-Efficiency-Calculator/assets/bg-image.jpg