Cross-Product-Calculator

Rakesh9100 · Jun 9, 2024 · b846273 · b846273
1 parent 08c2915
commit b846273
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 0 deletions.
diff --git a/Calculators/Cross-Product-Calculator/README.md b/Calculators/Cross-Product-Calculator/README.md
@@ -0,0 +1,22 @@
+# Cross Product Calculator
+
+Welcome to the Cross Product Calculator! This simple web application allows you to calculate the cross product of two 3D vectors and find the angle between them.
+
+## Usage
+
+To use the calculator, simply input the components of the two vectors (i, j, k) into the provided input fields and click the "Calculate" button. The result, including the cross product and the angle between the vectors, will be displayed below.
+
+## How it Works
+
+The cross product of two vectors results in a new vector that is perpendicular to both input vectors. Its direction is determined by the right-hand rule.
+
+The formula to calculate the cross product of two vectors 𝐯 and 𝐰 is:
+
+A × B = |A| |B| sin θ n
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
diff --git a/Calculators/Cross-Product-Calculator/index.html b/Calculators/Cross-Product-Calculator/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cross Product Calculator</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="container">
+    <h1>Cross Product Calculator</h1>
+    <div id="explanation">
+      <h2>How the Cross Product Works:</h2>
+      <p>The cross product of two vectors results in a vector that is perpendicular to both input vectors. Its direction is determined by the right-hand rule.</p>
+      <h2>Cross Product Formula:</h2>
+      <h3><span class="formula">A × B = |A| |B| sin θ n</span></h3>
+
+  </div>
+    <div class="input-block">
+        <label for="vector1">Vector A:</label>
+        <input type="text" id="vector1i" placeholder="i">
+        <input type="text" id="vector1j" placeholder="j">
+        <input type="text" id="vector1k" placeholder="k">
+    </div>
+    <div class="input-block">
+        <label for="vector2">Vector B:</label>
+        <input type="text" id="vector2i" placeholder="i">
+        <input type="text" id="vector2j" placeholder="j">
+        <input type="text" id="vector2k" placeholder="k">
+    </div>
+    <button onclick="calculateCrossProduct()">Calculate</button>
+    <div id="result"></div>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Cross-Product-Calculator/script.js b/Calculators/Cross-Product-Calculator/script.js
@@ -0,0 +1,62 @@
+function calculateCrossProduct() {
+  var vector1 = [
+      parseFloat(document.getElementById("vector1i").value),
+      parseFloat(document.getElementById("vector1j").value),
+      parseFloat(document.getElementById("vector1k").value)
+  ];
+  var vector2 = [
+      parseFloat(document.getElementById("vector2i").value),
+      parseFloat(document.getElementById("vector2j").value),
+      parseFloat(document.getElementById("vector2k").value)
+  ];
+
+  var crossResult = crossProduct(vector1, vector2);
+  var angle = angleBetweenVectors(vector1, vector2);
+
+  var resultDiv = document.getElementById("result");
+  resultDiv.innerHTML = "Cross Product: " + crossResult.join(", ") + "<br>";
+  resultDiv.innerHTML += "Angle Between Vectors: " + angle.toFixed(2) + " degrees";
+}
+
+function crossProduct(vector1, vector2) {
+  var crossResult = [
+      vector1[1] * vector2[2] - vector1[2] * vector2[1],
+      vector1[2] * vector2[0] - vector1[0] * vector2[2],
+      vector1[0] * vector2[1] - vector1[1] * vector2[0]
+  ];
+  return crossResult;
+}
+
+function angleBetweenVectors(vector1, vector2) {
+  var dotProduct = vector1[0] * vector2[0] + vector1[1] * vector2[1] + vector1[2] * vector2[2];
+  var magnitude1 = Math.sqrt(vector1[0] ** 2 + vector1[1] ** 2 + vector1[2] ** 2);
+  var magnitude2 = Math.sqrt(vector2[0] ** 2 + vector2[1] ** 2 + vector2[2] ** 2);
+  var cosTheta = dotProduct / (magnitude1 * magnitude2);
+  var angleInRadians = Math.acos(cosTheta);
+  var angleInDegrees = angleInRadians * (180 / Math.PI);
+  return angleInDegrees;
+}
+
+function calculateCrossProduct() {
+  var vector1i = parseFloat(document.getElementById("vector1i").value);
+  var vector1j = parseFloat(document.getElementById("vector1j").value);
+  var vector1k = parseFloat(document.getElementById("vector1k").value);
+  var vector2i = parseFloat(document.getElementById("vector2i").value);
+  var vector2j = parseFloat(document.getElementById("vector2j").value);
+  var vector2k = parseFloat(document.getElementById("vector2k").value);
+
+  if (isNaN(vector1i) || isNaN(vector1j) || isNaN(vector1k) || isNaN(vector2i) || isNaN(vector2j) || isNaN(vector2k)) {
+      alert("Please input values for all components of both vectors.");
+      return;
+  }
+
+  var vector1 = [vector1i, vector1j, vector1k];
+  var vector2 = [vector2i, vector2j, vector2k];
+
+  var crossResult = crossProduct(vector1, vector2);
+  var angle = angleBetweenVectors(vector1, vector2);
+
+  var resultDiv = document.getElementById("result");
+  resultDiv.innerHTML = "Cross Product: " + crossResult.join(", ") + "<br>";
+  resultDiv.innerHTML += "Angle Between Vectors: " + angle.toFixed(2) + " degrees";
+}
diff --git a/Calculators/Cross-Product-Calculator/style.css b/Calculators/Cross-Product-Calculator/style.css
@@ -0,0 +1,64 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+}
+
+.container {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  text-align: center;
+  color: #007bff;
+}
+
+.input-block {
+  margin-bottom: 20px;
+}
+
+.input-block label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.input-block input {
+  width: calc(33.33% - 10px);
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-right: 10px;
+  box-sizing: border-box;
+}
+
+.input-block input:last-child {
+  margin-right: 0;
+}
+
+button {
+  display: block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+#result {
+  margin-top: 20px;
+  font-weight: bold;
+}
+