Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added 3D Distance Calculator #826

Merged
merged 8 commits into from
May 24, 2024
Merged

Added 3D Distance Calculator #826

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f9d89e4
Create README.md
CoderUzumaki May 24, 2024
3a7d329
Add files via upload
CoderUzumaki May 24, 2024
0516be3
Update README.md
CoderUzumaki May 24, 2024
792031c
Update index.html
CoderUzumaki May 24, 2024
09941eb
Update README.md
Rakesh9100 May 24, 2024
349da7f
Update index.html
Rakesh9100 May 24, 2024
9dc7e29
Update index.html
Rakesh9100 May 24, 2024
6a22e9e
Merge branch 'main' into main
Rakesh9100 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Calculators/3D-Distance-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# <p align="center">3D Distance Calculator</p>

## Description :-

It calculates the distance between 2 points (upto 3 decimal places) in a 3-Dimensional Space. User can input the x, y and z co-ordinates of the two points and after hitting the "Get Distance" button, the calculated distance appears.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![Screenshot 2024-05-24 143608](https://github.com/CoderUzumaki/CalcDiverse/assets/149368945/eb4f8300-d60f-47a2-9608-58fa5a5210c0)
![Screenshot 2024-05-24 143639](https://github.com/CoderUzumaki/CalcDiverse/assets/149368945/c7e1178e-d246-40b6-af54-7e894a5f760f)





53 changes: 53 additions & 0 deletions Calculators/3D-Distance-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Distance Calculator</title>

<link rel="stylesheet" href="style.css">
</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>
21 changes: 21 additions & 0 deletions Calculators/3D-Distance-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
73 changes: 73 additions & 0 deletions Calculators/3D-Distance-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
18 changes: 16 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1951,7 +1951,21 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>#D 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>

<!-- Calculator Section Ends Here -->
Expand Down Expand Up @@ -1993,4 +2007,4 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>

</body>

</html>
</html>