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 Geodesic Distance Calculator #1244

Merged
merged 6 commits into from
Jun 11, 2024
Merged

Added Geodesic Distance Calculator #1244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bb95f21
added Geodesic Distance Calculator
pandeyji711 Jun 6, 2024
ab56bd7
Update and rename README.md to README.md
Rakesh9100 Jun 11, 2024
4a6553f
Update and rename index.html to index.html
Rakesh9100 Jun 11, 2024
6dcb2d4
Update and rename script.js to script.js
Rakesh9100 Jun 11, 2024
b71cdc1
Rename style.css to style.css
Rakesh9100 Jun 11, 2024
7a50617
Update index.html
Rakesh9100 Jun 11, 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
17 changes: 17 additions & 0 deletions Calculators/Geodesic-Distance-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# <p align="center">Geodesic Distance Calculator</p>

## Description :-

Calculates the geodesic distance between two points on an ellipsoid.
Inputs: Coordinates of the two points (latitude and longitude).
Outputs: Geodesic distance, path on the ellipsoid.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![Image](https://github.com/Rakesh9100/CalcDiverse/assets/154527778/2c087898-3a03-4f59-a2d1-27c9c2a17b66)
25 changes: 25 additions & 0 deletions Calculators/Geodesic-Distance-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!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>Geodesic Distance Calculator</title>
</head>
<body>
<div class="calculator">
<h1>Geodesic Distance Calculator</h1>
<label for="lat1">Latitude 1:</label>
<input type="number" id="lat1" step="0.01" value="0">
<label for="lon1">Longitude 1:</label>
<input type="number" id="lon1" step="0.01" value="0">
<label for="lat2">Latitude 2:</label>
<input type="number" id="lat2" step="0.01" value="0">
<label for="lon2">Longitude 2:</label>
<input type="number" id="lon2" step="0.01" value="0">
<button onclick="calculateGeodesicDistance()">Calculate</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions Calculators/Geodesic-Distance-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
function toRadians(degrees) {
return (degrees * Math.PI) / 180;
}

function calculateGeodesicDistance() {
const lat1 = parseFloat(document.getElementById("lat1").value);
const lon1 = parseFloat(document.getElementById("lon1").value);
const lat2 = parseFloat(document.getElementById("lat2").value);
const lon2 = parseFloat(document.getElementById("lon2").value);
const resultDiv = document.getElementById("result");

const R = 6371; // Radius of the Earth in kilometers
const dLat = toRadians(lat2 - lat1);
const dLon = toRadians(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(toRadians(lat1)) *
Math.cos(toRadians(lat2)) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;

resultDiv.innerText = `Geodesic Distance: ${distance.toFixed(2)} km`;
}
65 changes: 65 additions & 0 deletions Calculators/Geodesic-Distance-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #72edf2, #5151e5);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.calculator {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
max-width: 400px;
width: 100%;
}

h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}

label {
display: block;
font-weight: bold;
margin-top: 15px;
color: #555;
}

input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}

button {
background: #5151e5;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
transition: background 0.3s;
}

button:hover {
background: #3333cc;
}

#result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1254,6 +1254,20 @@ <h3>Calculates the nth root of a given number upto n precision.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Geodesic Distance Calculator</h2>
<h3>Calculate the geodesic distance between two points on an ellipsoid.</h3>
<div class="card-footer">
<a href="./Calculators/Geodesic-Distance-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Geodesic-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>Geometric Progression Calculator</h2>
Expand Down