Added 3D Distance Calculator (#826)

Rakesh9100 · May 24, 2024 · eeda9fc · eeda9fc
1 parent 38e705f
commit eeda9fc
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 0 deletions.
diff --git a/Calculators/3D-Distance-Calculator/README.md b/Calculators/3D-Distance-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">3D Distance Calculator</p>
+
+## Description :-
+
+This calculator calculates the distance between 2 points (up to 3 decimal places) in a 3-Dimensional Space.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Input fields for entering coordinates of two points in 3D space.
+- Calculation of the Euclidean distance between the points.
+- Clear and intuitive user interface for ease of use.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/9b596292-24af-424f-b94d-fd7dde37b1d6)
diff --git a/Calculators/3D-Distance-Calculator/index.html b/Calculators/3D-Distance-Calculator/index.html
@@ -0,0 +1,52 @@
+<!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 Distance Calculator</title>
+</head>
+<body>
+
+    <div class="container">
+        <div class="calc">
+            <div class="display">
+                <span>|AB| = </span>
+            </div>
+            <form action="">
+                <div class="point">
+                    <h3>Point A (x, y, z)</h3>
+                    <label for="X-1">X = </label>
+                    <input type="number" name="X-1" id="x1" value="0">
+                    <br>
+                    <label for="Y-1">Y = </label>
+                    <input type="number" name="Y-1" id="y1" value="0">
+                    <br>
+                    <label for="Z-1">Z = </label>
+                    <input type="number" name="Z-1" id="z1" value="0">
+                </div>
+                <div class="point">
+                    <h3>Point B (x, y, z)</h3>
+                    <label for="X-2">X = </label>
+                    <input type="number" name="X-2" id="x2" value="0">
+                    <br>
+                    <label for="Y-2">Y = </label>
+                    <input type="number" name="Y-2" id="y2" value="0">
+                    <br>
+                    <label for="Z-2">Z = </label>
+                    <input type="number" name="Z-2" id="z2" value="0">
+                </div>
+            </form>
+
+            <div>
+                <button type="button" onclick="calculate()">
+                    <h3>Get Distance</h3>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+
+</body>
+</html>
diff --git a/Calculators/3D-Distance-Calculator/script.js b/Calculators/3D-Distance-Calculator/script.js
@@ -0,0 +1,21 @@
+function calculate() {
+    // Get input values
+    var x1 = parseFloat(document.getElementById('x1').value);
+    var y1 = parseFloat(document.getElementById('y1').value);
+    var z1 = parseFloat(document.getElementById('z1').value);
+    var x2 = parseFloat(document.getElementById('x2').value);
+    var y2 = parseFloat(document.getElementById('y2').value);
+    var z2 = parseFloat(document.getElementById('z2').value);
+
+    // Check if input values are valid
+    if (isNaN(x1) || isNaN(y1) || isNaN(z1) || isNaN(x2) || isNaN(y2) || isNaN(z2)) {
+        document.getElementById('result').innerHTML = 'Please enter valid numbers for both points.';
+        return;
+    }
+
+    // Calculate distance
+    var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2));
+
+    // Display the result
+    document.getElementsByClassName('display')[0].innerHTML = '<span>|AB| = </span>' + distance.toFixed(3);
+}
diff --git a/Calculators/3D-Distance-Calculator/style.css b/Calculators/3D-Distance-Calculator/style.css
@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    box-sizing: border-box;
+}
+
+.container{
+    width: 100%;
+    height: 100dvh;
+    background-color: #e3f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.calc{
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #3a4452;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+}
+
+.display{
+    height: 50px;
+    width: 250px;
+    border-radius: 10px;
+    margin: 10px 0 0 0;
+    background: #fff;
+    color: black;
+}
+
+.display{
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+}
+
+form{
+    display: flex;
+    gap: 30px;
+    margin: 20px 0;
+}
+form input{
+    border-radius: 10px;
+    height: 30px;
+    width: 150px;
+    margin: 5px 5px;
+    padding: 5px;
+    cursor: pointer;
+    font-size:20px;
+}
+
+button{
+    height: 50px;
+    width: 150px;
+    border: 0;
+    margin: 10px;
+    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);
+    color: white;
+    cursor: pointer;
+    background: transparent;
+}
diff --git a/index.html b/index.html
@@ -118,6 +118,20 @@ <h3>Calculates the area and perimeter of different useful 2D shapes.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>3D Distance Calculator</h2>
+                <h3>Calculates the distance between 2 points in a 3D space.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/3D-Distance-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/3D-Distance-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>3D Shapes Calculator</h2>