swapnilsparsh · TinkerTechie · Oct 10, 2025 · Oct 10, 2025
diff --git a/vector-calculation/assets/Screenshot_Calc.png b/vector-calculation/assets/Screenshot_Calc.png
diff --git a/vector-calculation/index.html b/vector-calculation/index.html
@@ -0,0 +1,45 @@
+<!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>3D Vector Operations Calculator</title>
+</head>
+<body>
+  <div class="container">
+    <h1>3D Vector Operations Calculator</h1>
+
+    <div class="vectors">
+      <div class="vector">
+        <h3>Vector A</h3>
+        <input type="number" id="ax" placeholder="X">
+        <input type="number" id="ay" placeholder="Y">
+        <input type="number" id="az" placeholder="Z">
+      </div>
+
+      <div class="vector">
+        <h3>Vector B</h3>
+        <input type="number" id="bx" placeholder="X">
+        <input type="number" id="by" placeholder="Y">
+        <input type="number" id="bz" placeholder="Z">
+      </div>
+    </div>
+
+    <div class="buttons">
+      <button onclick="calculateMagnitude()">|A| & |B|</button>
+      <button onclick="addVectors()">A + B</button>
+      <button onclick="subtractVectors()">A - B</button>
+      <button onclick="dotProduct()">A · B</button>
+      <button onclick="crossProduct()">A × B</button>
+      <button onclick="angleBetween()">Angle Between A & B</button>
+    </div>
+
+    <div class="results" id="results"></div>
+
+    <p>Developed by <a href="https://github.com/TinkerTechie" target="_blank">TinkerTechie</a></p>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/vector-calculation/script.js b/vector-calculation/script.js
@@ -0,0 +1,54 @@
+function getVectors() {
+    const ax = parseFloat(document.getElementById('ax').value) || 0;
+    const ay = parseFloat(document.getElementById('ay').value) || 0;
+    const az = parseFloat(document.getElementById('az').value) || 0;
+    const bx = parseFloat(document.getElementById('bx').value) || 0;
+    const by = parseFloat(document.getElementById('by').value) || 0;
+    const bz = parseFloat(document.getElementById('bz').value) || 0;
+
+    return { A: [ax, ay, az], B: [bx, by, bz] };
+}
+
+function calculateMagnitude() {
+    const { A, B } = getVectors();
+    const magA = Math.sqrt(A[0]**2 + A[1]**2 + A[2]**2).toFixed(3);
+    const magB = Math.sqrt(B[0]**2 + B[1]**2 + B[2]**2).toFixed(3);
+    document.getElementById('results').innerHTML = `|A| = ${magA}, |B| = ${magB}`;
+}
+
+function addVectors() {
+    const { A, B } = getVectors();
+    const res = [A[0]+B[0], A[1]+B[1], A[2]+B[2]];
+    document.getElementById('results').innerHTML = `A + B = (${res.join(', ')})`;
+}
+
+function subtractVectors() {
+    const { A, B } = getVectors();
+    const res = [A[0]-B[0], A[1]-B[1], A[2]-B[2]];
+    document.getElementById('results').innerHTML = `A - B = (${res.join(', ')})`;
+}
+
+function dotProduct() {
+    const { A, B } = getVectors();
+    const res = (A[0]*B[0] + A[1]*B[1] + A[2]*B[2]).toFixed(3);
+    document.getElementById('results').innerHTML = `A · B = ${res}`;
+}
+
+function crossProduct() {
+    const { A, B } = getVectors();
+    const res = [
+        A[1]*B[2] - A[2]*B[1],
+        A[2]*B[0] - A[0]*B[2],
+        A[0]*B[1] - A[1]*B[0]
+    ];
+    document.getElementById('results').innerHTML = `A × B = (${res.join(', ')})`;
+}
+
+function angleBetween() {
+    const { A, B } = getVectors();
+    const dot = A[0]*B[0] + A[1]*B[1] + A[2]*B[2];
+    const magA = Math.sqrt(A[0]**2 + A[1]**2 + A[2]**2);
+    const magB = Math.sqrt(B[0]**2 + B[1]**2 + B[2]**2);
+    const angle = Math.acos(dot / (magA * magB)) * (180/Math.PI);
+    document.getElementById('results').innerHTML = `Angle = ${angle.toFixed(2)}°`;
+}
diff --git a/vector-calculation/style.css b/vector-calculation/style.css
@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #e3f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.container {
+    background-color: #18355f;
+    color: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    width: 90%;
+    max-width: 600px;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.vectors {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.vector {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.vector input {
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    width: 100px;
+    text-align: center;
+}
+
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+button {
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #00bcd4;
+    color: white;
+    transition: 0.3s;
+}
+
+button:hover {
+    background-color: #0097a7;
+}
+
+.results {
+    background-color: white;
+    color: black;
+    padding: 15px;
+    border-radius: 8px;
+    min-height: 50px;
+    font-weight: 500;
+}