Merge pull request #2320 from Sravyasaka/master

Added 3D Distance Calculator files
Sulagna-Dutta-Roy · Jul 11, 2024 · f53ba2a · f53ba2a
2 parents 7f5a9c4 + cfdacc2
commit f53ba2a
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 0 deletions.
diff --git a/3D distance calculator/manifest.json b/3D distance calculator/manifest.json
@@ -0,0 +1,10 @@
+{
+    "manifest_version": 3,
+    "name": "Distance Calculator",
+    "version": "1.0",
+    "description": "Distance Calculator.",
+    "permissions": [],
+    "action": {
+        "default_popup": "popup.html"
+    }
+}
diff --git a/3D distance calculator/popup.html b/3D distance calculator/popup.html
@@ -0,0 +1,29 @@
+<!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>Distance Calculator</title>
+</head>
+
+<body>
+    <div class="main">
+        <div class="cal">
+            <h1>Distance Calculator</h1>
+            <label for="point1">Enter Point 1 (x1, y1, z1):</label>
+            <input type="text" id="point1" placeholder="Enter x1, y1, z1" />
+
+            <label for="point2">Enter Point 2 (x2, y2, z2):</label>
+            <input type="text" id="point2" placeholder="Enter x2, y2, z2" />
+
+            <button id="myButton">Calculate</button>
+            <div id="result"></div>
+        </div>
+        <div id="answer"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/3D distance calculator/script.js b/3D distance calculator/script.js
@@ -0,0 +1,25 @@
+document.getElementById('myButton').addEventListener('click', function() {
+    const point1 = document.getElementById('point1').value.split(',');
+    const point2 = document.getElementById('point2').value.split(',');
+
+    if (point1.length === 3 && point2.length === 3) {
+        const x1 = parseFloat(point1[0]);
+        const y1 = parseFloat(point1[1]);
+        const z1 = parseFloat(point1[2]);
+        const x2 = parseFloat(point2[0]);
+        const y2 = parseFloat(point2[1]);
+        const z2 = parseFloat(point2[2]);
+        const a = x2-x1;
+        const b = y2-y1;
+        const c = z2-z1;
+
+
+
+            const ans = Math.sqrt(a*a + b*b + c*c);
+
+            document.getElementById('result').innerText = `Distance: (${ans})`;
+
+    } else {
+        document.getElementById('result').innerText = 'Please enter two points in the format x,y,z.';
+    }
+});
diff --git a/3D distance calculator/style.css b/3D distance calculator/style.css
@@ -0,0 +1,93 @@
+body {
+    font-family: "Arial", sans-serif;
+    background: linear-gradient(50deg, #8a1a1a, #087f9d);
+    margin: 0;
+    padding: 0;
+    list-style: 1.6;
+    height: 400px;
+    width: 400px;
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+}
+
+@media screen and (max-width:400px) {
+    #formula {
+        font-size: 1.3rem;
+        font-weight: 600;
+    }
+}
+
+.cal {
+    text-align: center;
+    color: #ddd;
+}
+
+h1 {
+    margin: 40px 0;
+}
+
+input {
+    width: calc(100% - 100px);
+    padding: 10px;
+    margin: 10px 0 20px 0;
+    box-sizing: border-box;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+#result {
+    margin: 1.4rem 0;
+    font-size: 1.5rem;
+    color: #000000;
+}
+
+
+.gcd {
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 0;
+}
+
+abel {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 8px;
+    color: #333333;
+}
+
+input,
+select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    border-radius: 10px;
+}
+
+button {
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #6f0150;
+    color: #ffffff;
+    border: none;
+    border-radius: 9px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #45a09e;
+}
+
+#result {
+    margin-top: 16px;
+    font-weight: bold;
+    color: #020101;
+}