Rakesh9100 · Dhruvgandhi29 · Sep 16, 2024
diff --git a/Calculators/Elliptic Curve Calculator/README.md b/Calculators/Elliptic Curve Calculator/README.md
@@ -0,0 +1,23 @@
+# <p align="center">Air Quality Index Calculator</p>
+
+## Description :-
+
+Calculates the following things for an elliptic curve:-
+
+1. Addition of 2 points
+2. Negation of a point
+3. Multiplication of a point with a scalar
+4. All points on the curve
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![1726495279660](image/readme/1726495279660.png)
+![1726495391951](image/readme/1726495391951.png)
+![1726495418726](image/readme/1726495418726.png)
+![1726495436282](image/readme/1726495436282.png)
diff --git a/Calculators/Elliptic Curve Calculator/image/readme/1726495279660.png b/Calculators/Elliptic Curve Calculator/image/readme/1726495279660.png
diff --git a/Calculators/Elliptic Curve Calculator/image/readme/1726495391951.png b/Calculators/Elliptic Curve Calculator/image/readme/1726495391951.png
diff --git a/Calculators/Elliptic Curve Calculator/image/readme/1726495418726.png b/Calculators/Elliptic Curve Calculator/image/readme/1726495418726.png
diff --git a/Calculators/Elliptic Curve Calculator/image/readme/1726495436282.png b/Calculators/Elliptic Curve Calculator/image/readme/1726495436282.png
diff --git a/Calculators/Elliptic Curve Calculator/index.html b/Calculators/Elliptic Curve Calculator/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Elliptic Curve Calculator</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="m-5 p-2 bg-light rounded-2 shadow-md">
+      <h1 class="text-center my-4 title">Elliptic Curve Calculator</h1>
+
+      <!-- Buttons to select the operation -->
+      <div>
+        <div class="row text-center my-4 px-3">
+          <div class="col-md-3">
+            <button class="btn btn-secondary mod" onclick="setMode('addition')">
+              Point Addition
+            </button>
+          </div>
+          <div class="col-md-3">
+            <button class="btn btn-secondary mod" onclick="setMode('negation')">
+              Point Negation
+            </button>
+          </div>
+          <div class="col-md-3">
+            <button
+              class="btn btn-secondary mod"
+              onclick="setMode('multiplication')"
+            >
+              Scalar Multiplication
+            </button>
+          </div>
+          <div class="col-md-3">
+            <button
+              class="btn btn-secondary mod"
+              onclick="setMode('allPoints')"
+            >
+              All Points on Curve
+            </button>
+          </div>
+        </div>
+
+        <!-- Elliptic Curve Form -->
+
+        <form id=" curve-form">
+          <div class="w-75 mx-auto">
+            <!-- Curve parameters (always shown) -->
+            <div class="row mb-3">
+              <div class="col-md-4">
+                <label for="a" class="form-label">Curve parameter a:</label>
+                <input type="number" class="form-control" id="a" value="1" />
+              </div>
+              <div class="col-md-4">
+                <label for="b" class="form-label">Curve parameter b:</label>
+                <input type="number" class="form-control" id="b" value="1" />
+              </div>
+              <div class="col-md-4">
+                <label for="p" class="form-label">Prime modulus p:</label>
+                <input type="number" class="form-control" id="p" value="23" />
+              </div>
+            </div>
+
+            <!-- Point 1 (for Addition and Negation) -->
+            <div id="point1" class="row justify-content-between mb-3">
+              <div class="col-md-6">
+                <label for="x1" class="form-label"
+                  >Point X1 (x-coordinate):</label
+                >
+                <input type="number" class="form-control" id="x1" value="3" />
+              </div>
+              <div class="col-md-6">
+                <label for="y1" class="form-label"
+                  >Point Y1 (y-coordinate):</label
+                >
+                <input type="number" class="form-control" id="y1" value="10" />
+              </div>
+            </div>
+
+            <!-- Point 2 (only for Addition) -->
+            <div id="point2" class="row mb-3">
+              <div class="col-md-6">
+                <label for="x2" class="form-label"
+                  >Point X2 (x-coordinate):</label
+                >
+                <input type="number" class="form-control" id="x2" value="9" />
+              </div>
+              <div class="col-md-6">
+                <label for="y2" class="form-label"
+                  >Point Y2 (y-coordinate):</label
+                >
+                <input type="number" class="form-control" id="y2" value="7" />
+              </div>
+            </div>
+
+            <!-- Scalar k (only for Scalar Multiplication) -->
+            <div id="scalar" class="row mb-3">
+              <div class="col-md-6">
+                <label for="k" class="form-label"
+                  >Scalar k (for scalar multiplication):</label
+                >
+                <input type="number" class="form-control" id="k" value="2" />
+              </div>
+            </div>
+
+            <div class="text-center row justify-content-center">
+              <div class="col-md-3">
+                <button
+                  type="button"
+                  class="btn btn-primary"
+                  onclick="calculate()"
+                >
+                  Calculate
+                </button>
+              </div>
+            </div>
+          </div>
+        </form>
+        <div class="text-center mt-3">
+          <small class="text-muted">
+            Note: Ensure that the values entered for points lie on the elliptic
+            curve defined by the parameters a, b, and p, and that the curve is
+            valid (i.e., 4a<sup>3</sup> + 27b<sup>2</sup> ≠ 0 mod p).
+          </small>
+        </div>
+
+        <!-- Results -->
+        <div class="mt-4 results w-75 mx-auto">
+          <div class="alert alert-info" id="additionResult">
+            Point Addition:
+          </div>
+          <div class="alert alert-info" id="negationResult">
+            Point Negation:
+          </div>
+          <div class="alert alert-info" id="multiplicationResult">
+            Scalar Multiplication:
+          </div>
+          <div class="alert alert-info" id="allPointsResult">
+            All Points on the Curve:
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Calculators/Elliptic Curve Calculator/script.js b/Calculators/Elliptic Curve Calculator/script.js
@@ -0,0 +1,151 @@
+const INF = null;
+
+document.addEventListener("DOMContentLoaded", () => {
+  setMode("addition");
+});
+
+function setMode(mode) {
+  // Hide all input sections initially
+  document.getElementById("point1").style.display = "none";
+  document.getElementById("point2").style.display = "none";
+  document.getElementById("scalar").style.display = "none";
+
+  // Hide all result sections
+  document.getElementById("additionResult").style.display = "none";
+  document.getElementById("negationResult").style.display = "none";
+  document.getElementById("multiplicationResult").style.display = "none";
+  document.getElementById("allPointsResult").style.display = "none";
+
+  // Show relevant inputs based on the mode
+  if (mode === "addition") {
+    document.getElementById("point1").style.display = "flex";
+    document.getElementById("point2").style.display = "flex";
+    document.getElementById("additionResult").style.display = "block";
+  } else if (mode === "negation") {
+    document.getElementById("point1").style.display = "flex";
+    document.getElementById("negationResult").style.display = "block";
+  } else if (mode === "multiplication") {
+    document.getElementById("point1").style.display = "flex";
+    document.getElementById("scalar").style.display = "flex";
+    document.getElementById("multiplicationResult").style.display = "block";
+  } else if (mode === "allPoints") {
+    document.getElementById("allPointsResult").style.display = "block";
+  }
+}
+
+function modInverse(a, p) {
+  for (let i = 1; i < p; i++) {
+    if ((a * i) % p === 1) {
+      return i;
+    }
+  }
+  return null;
+}
+
+function pointAddition(p1, p2, a, p) {
+  if (p1 === INF) return p2;
+  if (p2 === INF) return p1;
+
+  let [x1, y1] = p1;
+  let [x2, y2] = p2;
+
+  let s;
+  if (x1 === x2 && y1 === y2) {
+    s = ((3 * x1 * x1 + a) * modInverse(2 * y1, p)) % p;
+  } else {
+    s = ((y2 - y1) * modInverse(x2 - x1, p)) % p;
+  }
+
+  const x3 = (s * s - x1 - x2) % p;
+  const y3 = (s * (x1 - x3) - y1) % p;
+
+  return [(x3 + p) % p, (y3 + p) % p];
+}
+
+function pointNegation(point, modulus) {
+  const [x, y] = point;
+  return [x, (modulus - y) % modulus];
+}
+
+function scalarMultiplication(k, point, a, p) {
+  let result = INF;
+  while (k > 0) {
+    if (k % 2 === 1) {
+      result = pointAddition(result, point, a, p);
+    }
+    k = Math.floor(k / 2);
+    point = pointAddition(point, point, a, p);
+  }
+  return result;
+}
+
+// Function to generate all points on the elliptic curve
+function generateAllPoints(a, b, p) {
+  const points = [];
+  for (let x = 0; x < p; x++) {
+    for (let y = 0; y < p; y++) {
+      if ((y * y) % p === (x * x * x + a * x + b) % p) {
+        points.push([x, y]);
+      }
+    }
+  }
+  return points;
+}
+
+function calculate() {
+  const a = parseInt(document.getElementById("a").value);
+  const b = parseInt(document.getElementById("b").value);
+  const p = parseInt(document.getElementById("p").value);
+  const x1 = parseInt(document.getElementById("x1").value);
+  const y1 = parseInt(document.getElementById("y1").value);
+  const x2 = parseInt(document.getElementById("x2").value);
+  const y2 = parseInt(document.getElementById("y2").value);
+  const k = parseInt(document.getElementById("k").value);
+
+  const point = [x1, y1];
+  const point2 = [x2, y2];
+
+  const additionResult = pointAddition(point, point2, a, p);
+  const negationResult = pointNegation(point, p);
+  const multiplicationResult = scalarMultiplication(k, point, a, p);
+
+  document.getElementById(
+    "additionResult"
+  ).textContent = `Point Addition: (${additionResult[0]}, ${additionResult[1]})`;
+
+  document.getElementById(
+    "negationResult"
+  ).textContent = `Point Negation: (${negationResult[0]}, ${negationResult[1]})`;
+  document.getElementById(
+    "multiplicationResult"
+  ).textContent = `Scalar Multiplication: (${multiplicationResult[0]}, ${multiplicationResult[1]})`;
+
+  // Generate and display all points on the curve
+  const allPoints = generateAllPoints(a, b, p);
+  const pointsText = allPoints
+    .map((point) => `(${point[0]}, ${point[1]})`)
+    .join(", ");
+  document.getElementById(
+    "allPointsResult"
+  ).textContent = `All Points on the Curve: ${pointsText}`;
+  const mode = document
+    .querySelector(".btn.btn-primary")
+    .textContent.toLowerCase();
+  if (mode.includes("addition")) {
+    document.getElementById(
+      "additionResult"
+    ).innerHTML = `Point Addition: (${x1}, ${y1}) + (${x2}, ${y2}) = [Result Here]`;
+  } else if (mode.includes("negation")) {
+    document.getElementById(
+      "negationResult"
+    ).innerHTML = `Point Negation: -(${x1}, ${y1}) = [Result Here]`;
+  } else if (mode.includes("multiplication")) {
+    document.getElementById(
+      "multiplicationResult"
+    ).innerHTML = `Scalar Multiplication: ${k} * (${x1}, ${y1}) = [Result Here]`;
+  } else if (mode.includes("all points")) {
+    document.getElementById(
+      "allPointsResult"
+    ).innerHTML = `All Points on the Curve: [List of Points]`;
+  }
+}
diff --git a/Calculators/Elliptic Curve Calculator/style.css b/Calculators/Elliptic Curve Calculator/style.css
@@ -0,0 +1,65 @@
+body {
+  background: rgb(238, 174, 202);
+  background: radial-gradient(
+    circle,
+    rgba(238, 174, 202, 1) 0%,
+    rgba(148, 187, 233, 1) 100%
+  );
+}
+
+/* Title Styling */
+.title {
+  font-size: 3rem;
+  font-family: "Montserrat", sans-serif;
+  color: #0077ff;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-weight: 700;
+  text-align: center;
+  animation: colorChange 4s linear infinite;
+}
+
+@keyframes colorChange {
+  0% {
+    color: #0077ff;
+  }
+  25% {
+    color: #ff0077;
+  }
+  50% {
+    color: #00ff77;
+  }
+  75% {
+    color: #ff7700;
+  }
+  100% {
+    color: #0077ff;
+  }
+}
+
+.results .alert {
+  font-size: 1.2rem;
+}
+
+button {
+  width: 100%;
+  font-size: 1.1rem;
+}
+
+.mod {
+  background-color: #6c757d; /* Original button background */
+  color: white; /* Text color */
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.mod:hover {
+  background-color: #5a6268; /* Darken background on hover */
+  color: #fff; /* Keep text white */
+  transform: scale(1.05); /* Slight zoom on hover */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
+}