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.

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 Orthocenter Of A Triangle Calculator #1735

Merged
merged 11 commits into from
Aug 3, 2024
15 changes: 15 additions & 0 deletions Calculators/Orthocentre-Of-A-Triangle-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Orthocentre Of A Triangle Calculator</p>

## Description :-

Orthocentre Of A Triangle Calculator is a web application that calculates the coordinates of the orthocentre of the triangle whose all three coordinates are input by the user

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/user-attachments/assets/336d2985-5411-4f40-89c9-1dbd67049eab)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions Calculators/Orthocentre-Of-A-Triangle-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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>Orthocentre Of A Triangle Calculator</title>
</head>

<body>
<header>
<h1>Orthocentre Of A Triangle Calculator</h1>
</header>

<section id="calculator">
<label for="firstSide">First Vertex :</label>
<input type="number" id="x1" required placeholder="Enter (x1)">
<input type="number" id="y1" required placeholder="Enter (y1)">

<label for="secondSide">Second Vertex :</label>
<input type="number" id="x2" required placeholder="Enter (x2)">
<input type="number" id="y2" required placeholder="Enter (y2)">

<label for="thirdSide">Third Vertex :</label>
<input type="number" id="x3" required placeholder="Enter (x3)">
<input type="number" id="y3" required placeholder="Enter (y3)">

<button onclick="calculate()">Calculate</button>

<p id="result"></p>
</section>

<script src="script.js"></script>
</body>

</html>
146 changes: 146 additions & 0 deletions Calculators/Orthocentre-Of-A-Triangle-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
function calculate() {
// Get input values
const x1 = parseFloat(document.getElementById('x1').value);
const y1 = parseFloat(document.getElementById('y1').value);
const x2 = parseFloat(document.getElementById('x2').value);
const y2 = parseFloat(document.getElementById('y2').value);
const x3 = parseFloat(document.getElementById('x3').value);
const y3 = parseFloat(document.getElementById('y3').value);

if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2) || isNaN(x3) || isNaN(y3)) {
document.getElementById("result").innerText = "Please enter the valid numbers for all fields.";
return;
}
if ((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) == 0) {
document.getElementById("result").innerText = "The given coordinates do not form a triangle";
return;
}

// Display the result
const orthocenter = calculateOrthocenter(x1, y1, x2, y2, x3, y3);
const resultElement = document.getElementById('result');
resultElement.innerText = "Orthocenter coordinates: (" + (orthocenter.x).toString() + ", " + (orthocenter.y).toString() + ")";
}


function calculateOrthocenter(x1, y1, x2, y2, x3, y3) {
// Javascript program for the above approach

// Function to find the line given
// two points
function lineFromPoints(P, Q, arr) {
arr[0] = Q[1] - P[1];
arr[1] = P[0] - Q[0];
arr[2] = arr[0] * (P[0]) + arr[1] * (P[1]);
}

// Function to convert the input line
// to its perpendicular bisector
function perpendicularBisector(P, Q, arr) {
let mid_point = [(P[0] + Q[0]) / 2,
(P[1] + Q[1]) / 2
];

// c = -bx + ay
arr[2] = -arr[1] * (mid_point[0]) +
arr[0] * (mid_point[1]);

let temp = arr[0];
arr[0] = -arr[1];
arr[1] = temp;
}

// Function to find the
// intersection point of two lines
function lineLineIntersection(abc, efg) {

let determinant = abc[0] * efg[1] - efg[0] * abc[1];

// As points are non-collinear,
// determinant cannot be 0
let x = (efg[1] * abc[2] - abc[1] * efg[2]) / determinant;
let y = (abc[0] * efg[2] - efg[0] * abc[2]) / determinant;

return [x, y];
}

// Function to find the
// circumcenter of a triangle
function findCircumCenter(A) {

let P = A[0],
Q = A[1],
R = A[2];

// Line PQ is represented as
// ax + by = c
let abc = new Array(3);
lineFromPoints(P, Q, abc);

// Line QR is represented as
// ex + fy = g
let efg = new Array(3);
lineFromPoints(Q, R, efg);

// Converting lines PQ and QR
// to perpendicular bisectors
perpendicularBisector(P, Q, abc);
perpendicularBisector(Q, R, efg);

// Their point of intersection
// gives the circumcenter
let circumcenter = lineLineIntersection(abc, efg);

// Return the circumcenter
return circumcenter;
}

// Function to find the
// centroid of a triangle
function findCentroid(A) {
// Centroid of a triangle is
// given as (Xa + Xb + Xc)/3,
// (Ya + Yb + Yc)/3
let centroid = [
(A[0][0] + A[1][0] + A[2][0]) / 3,
(A[0][1] + A[1][1] + A[2][1]) / 3
];

// Return the centroid
return centroid;
}

// Function to find the
// orthocenter of a triangle
function findOrthocenter(A) {
// Store the circumcenter and
// the centroid of triangle
let circumcenter = findCircumCenter(A);
let centroid = findCentroid(A);

// Apply External section formula:
// (mX1 - nX2)/(m - n), (mY1 - nY2)/(m - n)
let h = [
(3 * centroid[0] - 2 * circumcenter[0]),
(3 * centroid[1] -
2 * circumcenter[1])
];

// Print the x and y-coordinate
// of the orthocenter of the triangle
return h;
}

// Given points P, Q, R
let P = [x1, y1];
let Q = [x2, y2];
let R = [x3, y3];

let A = [P, Q, R];
h = findOrthocenter(A)
// function call
return ({
x: h[0],
y: h[1]
});
}
70 changes: 70 additions & 0 deletions Calculators/Orthocentre-Of-A-Triangle-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #85e3e0;
background-image: url('assets/background.jpeg');
background-size: cover;
background-repeat: none;
background-position: center;
}

header {
padding: 1em;
font-weight: bold;
font-size: larger;
color: #f7f6f6;
text-align: center;
text-decoration: underline;

}

#calculator {
max-width: 300px;
margin: 20px auto;
border: 1px solid #cccccc;
padding: 20px;
border-radius: 8px;
background: linear-gradient(to right, #d564e6, #e591aa);
background-color: #627a8d;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
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: #600178;
color: #ffffff;
border: none;
border-radius: 9px;
transition: background-color 0.3s;
}

button:hover {
background-color: #45a09e;
}

#result {
margin-top: 16px;
font-weight: bold;
font-size: larger;
color: #333333;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3263,6 +3263,20 @@ <h3>Calculates voltage, current, resistance, and power in watts for an electrica
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Orthocentre Of A Triangle Calculator</h2>
<h3>Calculates the orthocenter from the coordinates of a triangle's vertices.</h3>
<div class="card-footer">
<a href="./Calculators/Orthocentre-Of-A-Triangle-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Orthocentre-Of-A-Triangle-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>PH Calculator</h2>
Expand Down