-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added coordinate distance calculator (#110)
Co-authored-by: ayush-1s <[email protected]> Co-authored-by: Ruan Aragão <[email protected]>
- Loading branch information
3 people
authored
Oct 29, 2023
1 parent
515c391
commit 20cdcb9
Showing
4 changed files
with
151 additions
and
41 deletions.
There are no files selected for viewing
22 changes: 22 additions & 0 deletions
22
calculators/Distance-between-two-coordinates-calculator/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Coordinate Distance Calculator</h1> | ||
| <div class="calculator"> | ||
| <label for="lat1">Latitude 1:</label> | ||
| <input type="text" id="lat1" placeholder="Enter latitude 1"> | ||
| <label for="lon1">Longitude 1:</label> | ||
| <input type="text" id="lon1" placeholder="Enter longitude 1"> | ||
| <label for="lat2">Latitude 2:</label> | ||
| <input type="text" id="lat2" placeholder="Enter latitude 2"> | ||
| <label for="lon2">Longitude 2:</label> | ||
| <input type="text" id="lon2" placeholder="Enter longitude 2"> | ||
| <button onclick="calculateDistance()">Calculate Distance</button> | ||
| <div id="result"></div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
31 changes: 31 additions & 0 deletions
31
calculators/Distance-between-two-coordinates-calculator/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| function calculateDistance() { | ||
| 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); | ||
|
|
||
| if (isNaN(lat1) || isNaN(lon1) || isNaN(lat2) || isNaN(lon2)) { | ||
| document.getElementById('result').textContent = 'Please enter valid coordinates.'; | ||
| return; | ||
| } | ||
|
|
||
| const earthRadius = 6371; // Earth's radius in kilometers | ||
|
|
||
| const lat1Rad = toRadians(lat1); | ||
| const lat2Rad = toRadians(lat2); | ||
| const latDiff = toRadians(lat2 - lat1); | ||
| const lonDiff = toRadians(lon2 - lon1); | ||
|
|
||
| const a = Math.sin(latDiff / 2) * Math.sin(latDiff / 2) + | ||
| Math.cos(lat1Rad) * Math.cos(lat2Rad) * | ||
| Math.sin(lonDiff / 2) * Math.sin(lonDiff / 2); | ||
|
|
||
| const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | ||
| const distance = earthRadius * c; | ||
|
|
||
| document.getElementById('result').textContent = `Distance: ${distance.toFixed(2)} km`; | ||
| } | ||
|
|
||
| function toRadians(degrees) { | ||
| return degrees * (Math.PI / 180); | ||
| } |
55 changes: 55 additions & 0 deletions
55
calculators/Distance-between-two-coordinates-calculator/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| text-align: center; | ||
| background-color: #f1f1f1; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| h1 { | ||
| color: #333; | ||
| } | ||
|
|
||
| .calculator { | ||
| background-color: #fff; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); | ||
| padding: 20px; | ||
| width: 300px; | ||
| margin: 20px auto; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| input { | ||
| width: 100%; | ||
| padding: 5px; | ||
| margin-top: 5px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 3px; | ||
| } | ||
|
|
||
| button { | ||
| background-color: #333; | ||
| color: white; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| border: none; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| margin-top: 10px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #444; | ||
| } | ||
|
|
||
| #result { | ||
| font-size: 20px; | ||
| color: #333; | ||
| margin: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,47 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="description" | ||
| content="Calcy is a comprehensive collection of calculators for finance, engineering, science, and more. Find the perfect calculator for your needs and start calculating today!" /> | ||
| <!-- Always include this line of code!!! --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="description" | ||
| content="Calcy is a comprehensive collection of calculators for finance, engineering, science, and more. Find the perfect calculator for your needs and start calculating today!" /> | ||
| <!-- Always include this line of code!!! --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
|
||
| <!-- Favicons --> | ||
| <link rel="icon" href="img/favicons/favicon-64.png" /> | ||
| <!-- Favicon for Apple devices --> | ||
| <link rel="apple-touch-icon" href="img/favicons/favicon-192.png" /> | ||
| <link rel="manifest" href="manifest.webmanifest" /> | ||
| <title>Calcy — The Ultimate Calculator Collection</title> | ||
| </head> | ||
| <body> | ||
| <h1>Calculators</h1> | ||
| <hr /> | ||
| <!-- Add below --> | ||
| <a href="./calculators/example-calculator/index.html">Example Calculator</a><br /> | ||
| <a href="/calculators/cgpa-calculator">CGPA Calculator</a><br/> | ||
| <a href="./calculators/currency-calculator/index.html">Currency Calculator</a><br /> | ||
| <a href="./calculators/body-mass-index-calculator/index.html">Body Mass Index Calculator</a><br /> | ||
| <a href="./calculators/bitwise-calculator/index.html">Bitwise calculator</a><br> | ||
| <a href="./calculators/find-age-calculator">Age Calculator</a><br /> | ||
| <a href="./calculators/temperature-calculator/">temperature Calculator</a><br /> | ||
| <a href="./calculators/tip-calculator">Tip Calculator</a><br /> | ||
| <a href="./calculators/PX-to-EM-converter/index.html">Pixel to Em Converter </a><br /> | ||
| <a href="./calculators/count-by-weight/index.html">Count by Weight</a><br /> | ||
| <a href="./calculators/discount-calculator/index.html">Discount Calculator</a><br /> | ||
| <a href="./calculators/invesrment-calculator/index.html">Investment Calculator</a><br /> | ||
| <a href="./calculators/number-system-calculator/index.html">Number System Calculator</a><br /> | ||
| <a href="./calculators/Body Fat-calculator/index.html">Body-Fat-Calculator</a><br /> | ||
| <a href="./calculators/compound-interest-calculator/index.html">Compound Interest Calculator</a><br /> | ||
| <a href="./calculators/root-calculator/index.html">Quadratic Root Calculator</a><br /> | ||
| <a href="./calculators/color-converter/index.html">COlor Converter</a><br /> | ||
| <a href="./calculators/2-8-16-calculator/index.html">2-8-16 Calculator</a><br/> | ||
| <a href="./calculators/distance-calculator/">Distance Calculator</a><br /> | ||
| <a href="./calculators/binary-operations-calculator/">Binary Operations Calculator</a><br /> | ||
| <a href="./calculators/general-purpose-calculator/index.html">General Calculator</a><br /> | ||
| <a href="./calculators/unit-convertor/index.html">Unit Convertor </a><br /> | ||
| </body> | ||
| <!-- Favicons --> | ||
| <link rel="icon" href="img/favicons/favicon-64.png" /> | ||
| <!-- Favicon for Apple devices --> | ||
| <link rel="apple-touch-icon" href="img/favicons/favicon-192.png" /> | ||
| <link rel="manifest" href="manifest.webmanifest" /> | ||
|
|
||
| <title>Calcy — The Ultimate Calculator Collection</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>Calculators</h1> | ||
| <hr /> | ||
| <!-- Add below --> | ||
| <a href="./calculators/example-calculator/index.html">Example Calculator</a><br /> | ||
| <a href="/calculators/cgpa-calculator">CGPA Calculator</a><br/> | ||
| <a href="./calculators/currency-calculator/index.html">Currency Calculator</a><br /> | ||
| <a href="./calculators/body-mass-index-calculator/index.html">Body Mass Index Calculator</a><br /> | ||
| <a href="./calculators/bitwise-calculator/index.html">Bitwise calculator</a><br> | ||
| <a href="./calculators/find-age-calculator">Age Calculator</a><br /> | ||
| <a href="./calculators/temperature-calculator/">temperature Calculator</a><br /> | ||
| <a href="./calculators/tip-calculator">Tip Calculator</a><br /> | ||
| <a href="./calculators/PX-to-EM-converter/index.html">Pixel to Em Converter </a><br /> | ||
| <a href="./calculators/count-by-weight/index.html">Count by Weight</a><br /> | ||
| <a href="./calculators/discount-calculator/index.html">Discount Calculator</a><br /> | ||
| <a href="./calculators/invesrment-calculator/index.html">Investment Calculator</a><br /> | ||
| <a href="./calculators/number-system-calculator/index.html">Number System Calculator</a><br /> | ||
| <a href="./calculators/Body Fat-calculator/index.html">Body-Fat-Calculator</a><br /> | ||
| <a href="./calculators/compound-interest-calculator/index.html">Compound Interest Calculator</a><br /> | ||
| <a href="./calculators/root-calculator/index.html">Quadratic Root Calculator</a><br /> | ||
| <a href="./calculators/color-converter/index.html">COlor Converter</a><br /> | ||
| <a href="./calculators/2-8-16-calculator/index.html">2-8-16 Calculator</a><br/> | ||
| <a href="./calculators/distance-calculator/">Distance Calculator</a><br /> | ||
| <a href="./calculators/binary-operations-calculator/">Binary Operations Calculator</a><br /> | ||
| <a href="./calculators/unit-convertor/index.html">Unit Convertor </a><br /> | ||
| <a href="./calculators/Distance-between-two-coordinates-calculator/index.html">Coordinate Distance Calculator</a> | ||
| </body> | ||
| </html> |